/*
* SoundCloud Custom Player jQuery Plugin
* Author: Matas Petrikas, matas@soundcloud.com
* Copyright (c) 2009 SoundCloud Ltd.
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Usage:
* My new dub track
* The link will be automatically replaced by the HTML based player
*/
;(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 '.'
if (hms.h > 0) {
tc.push(hms.h);
}
tc.push((hms.m < 10 && hms.h > 0 ? "0" + hms.m : hms.m));
tc.push((hms.s < 10 ? "0" + hms.s : hms.s));
return tc.join('.');
};
var debug = true,
useSandBox = false,
log = function(args) {
if(debug && window.console && window.console.log){
window.console.log.apply(window.console, arguments);
}
},
domain = useSandBox ? 'sandbox-soundcloud.com' : 'soundcloud.com',
apiKey = 'htuiRd1JP11Ww0X72T1C3g',
scApiUrl = function(url) {
return (/api\./.test(url) ? url + '?' : 'http://api.' + domain +'/resolve?url=' + url + '&') + 'format=json&consumer_key=' + apiKey +'&callback=?';
};
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() {
$(document).trigger('scPlayer:onAudioReady');
},
onPlay: function() {
$(document).trigger('scPlayer:onMediaPlay');
},
onPause: function() {
$(document).trigger('scPlayer:onMediaPause');
},
onEnd: function() {
$(document).trigger('scPlayer:onMediaEnd');
},
onBuffer: function(percent) {
$(document).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);
// anounce 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);
};
$('
').appendTo(document.body).append(player);
// prepare the listeners
player.addEventListener('play', callbacks.onPlay, false);
player.addEventListener('pause', callbacks.onPause, false);
player.addEventListener('ended', callbacks.onEnd, false);
player.addEventListener('timeupdate', onTimeUpdate, false);
player.addEventListener('progress', onProgress, false);
return {
load: function(track) {
player.pause();
player.src = track.stream_url;
player.load();
player.play();
},
play: function() {
player.play();
},
pause: function() {
player.pause();
},
seek: function(relative){
player.currentTime = player.duration * relative;
player.play();
},
getDuration: function() {
return player.duration;
},
getPosition: function() {
return player.currentTime;
},
setVolume: function(val) {
if(a){
a.volume = val / 100;
}
}
};
};
var flashDriver = function() {
var engineId = 'scPlayerEngine',
player,
flashHtml = function(url) {
var swf = 'http://player.' + domain +'/player.swf?url=' + url +'&enable_api=true&player_type=engine&object_id=' + engineId;
if ($.browser.msie) {
return ''+
' ';
} else {
return ''+
' ';
}
};
// 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)
$('
').appendTo(document.body).html(flashHtml(url));
}
},
play: function() {
player && player.api_play();
},
pause: function() {
player && player.api_pause();
},
seek: function(relative){
player && player.api_seekTo((player.api_getTrackDuration() * relative));
},
getDuration: function() {
return player && player.api_getTrackDuration && player.api_getTrackDuration();
},
getPosition: function() {
return player && player.api_getTrackPosition && player.api_getTrackPosition();
},
setVolume: function(val) {
if(player && player.api_setVolume){
player.api_setVolume(val);
}
}
};
};
return html5AudioAvailable? html5Driver() : flashDriver();
}();
var autoPlay = false,
players = [],
updates = {},
currentUrl,
loadTracksData = function($player, links) {
var index = 0,
playerObj = {node: $player, tracks: []},
loadUrl = function(link) {
$.getJSON(scApiUrl(link.url), 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 the players queue
players.push(playerObj);
// load first tracks
loadUrl(links[index]);
},
artworkImage = function(track, usePlaceholder) {
if(usePlaceholder){
return 'Loading Artwork
';
}else if (track.artwork_url) {
return 'No Artwork
';
}
},
updateTrackInfo = function($player, track) {
// update the current track info in the player
// log('updateTrackInfo', track);
$('.sc-info', $player).each(function(index) {
$('h3', this).html('' + track.title + ' ');
$('h4', this).html('by ' + track.user.username + ' ');
$('p', this).html(track.description || 'no Description');
});
// 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');
}
});
// 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]
};
// 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('
').data('sc-player', {id: playerId}),
$artworks = $('
').appendTo($player),
$list = $('Play Pause ')
.end()
.append('Info ')
.append('
')
.find('.sc-scrubber')
.append('
')
.append('')
.append('
');
// load and parse the track data from SoundCloud API
loadTracksData($player, links);
// 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;
$.each(tracks, function(index, track) {
var active = index === 0;
// create an item in the playlist
$('' + track.title + ' ' + timecode(track.duration) + '