the audio player is playing and displaying well
This commit is contained in:
Bachir Soussi Chiadmi
@@ -40,91 +40,127 @@
|
||||
this.fid;
|
||||
this.audio = new Audio();
|
||||
// audio events
|
||||
this.audio_events = ["loadedmetadata","progress","canplay","timeupdate","ended"];
|
||||
this.audio_events = ["loadedmetadata","canplay","playing","pause","timeupdate","ended"];
|
||||
|
||||
// UI dom objects
|
||||
this.$container = $('<div id="audio-player">')
|
||||
.appendTo('header[role="banner"] .region-header');
|
||||
this.$timeline = $('<div>').addClass('time-line').appendTo(this.$container);
|
||||
this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
|
||||
this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
|
||||
this.$duration = $('<div>').addClass('duration').appendTo(this.$container);
|
||||
this.$currentTime = $('<div>').addClass('current-time').appendTo(this.$container);
|
||||
this.$container = $('<div id="audio-player">');
|
||||
// btns
|
||||
this.$btns = $('<div>').addClass('btns').appendTo(this.$container);
|
||||
this.$previous = $('<div>').addClass('previous').appendTo(this.$btns);
|
||||
this.$playpause = $('<div>').addClass('play-pause').appendTo(this.$btns);
|
||||
this.$next = $('<div>').addClass('next').appendTo(this.$btns);
|
||||
// timeline
|
||||
this.$timelinecont= $('<div>').addClass('time-line-container').appendTo(this.$container);
|
||||
this.$timeline = $('<div>').addClass('time-line').appendTo(this.$timelinecont);
|
||||
this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
|
||||
this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
|
||||
// time
|
||||
this.$time = $('<div>').addClass('time').appendTo(this.$container);
|
||||
this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
|
||||
this.$duration = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
|
||||
|
||||
if (typeof AudioPlayer.initialized == "undefined") {
|
||||
// hiding
|
||||
this.hideTimer = false;
|
||||
this.hideTimeMS = 10000;
|
||||
|
||||
AudioPlayer.prototype.init = function(){
|
||||
// init audio events
|
||||
var fn = '';
|
||||
for (var i = 0; i < this.audio_events.length; i++) {
|
||||
fn = this.audio_events[i];
|
||||
// capitalize first letter of event (only cosmetic :p )
|
||||
fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
|
||||
this.audio.addEventListener(
|
||||
this.audio_events[i],
|
||||
this[fn].bind(this),
|
||||
true);
|
||||
}
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.loadSound = function(url){
|
||||
console.log('AudioPlayer loadSound : url', url);
|
||||
this.audio.src = url;
|
||||
// this.play();
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.play = function(){
|
||||
console.log('AudioPlayer play()');
|
||||
this.audio.play();
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.onLoadedmetadata = function(){
|
||||
var rem = parseInt(this.audio.duration, 10),
|
||||
mins = Math.floor(rem/60,10),
|
||||
secs = rem - mins*60;
|
||||
this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.onProgress = function(){
|
||||
// var myBuffered = this.audio.buffered;
|
||||
// var mySeekable = this.audio.seekable;
|
||||
if( this.audio.buffered.length ){
|
||||
// var fromPercent = this.fromPercent;
|
||||
// var value = percentLoad - fromPercent;
|
||||
// if( value<0 ) value = 0;
|
||||
// this.$loadingBar.css({width: value + '%',marginLeft:fromPercent + '%'});
|
||||
this.$loader.css({
|
||||
'width':parseInt(((this.audio.buffered.end(0) / this.audio.duration) * 100), 10)+'%'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.onCanplay = function(){
|
||||
this.play();
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.onTimeupdate = function(){
|
||||
// console.log('Audio update()', this.audio.currentTime);
|
||||
|
||||
this.$cursor.css({
|
||||
'left':(this.audio.currentTime/this.audio.duration * 50)+"px"
|
||||
});
|
||||
|
||||
var rem = parseInt(this.audio.currentTime, 10),
|
||||
mins = Math.floor(rem/60,10),
|
||||
secs = rem - mins*60;
|
||||
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
|
||||
};
|
||||
|
||||
AudioPlayer.prototype.onEnded = function(){
|
||||
console.log('AudioPlayer onEnded');
|
||||
};
|
||||
|
||||
AudioPlayer.initialized = true;
|
||||
this.init();
|
||||
}
|
||||
this.init();
|
||||
};
|
||||
|
||||
AudioPlayer.prototype = {
|
||||
init(){
|
||||
// append ui to document
|
||||
this.$container.appendTo('header[role="banner"] .region-header');
|
||||
// record timeline width
|
||||
this.timeline_w = parseInt(this.$timeline.width());
|
||||
// init audio events
|
||||
var fn = '';
|
||||
for (var i = 0; i < this.audio_events.length; i++) {
|
||||
fn = this.audio_events[i];
|
||||
// capitalize first letter of event (only cosmetic :p )
|
||||
fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
|
||||
this.audio.addEventListener(
|
||||
this.audio_events[i],
|
||||
this[fn].bind(this),
|
||||
true);
|
||||
}
|
||||
// init btns events
|
||||
this.$playpause.on('click', this.togglePlayPause.bind(this));
|
||||
// TODO: previous and next btns
|
||||
},
|
||||
setSRC(url){
|
||||
console.log('AudioPlayer setSRC : url', url);
|
||||
this.clearTimeOutToHide();
|
||||
this.audio.src = url;
|
||||
this.show();
|
||||
},
|
||||
onLoadedmetadata(){
|
||||
var rem = parseInt(this.audio.duration, 10),
|
||||
mins = Math.floor(rem/60,10),
|
||||
secs = rem - mins*60;
|
||||
this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
|
||||
this.updateLoadingBar();
|
||||
},
|
||||
updateLoadingBar(){
|
||||
this.$loader.css({
|
||||
'width':parseInt((100 * this.audio.buffered.end(0) / this.audio.duration), 10)+'%'
|
||||
});
|
||||
if( this.audio.buffered.end(0) < this.audio.duration ){
|
||||
// loop through this function until file is fully loaded
|
||||
var that = this;
|
||||
window.requestAnimationFrame(that.updateLoadingBar.bind(that));
|
||||
}else{
|
||||
console.log('Audio fully loaded');
|
||||
}
|
||||
},
|
||||
onCanplay(){
|
||||
this.play();
|
||||
},
|
||||
play(){
|
||||
this.audio.play();
|
||||
},
|
||||
togglePlayPause(){
|
||||
if(this.audio.paused){
|
||||
this.audio.play();
|
||||
}else{
|
||||
this.audio.pause();
|
||||
}
|
||||
},
|
||||
onPlaying(){
|
||||
this.$container.addClass('is-playing');
|
||||
},
|
||||
onPause(){
|
||||
this.$container.removeClass('is-playing');
|
||||
},
|
||||
onTimeupdate(){
|
||||
// move cursor
|
||||
this.$cursor.css({
|
||||
'left':(this.audio.currentTime/this.audio.duration * this.timeline_w)+"px"
|
||||
});
|
||||
// update time text display
|
||||
var rem = parseInt(this.audio.currentTime, 10),
|
||||
mins = Math.floor(rem/60,10),
|
||||
secs = rem - mins*60;
|
||||
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
|
||||
},
|
||||
onEnded(){
|
||||
this.$container.removeClass('is-playing');
|
||||
this.timeOutToHide();
|
||||
},
|
||||
show(){
|
||||
this.$container.addClass('visible');
|
||||
},
|
||||
timeOutToHide(){
|
||||
this.clearTimeOutToHide();
|
||||
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
|
||||
},
|
||||
clearTimeOutToHide(){
|
||||
if(this.hideTimer){
|
||||
clearTimeout(this.hideTimer);
|
||||
}
|
||||
},
|
||||
hide(){
|
||||
this.$container.removeClass('visible');
|
||||
}
|
||||
}
|
||||
// ___ _ _ ___
|
||||
// / __| __ _ _ ___| | | _ ) __ _ _ _ ___
|
||||
// \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
|
||||
@@ -252,7 +288,7 @@
|
||||
})
|
||||
.on('corpus-cliked-on-node', function(e) {
|
||||
console.log('theme : corpus-cliked-on-node', e);
|
||||
_audio_player.loadSound(e.target_node.audio_url);
|
||||
_audio_player.setSRC(e.target_node.audio_url);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user