},
savePlaylist: function(){
var JSONPlaylist = JSON.stringify(this.playlist, null, '\t');
- localStorage['playlist'] = JSON.stringify(this.playlist, null, '\t');
+ if (localStorage !== null && localStorage !== undefined) {
+ localStorage['playlist'] = JSON.stringify(this.playlist, null, '\t');
+ }
},
loadPlaylist: function(){
- this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
+ if (localStorage !== null && localStorage !== undefined) {
+ this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
+ }
$.each(this.playlist,function(k,v){
thePlaylist.playlistContainer.append(thePlaylist._htmlifyJsonSound(v));
});
var sound = {
source :{},
title: audio.attr('title'),
- id:audio.attr('id'),
+ sound_id:audio.data('sound-id'),
url:audio.attr('data-url'),
focus:audio.attr('data-player-focus')
};
},
// Transform JSON sound object to HTML container for playlist.
_htmlifyJsonSound: function(sound) {
- var container = $('<li>').attr('data-origin',sound.id);
+ var container = $('<li>');
var audio = $('<audio>',this.options.html5audioOptions)
.attr('title',sound.title).hide()
+ .attr('data-sound-id', sound.sound_id)
.attr('data-url',sound.url);
+ var audio_str = sound.sound_id + ': ' + sound.title;
$.each(sound.source,function(k,v){
var source = $('<source>',{src:v,type:k});
audio.append(source);
});
- audio.on('play',function(){
+ audio.on('play',function(e){
+ if (e.originalEvent === undefined) {
+ return;
+ }
+ if (typeof (_paq) == 'object') {
+ _paq.push(['trackEvent', 'Audio', 'Play', audio_str]);
+ }
thePlaylist.setFocus(container);
container.addClass('playing');
playpause.addClass('icon-pause').removeClass('icon-play');
thePlaylist.controlButtons['playpause'].removeClass('icon-play').addClass('icon-pause');
thePlaylist.afterPlay();
- }).on('pause',function(){
+ var sound_id = $(e.target).data('sound-id');
+ $(document).trigger('panik:play', {'sound_id': sound_id});
+ }).on('pause',function(e){
$(this).removeClass('playing');
playpause.addClass('icon-play').removeClass('icon-pause');
+ var sound_id = $(e.target).data('sound-id');
+ $(document).trigger('panik:pause', {'sound_id': sound_id});
thePlaylist.controlButtons['playpause'].removeClass('icon-pause').addClass('icon-play');
- }).on('stop',function(){
+ }).on('stop',function(event){
$(this).trigger('pause');
if($(this)[0].currentTime){$(this)[0].currentTime = 0;}
- }).on("ended", function(){
+ }).on("ended", function(e){
+ if (typeof (_paq) == 'object') {
+ _paq.push(['trackEvent', 'Audio', 'End', audio_str]);
+ }
thePlaylist.playNext();
}).on('beforePause',function(){
return this;
}).on('beforePlay',function(){
thePlaylist.pauseSounds();
return this;
+ }).on('timeupdate', function(event) {
+ var position = 1.0 * event.target.currentTime / event.target.duration;
+ var sound_id = $(event.target).data('sound-id');
+ $(document).trigger('panik:timeupdate',
+ {'sound_id': sound_id, 'position': position});
});
- var controls = $('<span>',{class:'soundControls controls'});
- var link = $('<a>',{href:sound.url,class:'button icon-external-link'});
- var html5 = $('<button>',{title:"Display HTML5 audio",class:'icon-html5',click:function(){
- audio.toggle();
- }}).hide();
- var remove = $('<button>',{title:"Remove from list",class:'icon-remove',click:function(){
+ var controls = $('<span>',{'class':'soundControls controls'});
+ var link = $('<a>',{href:sound.url,'class':'button icon-external-link'});
+ var remove = $('<button>',{title:"Remove from list",'class':'icon-remove',click:function(){
container.remove();
thePlaylist._update();
}});
- var stop = $('<button>',{title:"Stop",class:'icon-stop',click:function(){
+ var stop = $('<button>',{title:"Stop",'class':'icon-stop',click:function(){
audio.trigger('stop');
}}).hide();
- var playpause = $('<button>',{title:"Play/Pause",class:'icon-play',click:function(){
+ var playpause = $('<button>',{title:"Play/Pause",'class':'icon-play',click:function(){
if (audio[0].paused == false) { audio.trigger('pause');
} else {
audio.trigger('beforePlay').trigger('play');
}
}});
- controls.append(playpause).append(stop).append(remove).append(html5);
- var title = $('<a>',{title:"More information",href:sound.url,class:"button title",html:sound.title});
+ controls.append(playpause).append(stop).append(remove);
+ var title = $('<a>',{title:"More information",href:sound.url,'class':"button title",html:sound.title});
container.append(controls).append(title).append(audio);
if(sound.focus){thePlaylist.setFocus(container);}
return container;
},
// Create a public method.
registerAudio: function(audio,success) {
+ var sound_id = audio.data('sound-id');
+ if (this.playlistContainer.find('[data-sound-id=' + sound_id + ']').length) {
+ /* already in playlist */
+ return;
+ }
var audioObj = this.jsonifyAudio(audio);
var htmlAudio = this._htmlifyJsonSound(audioObj);
this.playlistContainer.append(htmlAudio);
// Play next sound
bindControl: function(control,audio,element,options) {
element.addClass('loading');
- audioID = audio.attr('id');
+ audioID = audio.data('souce-id');
//TODO for controls in page content
},
// Play next sound
thePlaylist._update();
}});
*/
- this.registerControl('previous',{class:"icon-step-backward",click:function(){
+ this.registerControl('previous',{'class':"icon-step-backward",click:function(){
thePlaylist.playPrevious();
}});
- this.registerControl('stop',{class:"icon-stop",click: function(){
+ this.registerControl('stop',{'class':"icon-stop",click: function(){
thePlaylist.stopSounds();
}});
- this.registerControl('playpause',{class:"icon-play playPause",click: function(){
+ this.registerControl('playpause',{'class':"icon-play playPause",click: function(){
thePlaylist.playPauseList();
}});
- this.registerControl('next',{class:"icon-step-forward",click: function(){
+ this.registerControl('next',{'class':"icon-step-forward",click: function(){
thePlaylist.playNext();
}});
return true;
}
return this.isActive;
},
+ playSoundId: function(sound_id) {
+ this.playlistContainer.find('audio[data-sound-id="' + sound_id + '"]'
+ ).trigger('beforePlay').trigger('play');
+ },
// Play next sound
playPauseList: function() {
if(this.controlButtons['playpause'].hasClass('icon-play')){
projects / panikweb.git / blobdiff