Skip to content

Instantly share code, notes, and snippets.

@khoin
Created January 3, 2015 15:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khoin/151191f11960d83d422f to your computer and use it in GitHub Desktop.
Save khoin/151191f11960d83d422f to your computer and use it in GitHub Desktop.
Here's a working HTML5 player.
/**
var data = [
{
src : "http://path/to/audio/play.mp3",
meta : {
artist: "Inexistence",
title: "UndeFINEd",
bpm: 120.0
}
},
{
src : "http://lol.com/mp.mp3"
}
];
**/
var Player = function() {
var _ = this;
this.playlist = [];
this.onPlayback = function() {};
this.onPlay;
this.onPause;
this.onBuffer;
var player = new Audio(),
looper = [],
isRepeat = false,
isShuffle = false,
currentTrack = 0,
lastTime,
length;
var on = function(eve,arg) {
switch(eve) {
case 'playback': _.onPlayback = arg;
break;
case 'buffer': _.onBuffer = arg;
break;
case 'finish': _.onFinish = arg;
break;
case 'play': _.onPlay = arg;
break;
case 'pause': _.onPause = arg;
break;
}
return this;
}
var applyPlaylist = function(array) {
_.playlist = array;
_.length = array.length;
_.currentTrack = 0;
player.src = _.playlist[_.currentTrack].src;
player.load();
return this;
}
var appendPlaylist = function(obj) {
if( obj.src === undefined ) return;
_.playlist.push({
src : obj.src,
meta: obj.meta
});
return this;
}
var getPlaylist = function() {
return _.playlist;
}
var getCurrentTrack = function() {
return _.playlist[currentTrack];
}
var getCurrentDuration = function() {
return player.duration;
}
var toggleRepeat = function(re) {
if(!re) isRepeat = !isRepeat;
return isRepeat;
}
var toggleShuffle = function(re) {
if(!re) isShuffle = !isShuffle;
return isShuffle;
}
var play = function() {
player.play();
if ( _.onPlay ) _.onPlay(currentTrack, _.playlist[currentTrack]);
looper.push( setInterval(loop, 50) );
return this;
}
var pause = function() {
looper.forEach ( function(each) {
clearInterval(each);
});
player.pause();
if ( _.onPause ) _.onPause(currentTrack, _.playlist[currentTrack]);
return this;
}
var togglePlayback = function() {
if (player.paused) {
play();
} else {
pause();
}
return player.paused;
}
var isBuffering = function() {
if( _.lastTime == player.currentTime && !player.paused) {
return true
} else {
return false;
}
}
var loop = function() {
_.lastTime = player.currentTime;
var currentTime = player.currentTime;
var formattedCurrentTime ;
formattedCurrentTime = Math.floor(player.currentTime / 60) ;
formattedCurrentTime += ":";
formattedCurrentTime += Math.round(player.currentTime) % 60 < 10 ?
("0"+ Math.round(player.currentTime)% 60) :
Math.round(player.currentTime)% 60 ;
var formattedDuration;
formattedDuration = player.duration / 60 < 10 ?
("0"+ Math.floor(player.duration / 60)) :
Math.floor(player.duration / 60) ;
formattedDuration += ":";
formattedDuration += Math.round(player.duration) % 60 < 10 ?
("0"+ Math.round(player.duration)% 60) :
Math.round(player.duration)% 60 ;
var percentage = player.currentTime / player.duration;
//onPlayback passes percentage listened, formatted currentTime/duration and meta of currentTrack
if( _.onBuffer ) _.onBuffer(isBuffering());
if( _.onPlayback ) _.onPlayback(percentage, formattedCurrentTime, (player.duration)? formattedDuration : "0:00", _.playlist[currentTrack].meta);
if(player.currentTime === player.duration) nextTrack();
}
var nextTrack = function() {
if( currentTrack === _.playlist.length-1 && !isShuffle) {
pause();
if(_.onFinish) _.onFinish();
} else {
pause();
if (!isRepeat) currentTrack += 1;
if (isShuffle && !isRepeat) currentTrack = Math.round(Math.random()*_.playlist.length-1);
if (!isRepeat) {
player.src = _.playlist[currentTrack].src;
player.load();
} else {
player.currentTime = 0;
}
play();
}
}
var playIndex = function(ind) {
if( parseInt(ind) > _.playlist.length-1 || parseInt(ind) < 0 ) return;
pause();
currentTrack = parseInt(ind);
if (isShuffle) currentTrack = Math.round(Math.random()*_.playlist.length-1);
player.src = _.playlist[currentTrack].src;
player.load();
play();
return this;
}
var playAt = function(curTi) {
player.currentTime = curTi;
return this;
}
return {
applyPlaylist : applyPlaylist,
appendPlaylist: appendPlaylist,
getPlaylist: getPlaylist,
getCurrentTrack: getCurrentTrack,
getCurrentDuration: getCurrentDuration,
on: on,
toggleRepeat: toggleRepeat,
toggleShuffle: toggleShuffle,
togglePlayback: togglePlayback,
play: play,
pause: pause,
playIndex: playIndex,
playAt : playAt,
isBuffering: isBuffering
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment