You don´t know what Speakker is? Go here to learn more.
Mounting Speakker into any website is quick and very straight forward:
Something similar to this should be in your page´s header now:
Assumed you´ve something like this somewhere in your markup:
You can bring up the small version of the player with this:
The small Speakker is nice but the big one rocks. It´s designed for playlists. That´s why we want to focus on setting up a playlist driven instance here. Playlists will work for the tiny variant also - but who cares.
To bring up the big sticky Speakker just use $().speakker (without a selector) as shown below. The script will generate the necessary DOM elements and will glue the player to the bottom of the page.
As you can see file does not point to an OGV or MP3 but to a PHP file. This is where the JSON playlist is generated. To learn more about playlists please refer the Projekktor Playlist Docu. To get a first insight just open the mentioned PHP to see what it pumps out: http://www.speakker.com/opentape/code/projekktor.php
To avoid frustration and strange results let Speakker know that you feed him with a playlist by setting playlist to TRUE.
Et voila… and yes, it is that easy.
Optionally the big player variant features three custom links: “lastfm”, “wikipedia” and “admin”. Setting values for them will enable the corresponding GUI elements.
file (string): URL to a single audio file or a projekktor playlist holding one or more
playlist (boolean): Load “file” as JSON playlist on TRUE. Assume a single audio file otherwise.
poster (string): The default poster / cover for the given file.
title (string): The player´s title used on single file playback.
theme (string): Use “dark” or “light” color scheme.
fat (boolean): Makes the sticky playlist player even bigger if set to TRUE.
wikipedia (string): URL to the artist´s Wikipedia page if any.
lastfm (string): URL to the artist´s last.fm page if any.
admin (string): URL to the admin backend if any.