* SoundCloud Custom Player jQuery Plugin
* Author: Matas Petrikas, [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
* Copyright (c) 2009 SoundCloud Ltd.
* Licensed under the MIT license:
* [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
*
Quellcode (ohne CSS):
PHP-Code:
/*
* SoundCloud Custom Player jQuery Plugin
* Author: Matas Petrikas, [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
* Copyright (c) 2009 SoundCloud Ltd.
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Usage:
* <a href="http://soundcloud.com/matas/hobnotropic" class="sc-player">My new dub track</a>
* The link will be automatically replaced by the HTML based player
*/
var FETCHED_TRACK_TO_PLAY = false;
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
(function($) {
// Convert milliseconds into Hours (h), Minutes (m), and Seconds (s)
var timecode = function(ms) {
var hms = function(ms) {
return {
h: Math.floor(ms/(60*60*1000)),
m: Math.floor((ms/60000) % 60),
s: Math.floor((ms/1000) % 60)
};
}(ms),
tc = []; // Timecode array to be joined with '.'
var audioEngine = function() {
var html5AudioAvailable = function() {
var state = false;
try{
var a = new Audio();
state = a.canPlayType && (/maybe|probably/).test(a.canPlayType('audio/mpeg'));
// let's enable the html5 audio on selected mobile devices first, unlikely to support Flash
// the desktop browsers are still better with Flash, e.g. see the Safari 10.6 bug
// comment the following line out, if you want to force the html5 mode
state = state && (/iPad|iphone|mobile|pre\//i).test(navigator.userAgent);
}catch(e){
// there's no audio support here sadly
}
return state;
}(),
callbacks = {
onReady: function() {
$doc.trigger('scPlayer:onAudioReady');
},
onPlay: function() {
$doc.trigger('scPlayer:onMediaPlay');
},
onPause: function() {
$doc.trigger('scPlayer:onMediaPause');
},
onEnd: function() {
$doc.trigger('scPlayer:onMediaEnd');
},
onBuffer: function(percent) {
$doc.trigger({
type: 'scPlayer:onMediaBuffering',
percent: percent
});
}
};
var html5Driver = function() {
var player = new Audio(),
onTimeUpdate = function(event){
var obj = event.target,
buffer = ((obj.buffered.length && obj.buffered.end(0)) / obj.duration) * 100;
// ipad has no progress events implemented yet
callbacks.onBuffer(buffer);
// announce if it's finished for the clients without 'ended' events implementation
if (obj.currentTime === obj.duration) {
callbacks.onEnd();
}
},
onProgress = function(event) {
var obj = event.target,
buffer = ((obj.buffered.length && obj.buffered.end(0)) / obj.duration) * 100;
callbacks.onBuffer(buffer);
};
// listen to audio engine events
// when the loaded track is ready to play
soundcloud.addEventListener('onPlayerReady', function(flashId, data) {
player = soundcloud.getPlayer(engineId);
callbacks.onReady();
});
// when the loaded track finished playing
soundcloud.addEventListener('onMediaEnd', callbacks.onEnd);
// when the loaded track is still buffering
soundcloud.addEventListener('onMediaBuffering', function(flashId, data) {
callbacks.onBuffer(data.percent);
});
// when the loaded track started to play
soundcloud.addEventListener('onMediaPlay', callbacks.onPlay);
// when the loaded track is was paused
soundcloud.addEventListener('onMediaPause', callbacks.onPause);
return {
load: function(track) {
var url = track.permalink_url;
if(player){
player.api_load(url);
}else{
// create a container for the flash engine (IE needs this to operate properly)
$('<div class="sc-player-engine-container"></div>').appendTo(document.body).html(flashHtml(url));
}
},
play: function() {
player && player.api_play();
},
pause: function() {
player && player.api_pause();
},
stop: function(){
player && player.api_stop();
},
seek: function(relative){
player && player.api_seekTo((player.api_getTrackDuration() * relative));
},
getDuration: function() {
return player && player.api_getTrackDuration && player.api_getTrackDuration() * 1000;
},
getPosition: function() {
return player && player.api_getTrackPosition && player.api_getTrackPosition() * 1000;
},
setVolume: function(val) {
if(player && player.api_setVolume){
player.api_setVolume(val);
}
}
var apiKey,
didAutoPlay = false,
players = [],
updates = {},
currentUrl,
loadTracksData = function($player, links, key) {
var index = 0,
playerObj = {
node: $player,
tracks: []
},
loadUrl = function(link) {
$.getJSON(scApiUrl(link.url, apiKey), function(data) {
// log('data loaded', link.url, data);
index += 1;
if(data.tracks){
// log('data.tracks', data.tracks);
playerObj.tracks = playerObj.tracks.concat(data.tracks);
}else if(data.duration){
// a secret link fix, till the SC API returns permalink with secret on secret response
data.permalink_url = link.url;
// if track, add to player
playerObj.tracks.push(data);
}else if(data.username){
// if user, get his tracks or favorites
if(/favorites/.test(link.url)){
links.push({
url:data.uri + '/favorites'
});
}else{
links.push({
url:data.uri + '/tracks'
});
}
}else if($.isArray(data)){
playerObj.tracks = playerObj.tracks.concat(data);
}
if(links[index]){
// if there are more track to load, get them from the api
loadUrl(links[index]);
}else{
// if loading finishes, anounce it to the GUI
playerObj.node.trigger({
type:'onTrackDataLoaded.scPlayer',
playerObj: playerObj
});
}
});
};
// update current API key
apiKey = key;
// update the players queue
players.push(playerObj);
// load first tracks
loadUrl(links[index]);
},
artworkImage = function(track, usePlaceholder) {
if(usePlaceholder){
return '<div class="sc-loading-artwork">Loading Artwork</div>';
}else if (track.artwork_url) {
return '<img src="' + track.artwork_url.replace('-large', '-t300x300') + '"/>';
}else{
return '<div class="sc-no-artwork">No Artwork</div>';
}
},
updateTrackInfo = function($player, track) {
$('.sc-info', $player).each(function(index) {
});
// update the artwork
$('.sc-artwork-list li', $player).each(function(index) {
var $item = $(this),
itemTrack = $item.data('sc-track');
if (itemTrack === track) {
// show track artwork
$item
.addClass('active')
.find('.sc-loading-artwork')
.each(function(index) {
// if the image isn't loaded yet, do it now.
$(this).removeClass('sc-loading-artwork').html(artworkImage(track, false));
});
}else{
// reset other artworks
$item.removeClass('active');
}
});
// update the track duration in the progress bar
$('.sc-duration', $player).html(timecode(track.duration));
// put the waveform into the progress bar
$('.sc-waveform-container', $player).html('<img src="' + track.waveform_url.replace('_m', '_s') +'" />');
$player.trigger('onPlayerTrackSwitch.scPlayer', [track]);
},
play = function(track) {
var url = track.permalink_url;
if(currentUrl === url){
// log('will play');
audioEngine.play();
}else{
currentUrl = url;
// log('will load', url);
audioEngine.load(track, apiKey);
}
},
getPlayerData = function(node) {
return players[$(node).data('sc-player').id];
},
updatePlayStatus = function(player, status) {
if(status){
// reset all other players playing status
$('div.sc-player.playing').removeClass('playing');
}
$(player)
.toggleClass('playing', status)
.trigger((status ? 'onPlayerPlay' : 'onPlayerPause') + '.scPlayer');
},
onPlay = function(player, id) {
var track = getPlayerData(player).tracks[id || 0];
updateTrackInfo(player, track);
// cache the references to most updated DOM nodes in the progress bar
updates = {
$buffer: $('.sc-buffer', player),
$played: $('.sc-played', player),
position: $('.sc-position', player)[0]
};
updatePlayStatus(player, true);
play(track);
},
onPause = function(player) {
updatePlayStatus(player, false);
audioEngine.pause();
},
onFinish = function() {
var $player = updates.$played.closest('.sc-player'),
$nextItem;
// update the scrubber width
updates.$played.css('width', '0%');
// show the position in the track position counter
updates.position.innerHTML = timecode(0);
// reset the player state
updatePlayStatus($player, false);
// stop the audio
audioEngine.stop();
$nextItem = $($player).parent().next().find('.sc-player').find('.sc-trackslist li.active');
if($($nextItem).length == 0)
{
$nextItem = $($player).parent().next().find('.sc-player').find('.sc-trackslist li.active');
if($($nextItem).length == 0)
{
var page = getUrlVars();
page = page["p"];
if(undefined == page)
{
page = 2;
}
else
{
page++;
}
var host = window.location.host;
if(host.charAt(host.length-1) == '/')
{
host = host.substring(0, host.length-1);
}
var path = window.location.pathname;
if(path.charAt(0) == '/')
{
path = path.substring(1);
}
var url = "http://" + host + "/" + path + '?p=' + page + '&play=1';
window.location = url;
}
}
$nextItem.click();
},
onSeek = function(player, relative) {
audioEngine.seek(relative);
},
soundVolume = function() {
var vol = 80,
cooks = document.cookie.split(';'),
volRx = new RegExp('scPlayer_volume=(\\d+)');
for(var i in cooks){
if(volRx.test(cooks[i])){
vol = parseInt(cooks[i].match(volRx)[1], 10);
break;
}
}
return vol;
}(),
onVolume = function(volume) {
var vol = Math.floor(volume);
// save the volume in the cookie
var date = new Date();
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
soundVolume = vol;
document.cookie = ['scPlayer_volume=', vol, '; expires=', date.toUTCString(), '; path="/"'].join('');
// update the volume in the engine
audioEngine.setVolume(soundVolume);
},
positionPoll;
// listen to audio engine events
$doc
.bind('scPlayer:onAudioReady', function(event) {
log('onPlayerReady: audio engine is ready');
audioEngine.play();
// set initial volume
onVolume(soundVolume);
})
// when the loaded track started to play
.bind('scPlayer:onMediaPlay', function(event) {
clearInterval(positionPoll);
positionPoll = setInterval(function() {
var duration = audioEngine.getDuration(),
position = audioEngine.getPosition(),
relative = (position / duration);
// update the scrubber width
updates.$played.css('width', (100 * relative) + '%');
// show the position in the track position counter
updates.position.innerHTML = timecode(position);
// announce the track position to the DOM
$doc.trigger({
type: 'onMediaTimeUpdate.scPlayer',
duration: duration,
position: position,
relative: relative
});
}, 500);
})
// when the loaded track is was paused
.bind('scPlayer:onMediaPause', function(event) {
clearInterval(positionPoll);
positionPoll = null;
})
// change the volume
.bind('scPlayer:onVolumeChange', function(event) {
onVolume(event.volume);
})
.bind('scPlayer:onMediaEnd', function(event) {
onFinish();
})
.bind('scPlayer:onMediaBuffering', function(event) {
updates.$buffer.css('width', event.percent + '%');
});
// add the classes of the source node to the player itself
// the players can be indvidually styled this way
if(sourceClasses || opts.customClass){
$player.addClass(sourceClasses).addClass(opts.customClass);
}
// load and parse the track data from SoundCloud API
loadTracksData($player, links, opts.apiKey);
// init the player GUI, when the tracks data was laoded
$player.bind('onTrackDataLoaded.scPlayer', function(event) {
// log('onTrackDataLoaded.scPlayer', event.playerObj, playerId, event.target);
var tracks = event.playerObj.tracks;
if (opts.randomize) {
tracks = shuffle(tracks);
}
// create the playlist
$.each(tracks, function(index, track) {
var active = index === 0;
// create an item in the playlist
$('<li><a href="' + track.permalink_url +'">' + track.title + '</a><span class="sc-track-duration">' + timecode(track.duration) + '</span></li>').data('sc-track', {
id:index
}).toggleClass('active', active).appendTo($list);
// create an item in the artwork list
$('<li></li>')
.append(artworkImage(track, index >= opts.loadArtworks))
.appendTo($artworks)
.toggleClass('active', active)
.data('sc-track', track);
});
if($list.children().length < 2)
{
$list.addClass('hidden');
}
$player
.removeClass('loading')
.trigger('onPlayerInit.scPlayer').parent().removeClass('loading');
// update the element before rendering it in the DOM
$player.each(function() {
if($.isFunction(opts.beforeRender)){
opts.beforeRender.call(this, tracks);
}
});
// set the first track's duration
$('.sc-duration', $player)[0].innerHTML = timecode(tracks[0].duration);
$('.sc-position', $player)[0].innerHTML = timecode(0);
// set up the first track info
updateTrackInfo($player, tracks[0]);
// if auto play is enabled and it's the first player, start playing
if(opts.autoPlay && !didAutoPlay){
onPlay($player);
didAutoPlay = true;
}
// replace the DOM source (if there's one)
$source.each(function(index) {
$(this).replaceWith($player);
});
return $player;
};
// stop all players, might be useful, before replacing the player dynamically
$.scPlayer.stopAll = function() {
$('.sc-player.playing a.sc-pause').click();
};
// plugin wrapper
$.fn.scPlayer = function(options) {
// reset the auto play
didAutoPlay = false;
// create the players
this.each(function() {
$.scPlayer(options, this);
});
return this;
};
// default plugin options
$.scPlayer.defaults = $.fn.scPlayer.defaults = {
customClass: null,
// do something with the dom object before you render it, add nodes, get more data from the services etc.
beforeRender : function(tracksData) {
var $player = $(this);
},
// initialization, when dom is ready
onDomReady : function() {
$('a.sc-player, div.sc-player').scPlayer();
},
autoPlay: false,
randomize: false,
loadArtworks: 5,
// the default Api key should be replaced by your own one
// get it here http://soundcloud.com/you/apps/new
apiKey: '8ZF4IkCbUYnc7lw53LmLIg'
};
// the GUI event bindings
//--------------------------------------------------------
Hybrid-Darstellung
