Quick Install Guide – The Free HTML5 Audio Player

# AS OF March, 28th 2012 THIS DOC is outdated and currently being rewritten. Sorry for any inconveniences.

Quick Install Guide

Mounting Speakker into any website is quick and very straight forward:

1. Make sure your page loads jQuery V1.4.2 or higher
2. Upload the “speakker”-folder of the download archive to your site. Make sure this includes all directories and files within. Speakker will automatically load it´s flash fallback component files from there.
3. Inlude the “projekktor.min.js”.
4. Inlude the “speakker.min.js”.
5. Inlude “speakker.css” and “mspeakker.css”
6. Create an empty DOM container where you want the player to sit on.
7. Instantiate as described below.
8. Done.

Something similar to this should be in your page´s header now:

<script type="text/javascript" src="speakker/jquery.min.js"></script>

<!-- INCLUDE SPEAKKER -->
<link rel="stylesheet" href="speakker/css/speakker.css" type="text/css" media="screen">
<link rel="stylesheet" href="speakker/css/mspeakker.css" type="text/css" media="screen">
<script type="text/javascript" src="speakker/projekktor.min.js"></script> 
<script type="text/javascript" src="speakker/speakker.min.js"></script> 
<!-- That´s it -->

Instantiating the tiny Player

Assumed you´ve something like this somewhere in your markup:

<div class="speakkerSmall"></div>

You can bring up the small version of the player with this:

<script type="text/javascript">
$(document).ready(function() {	
	$('.speakkerSmall').speakker({
		file: 'http://url/toyour/music.mp3',
		title: 'one single MP3',
		theme: 'light',
		poster: 'cover.jpg'
	});
</script>

Instantiating the Big Boy

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.

<script type="text/javascript">
$(document).ready(function() {
	$().speakker({
		file: 'http://www.speakker.com/opentape/code/projekktor.php',
		playlist: true,
		theme: 'light',
		admin: 'http://www.speakker.com/opentape/code/login.php',
		lastfm: 'http://www.lastfm.de/music/paniq'
	});
});
</script>

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

You can´t apply http://www.speakker.com/opentape/code/projekktor.php to your local test installation or within a page at an other domain due to Javascript security restrictions.

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.

Config Parameters

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.