# 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:
- Make sure your page loads jQuery V1.4.2 or higher
- 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.
- Inlude the “projekktor.min.js”.
- Inlude the “speakker.min.js”.
- Inlude “speakker.css” and “mspeakker.css”
- Create an empty DOM container where you want the player to sit on.
- Instantiate as described below.
- 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.
