Using Speakker – Cool HTML5 Audio Player

Using Speakker – Cool HTML5 Audio Player

35 192525
Speakker html5 audio player tutorial

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:

ParamTypeDescriptionSample
filestringURL to single mp3/ogg file or to playlistfile: ‘data/01.mp3’
playlistbooleanTell us, are we going to use Full player with playlist support or notplaylist: true
posterstringCover for selected fileposter: ‘data/cover.png’
titlestringTitle for filetitle: ‘Song #1’
themestringUsed theme of player. Possible values: ‘dark’ and ‘light’theme: ‘dark’
fatbooleanMakes the sticky playlist player even bigger in case of ‘true’fat: true
wikipediastringYou can put link to Wikipedia page herewikipedia: ‘http://en.wikipedia.org/wiki/Rammstein’
lastfmstringYou can link player with last.fm artists herelastfm: ‘http://www.lastfm.de/music/paniq’
adminstringHere 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!

SIMILAR ARTICLES


35 COMMENTS

    • 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.

  1. 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)

  2. 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.

  3. Hello,

    I don’t have sound in Internet Explorer 9 and the latest Safari. This happens with your demo page as well.

    Any ideas

  4. 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 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.

  5. 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

  6. 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

    • 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.

  7. $(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

  8. 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!!

  9. Hi!
    Can you help me with the new speakker JS v1.2.
    I can’t configure for only speakker nano or the small.
    Thanks

  10. 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!

  11. 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

Leave a Reply