bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started player, optimized corpus map by avoiding some node fn if particule is resting

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-06 23:30:40 +01:00
parent 4c3c7c6577
commit f582589a40
7 changed files with 384 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+113 -5
View File
@@ -19,6 +19,110 @@
if (_$body.is('.path-productions')) {
initProductions();
}
initAudioPlayer();
};
// _ _ _
// /_\ _ _ __| (_)___
// / _ \ || / _` | / _ \
// /_/ \_\_,_\__,_|_\___/
//
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
// https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
// https://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){
var that = this;
this.fid;
this.audio = new Audio();
// audio events
this.audio_events = ["loadedmetadata","progress","canplay","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);
if (typeof AudioPlayer.initialized == "undefined") {
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();
}
};
// ___ _ _ ___
@@ -37,7 +141,6 @@
// / _ \ | / _` \ \ /
// /_/ \_\/ \__,_/_\_\
// |__/
// TODO: add url hash nav
// TODO: implement history.js
function initAjaxLinks(){
@@ -142,10 +245,15 @@
function onCorpusMapReady(e){
console.log('theme : onCorpusReady');
_$corpus_map = $('canvas#corpus-map');
_$corpus_map.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
backToFrontPage();
});
_$corpus_map
.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
backToFrontPage();
})
.on('corpus-cliked-on-node', function(e) {
console.log('theme : corpus-cliked-on-node', e);
_audio_player.loadSound(e.target_node.audio_url);
});
}
// ___ _ _ _