panikweb_templates/static/js/audioPlayer.js

   1 (function($) {
   2         var thePlaylist;
   3         $.widget( "panik.playlist", {
   4                 /*
   5                         sound = {
   6                                 source :{
   7                                         ogg:"oggURL",
   8                                         mp3:"mp3URL"
   9                                 },
  10                                 emission: "episode.slug",
  11                                 episode: "episode.slug",
  12                                 id:""
  13                         }
  14                 */
  15                 options: {
  16                         playlist: [],
  17                         html5audioOptions:{controls:true,preload:true},
  18                         classes: "",
  19                         itemClasses: "",
  20                         playlistContainer: $('<ol>'),
  21                         onAdd: function(){},
  22                         onPlay: function(){},
  23                 },
  24                 _create: function() {
  25                 // Initialization logic here
  26                         thePlaylist = this;
  27                         this.debugContainer = $('<pre>').hide();
  28                         this.controlContainer = $('<div>');
  29                         this.playlistContainer = this.options.playlistContainer;
  30                         this.element.addClass(this.options.classes);
  31                         this.element.append(this.controlContainer);
  32                         this.element.append(this.playlistContainer);
  33                         this.element.append(this.debugContainer);
  34                         this.playlist = this.options.playlist;
  35                         this.buildPlaylistControls();
  36                         this.loadPlaylist();
  37                         this._update();
  38                 },
  39
  40                 _setOption: function( key, value ) {
  41                         this.options[ key ] = value;
  42                         this._update();
  43                 },
  44                 _update: function() {
  45                         this.playlist = [];
  46                         this.playlistContainer.find('audio').each(function(){
  47                                 thePlaylist.playlist.push(thePlaylist.jsonifyAudio($(this)));
  48                         });
  49                         if(this.playlist.length >= 1){
  50                                 this.playlistContainer.show();
  51                                 this.controls.show();
  52                         }else{
  53                                 this.playlistContainer.hide();
  54                                 this.controls.hide();
  55                         }
  56                         this.savePlaylist();
  57                         this.debugContainer.text(
  58                                 JSON.stringify(this.playlist, null, '\t')
  59                         );
  60                         return this.playlist;
  61                 },
  62                 savePlaylist: function(){
  63                         localStorage['playlist'] = JSON.stringify(this.playlist, null, '\t');
  64                 },
  65                 loadPlaylist: function(){
  66                         this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
  67                         $.each(this.playlist,function(k,v){
  68                                 thePlaylist.playlistContainer.append(thePlaylist._htmlifyJsonSound(v));
  69                         });
  70                         return this.playlist;
  71                 },
  72                 // Transform HTML5 <audio> to simple JSON object.
  73                 jsonifyAudio: function(audio) {
  74                         var sound = {
  75                                 source :{},
  76                                 title: audio.attr('title'),
  77                                 id:audio.attr('id')
  78                         };
  79                         audio.children('source').each(function(){
  80                                 sound.source[$(this).attr('type')] = $(this).attr('src');
  81                         });
  82                         return sound;
  83                 },
  84                 // Transform JSON sound object to HTML container for playlist.
  85                 _htmlifyJsonSound: function(sound) {
  86                         var container = $('<li>');
  87                         var audio = $('<audio>',this.options.html5audioOptions).hide();
  88                         $.each(sound.source,function(k,v){
  89                                 var source = $('<source>',{src:v,type:k});
  90                                 audio.append(source);
  91                         });
  92                         audio.attr('title',sound.title)
  93                         .attr('data-origin',sound.id)
  94                         .on('play',function(){
  95                                 container.addClass('playing');
  96                                 container.addClass('active');
  97                                 playpause.addClass('icon-pause').removeClass('icon-play');
  98                                 thePlaylist.playpause.removeClass('icon-play').addClass('icon-pause');
  99                                 thePlaylist.afterPlay();
 100                         }).on('pause',function(){
 101                                 $(this).removeClass('playing');
 102                                 playpause.addClass('icon-play').removeClass('icon-pause');
 103                                 thePlaylist.playpause.removeClass('icon-pause').addClass('icon-play');
 104                         }).on('stop',function(){
 105                                 container.removeClass('active');
 106                                 $(this).trigger('pause');
 107                                 $(this)[0].currentTime = 0;
 108                                 container.removeClass('active');
 109                         }).on("ended", function(){
 110                                 thePlaylist.playNext();
 111                         }).on('beforePause',function(){
 112                                 return this;
 113                         }).on('beforePlay',function(){
 114                                 thePlaylist.playlistContainer.find('.active').removeClass('active');
 115                                 thePlaylist.pauseSounds();
 116                                 return this;
 117                         });
 118                         var controls = $('<span>',{class:'soundControls controls'});
 119                         var html5 = $('<button>',{class:'icon-html5',click:function(){
 120                                 audio.toggle();
 121                         }});
 122                         var remove = $('<button>',{class:'icon-remove',click:function(){
 123                                 container.remove();
 124                                 thePlaylist._update();
 125                         }});
 126                         var stop = $('<button>',{class:'icon-stop',click:function(){
 127                                 audio.trigger('stop');
 128                         }});
 129                         var playpause = $('<button>',{class:'icon-play',click:function(){
 130
 131                                   if (audio[0].paused == false) { audio.trigger('pause');
 132                                   } else {
 133                                         audio.trigger('beforePlay').trigger('play');
 134                                 }
 135                         }});
 136                         controls.append(playpause).append(stop).append(remove).append(html5);
 137                         var title = $('<span>',{class:"button title",html:sound.title,click:function(){
 138                                 playpause.trigger('click');
 139                                 return false;
 140                         }});
 141                         container.append(controls).append(title).append(audio);
 142                         return container;
 143                 },
 144                 // Create a public method.
 145                 registerAudio: function(audio,success) {
 146                         var htmlAudio = this._htmlifyJsonSound(this.jsonifyAudio(audio));
 147                         this.playlistContainer.append(htmlAudio);
 148                         this.options.onAdd();
 149                         if(success){success();}
 150                         this._update();
 151                 },
 152                 // Build controls
 153                 buildPlaylistControls: function() {
 154                         this.controls = $('<div>',{class:'playlistControls controls'});
 155                         this.toggleList = $('<button>',{class:"icon-list",click:function(){
 156                                 thePlaylist.playlistContainer.toggle();
 157                         }});
 158                         this.playpause = $('<button>',{class:"icon-play",click:function(){
 159                                 thePlaylist.playPauseList();
 160                         }});
 161                         this.stop = $('<button>',{class:"icon-stop",click:function(){
 162                                 thePlaylist.stopSounds();
 163                         }});
 164                         this.next = $('<button>',{class:"icon-step-forward",click:function(){
 165                                 thePlaylist.playNext();
 166                         }});
 167                         this.previous = $('<button>',{class:"icon-step-backward",click:function(){
 168                                 thePlaylist.playPrevious();
 169                         }});
 170                         this.controls.append(this.toggleList).append(this.previous).append(this.stop).append(this.playpause).append(this.next);
 171                         this.controlContainer.append(this.controls);
 172                         return true;
 173                 },
 174                 // Play next sound
 175                 afterPlay: function() {
 176                         this.options.onPlay();
 177                 },
 178                 // Play next sound
 179                 beforePlay: function() {
 180                         this.stopSounds();
 181                 },
 182                 // Play next sound
 183                 playPauseList: function() {
 184                         if(this.playpause.hasClass('icon-play')){
 185                                 if(this.playlistContainer.find('.active')[0]){
 186                                         this.playlistContainer.find('.active').find('audio').trigger('beforePlay').trigger('play');
 187                                 }else{
 188                                         this.playlistContainer.children('li').first().find('audio').trigger('beforePlay').trigger('play');
 189                                 }
 190                         }else{
 191                                 this.playlistContainer.find('.active').find('audio').trigger('pause');
 192                         }
 193                         return true;
 194                 },
 195                 // Play next sound
 196                 playPrevious: function() {
 197                         this.playlistContainer.find('.active').prev().find('audio').trigger('beforePlay').trigger('play');
 198                         return true;
 199                 },
 200                 // Play next sound
 201                 playNext: function() {
 202                         this.playlistContainer.find('.active').next().find('audio').trigger('beforePlay').trigger('play');
 203                         return true;
 204                 },
 205                 // Pause all sounds.
 206                 pauseSounds: function(selector) {
 207                         this.playlistContainer.find('audio').each(function(){$(this).trigger('pause');});
 208                 },
 209                 // stop all sounds.
 210                 stopSounds: function(rewind) {
 211                         this.playlistContainer.find('audio').each(function(){
 212                                 $(this).trigger('stop');
 213                         });
 214                         return true;
 215                 },
 216         });
 217 })(jQuery);
 218