Using Speakker – Cool HTML5 Audio Player(jQuery)
Today we continue jQuery lessons, and we will try new audio player – Speakker. This is free html5 audio player with nice interface. It allow us to listen music, adjust the volume, have different covers (for media), and have possibility to attach playlists (even via PHP files). Also it have ready possibility to share link to facebook and twitter. So – welcome to test our demo.
Here are original website of this player: http://www.speakker.com/. You always can download latest version here.
Ok, here are our sample and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML.
This is our main page source code with both players.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Speakker - HTML5 audio player</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/speakker.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mspeakker.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/projekktor.min.js"></script>
<script type="text/javascript" src="speakker.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<h2>Mini player example (for single file)</h2>
<div class="small_player"></div>
</div>
</body>
</html>
As you can see – I prepared only one DIV parent for small player, big player will appear in bottom by self.
Step 2. CSS
Here are used CSS styles.
css/main.css
* {margin:0;padding:0;border:0}
body{background:#eee}
.example{position:relative;background:#FFF;width:650px;height:200px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:30px;-moz-border-radius:3px;-webkit-border-radius:3px}
.small_player {float:left;margin-right:100px}
.code {float:left}
Other css files:
css/mspeakker.css and css/speakker.css
Both files is part of speakker player (these files available in package)
Step 3. JS
Here are necessary JS files to our project.
js/jquery.min.js and js/projekktor.min.js
This is common files – jQuery library with our player. No need to show its full sources here (pretty big). It always available in package
speakker.min.js
This file belong to Speakker player too, and we should keep it in root folder (just because it will search flash application in ‘swf’ folder). So please, keep it in root too :)
js/main.js
$(document).ready(function() {
$('.small_player').speakker({
file: 'data/01.mp3',
poster: 'data/cover.png',
title: 'Song #1',
theme: 'light'
});
$().speakker({
file: 'playlist.php',
playlist: true,
theme: 'dark',
});
});
For our demo – we will show two different players. First one (small) – can play single file, and second – big. It have own playlist. Ok, when page loaded, we performing initializations of our players. Hope you already noticed differences between both initializations. First one (small player) – we selecting (by jquery) exact element where will appear player. And in its params we pointing which MP3 file we will play, poster image, title. So about second player – we pointing link to playlist generator, and set param ‘playlist’ into ‘true’. More details about possible params you will find in end of our tutorial.
Step 4. SWF
Single used flash swf file: (our player)
swf/jarisplayer.swf
Step 5. PHP
This file will generate us list of MP3 files (playlist) and print it via JSON.
playlist.php
<?
$aResult = array(
'playlist' => array(
'1' => array(
'src' => 'data/01.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 1', 'poster' => 'data/cover.png'
),
),
'2' => array(
'src' => 'data/02.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 2', 'poster' => 'data/cover.png'
),
),
'3' => array(
'src' => 'data/03.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 3', 'poster' => 'data/cover.png'
),
),
'4' => array(
'src' => 'data/04.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 4', 'poster' => 'data/cover.png'
),
),
'5' => array(
'src' => 'data/05.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 5', 'poster' => 'data/cover.png'
),
),
'6' => array(
'src' => 'data/06.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 6', 'poster' => 'data/cover.png'
),
),
'7' => array(
'src' => 'data/07.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 7', 'poster' => 'data/cover.png'
),
),
'8' => array(
'src' => 'data/08.mp3', 'type' => 'audio/mp3',
'config' => array(
'title' => 'Song 8', 'poster' => 'data/cover.png'
),
),
)
);
header("Content-Type: application/json");
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aResult);
?>
Services_JSON.php library available in package.
Seems we quite finished. All media files I put to ‘data’ folder. This is our audio files – from 01.mp3 till 08.mp3, plus cover.png
If you have own custom CMS, you even will albe to change generator of playlist to play any custom files (audio albums of members as example) !
And at last – table with all possible params (to current moment) of that Speakker player:
| Param | Type | Description | Sample |
|---|---|---|---|
| file | string | URL to single mp3/ogg file or to playlist | file: ‘data/01.mp3’ |
| playlist | boolean | Tell us, are we going to use Full player with playlist support or not | playlist: true |
| poster | string | Cover for selected file | poster: ‘data/cover.png’ |
| title | string | Title for file | title: ‘Song #1’ |
| theme | string | Used theme of player. Possible values: ‘dark’ and ‘light’ | theme: ‘dark’ |
| fat | boolean | Makes the sticky playlist player even bigger in case of ‘true’ | fat: true |
| wikipedia | string | You can put link to Wikipedia page here | wikipedia: ‘http://en.wikipedia.org/wiki/Rammstein’ |
| lastfm | string | You can link player with last.fm artists here | lastfm: ‘http://www.lastfm.de/music/paniq’ |
| admin | string | Here you can put link to admin page (to edit playlist) | admin: ‘edit_playlist.php’ |
Live Demo
Conclusion
Today we implemented another new html5 audio player which works great. Congratulations. Sure that you will happy play with it. You can use this material in your startups and projects. Good luck!
speakker playlist don´t support chrome :-(
It doesnt work with safari or chrome with that playlist.
Why the drive no longer works in Firefox 5 and Google Chrome and IE (9)?
2 TiB,
I just tested, updated my FF to v5 and also tested in IE9. And can confirm that it working in these browsers too.
The playlist works in IE8 but not IE9. Really wierd but otherwise thank you very much! It works well otherwise. Hope there’s a fix for this (Microsoft’s fault)
I am new to this stuff! I am getting an error on the big player “invalid or malformated playlist data”, but the mini player is working fine. Also is there a way to add “Ogg Vorbis MP3 WAV” type of files for browser compatibility?
Thank you in advance.
Hello josh,
Yes, you are right, each browser support own media formats.
I have seen related image somewhere (but don’t remember where exactly), but you always can read (about formats) here: http://en.wikipedia.org/wiki/HTML5_video
Hello,
I don’t have sound in Internet Explorer 9 and the latest Safari. This happens with your demo page as well.
Any ideas
Hi wurzelsepp,
It depends only on browser’s supported media formats.
You always can try more native method (for html5 audio) which I described in my another tutorial:
https://www.script-tutorials.com/html5-game-development-lesson-5/
Hi,
I have set up player but how to get the song to the playlist when clicking a hyperlink,what is the event for that..Please give me the hint.
Thanks in advance,
You are welcome to check full api of this player: http://www.projekktor.com/docs/api
how can i play m4a files? it’s possible or not :D thx
You always can try to play ‘m4a’ format here. It is pretty difficult to find any information about supported audio formats. But I know that it should work with mp3 and ogg.
hello,
I’am bit weak in jquery ,javascript,,, so can u tell me if the big-boy with the playlist can be configured so that it plays the song on the page instead of hardcoding the playlist,,if it is not possible, then can u tell me how to add multiple instances of the small player for different songs on the same page,.
Hello rinchen,
Don’t forget, that we prepared only example how to use this plugin. It doesn’t matter – is that list hardcoded or not. In case if you have a big website with multiple members, of course – you don’t need it to be hardcoded. Instead, you always can change it in the way to get separated playlist for every member (as example – you can keep their playlists in database), so, depends on their number – you can generate various playlists
Hey,
i just dont get this to work in Drupal. Even the content of download packs differ from here and the original vendor. I seem to be quite lost with this sadly. Any Drupal user here got this working? Would be great to get some help..cheers
Hello Suloo,
If you have any difficulties with code, the best helper is – Firebug, try to activate it, and – try to investigate all possible errors at server and client sides
Adding this player to joomla?
Hi Pds89,
As you wish
Does anyone knows if there is a way to autoplay (for the player to automacilly play the first song) ? Thanks
Hello adooms,
Hum, interesting question. I haven’t seen a such option. Maybe it hasn’t been created yet.
It would be very helpful if you would change this tutorial to one that works for Chrome. The original player does work for Chrome, so it isn’t a format problem. Try the one on the front page of http://www.speakker.com/.
Hello Sarah,
Yes, their new version works with Chrome. I will try to make a new article about this player. Because they made several significant changes. We will need to make a completely new integration.
Hi! Amazing player! any news about shoutcast support?
$(document).ready(function() {
$(‘.small_player’).speakker({
file: ‘data/01.mp3’,
poster: ‘data/cover.png’,
title: ‘Song #1’,
theme: ‘light’
});
how to make this code play more than one song, I want to have it on the same page
Hi Omar,
Your example is only for a single file. If you need to use more files – you can use playlists.
Hi!!
Thanks for useful resourse.!!
I have a question.
I just want to use a small player with the latest version Speakker 1.2.34, but the example is so much different with this version!
Can you help me please?
Thanks!!
Hi!
Can you help me with the new speakker JS v1.2.
I can’t configure for only speakker nano or the small.
Thanks
Hi, this version is not working anymore can you make another article to tell us how can integrate the new version and I don’t know if the new version is working very well to the official site of this player in demo area is showing just blank I tried with all browser’s and showing the same thing!
Hello Berat,
Thank you for your suggestion. I will create another new article about the fresh version of this player.
Thank you sir,
I will be waiting for it.
Hi Berat,
OK, but you also can try this: https://www.script-tutorials.com/html5-audio-player-with-playlist/
Made as written. But when I pressed the button on the big players, outstanding NA message if you go to the phone, but the computer does not work I press the power button and nothing happens. You can see examples here
http://178.211.163.183
invalid or malformated playlist data
Hi RasNikGal,
What button did you press? The player works good at my computer, I suppose that it works at the phone (android) too. Can you clarify your question?