Home » Tutorials

Using Speakker – Cool HTML5 Audio Player

Tutorials
Author Reading 11 min Views 107 Published by Modified by

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:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. css/mspeakker.css and css/speakker.css
  6. Step 3. JS
  7. js/jquery.min.js and js/projekktor.min.js
  8. speakker.min.js
  9. js/main.js
  10. Step 4. SWF
  11. swf/jarisplayer.swf
  12. Step 5. PHP
  13. playlist.php
  14. And at last – table with all possible params (to current moment) of that Speakker player:
  15. Conclusion
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

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04     <title>Speakker - HTML5 audio player</title>
05     <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
06     <link rel="stylesheet" href="css/speakker.css"  type="text/css" media="screen">
07     <link rel="stylesheet" href="css/mspeakker.css" type="text/css" media="screen">
08     <script type="text/javascript" src="js/jquery.min.js"></script>
09     <script type="text/javascript" src="js/projekktor.min.js"></script>
10     <script type="text/javascript" src="speakker.min.js"></script>
11     <script type="text/javascript" src="js/main.js"></script>
12 </head>
13 <body>
14     <div class="example">
15         <h2>Mini player example (for single file)</h2>
16         <div class="small_player"></div>
17      </div>
18 </body>
19 </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

1 * {margin:0;padding:0;border:0}
2 body{background:#eee}
3 .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}
4 .small_player {float:left;margin-right:100px}
5 .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

01 $(document).ready(function() {
02     $('.small_player').speakker({
03         file: 'data/01.mp3',
04         poster: 'data/cover.png',
05         title: 'Song #1',
06         theme: 'light'
07     });
08     $().speakker({
09         file: 'playlist.php',
10         playlist: true,
11         theme: 'dark',
12     });
13 });

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

01 <?
02 $aResult = array(
03     'playlist' => array(
04         '1' => array(
05             'src' => 'data/01.mp3', 'type' => 'audio/mp3',
06             'config' => array(
07                 'title' => 'Song 1', 'poster' => 'data/cover.png'
08             ),
09         ),
10         '2' => array(
11             'src' => 'data/02.mp3', 'type' => 'audio/mp3',
12             'config' => array(
13                 'title' => 'Song 2', 'poster' => 'data/cover.png'
14             ),
15         ),
16         '3' => array(
17             'src' => 'data/03.mp3', 'type' => 'audio/mp3',
18             'config' => array(
19                 'title' => 'Song 3', 'poster' => 'data/cover.png'
20             ),
21         ),
22         '4' => array(
23             'src' => 'data/04.mp3', 'type' => 'audio/mp3',
24             'config' => array(
25                 'title' => 'Song 4', 'poster' => 'data/cover.png'
26             ),
27         ),
28         '5' => array(
29             'src' => 'data/05.mp3', 'type' => 'audio/mp3',
30             'config' => array(
31                 'title' => 'Song 5', 'poster' => 'data/cover.png'
32             ),
33         ),
34         '6' => array(
35             'src' => 'data/06.mp3', 'type' => 'audio/mp3',
36             'config' => array(
37                 'title' => 'Song 6', 'poster' => 'data/cover.png'
38             ),
39         ),
40         '7' => array(
41             'src' => 'data/07.mp3', 'type' => 'audio/mp3',
42             'config' => array(
43                 'title' => 'Song 7', 'poster' => 'data/cover.png'
44             ),
45         ),
46         '8' => array(
47             'src' => 'data/08.mp3', 'type' => 'audio/mp3',
48             'config' => array(
49                 'title' => 'Song 8', 'poster' => 'data/cover.png'
50             ),
51         ),
52     )
53 );
54 header("Content-Type: application/json");
55 require_once('Services_JSON.php');
56 $oJson = new Services_JSON();
57 echo $oJson->encode($aResult);
58 ?>

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!

Rate article
© 2025 Script Tutorials