panikweb_templates/static/js/audioPlayer.js

   1 (function($) {
   2         var self;
   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:{class:"hidden", controls:false,preload:true},
  18                         classes: "small",
  19                         itemClasses: "",
  20                         playlistContainer: $('<ol>'),
  21                 },
  22                 _create: function() {
  23                 // Initialization logic here
  24                         self = this;
  25                         this.debugContainer = $('<pre>').hide();
  26                         this.playlistContainer = this.options.playlistContainer;
  27                         this.element.addClass(this.options.classes);
  28                         this.element.append(this.playlistContainer);
  29                         this.element.append(this.debugContainer);
  30                         this.playlist = this.loadPlaylist();
  31                         this._update();
  32                 },
  33
  34                 _setOption: function( key, value ) {
  35                         this.options[ key ] = value;
  36                         this._update();
  37                 },
  38                 _update: function() {
  39                         this.playlist = [];
  40                         this.playlistContainer.find('audio').each(function(){
  41
  42                                 self.playlist.push(self.jsonifyAudio($(this)));
  43                         });
  44                         this.savePlaylist();
  45                         this.debugContainer.text(
  46                                 JSON.stringify(this.playlist, null, '\t')
  47                         );
  48                         return this.playlist;
  49                 },
  50                 savePlaylist: function(){
  51                         localStorage['playlist'] = JSON.stringify(this.playlist, null, '\t');
  52                 },
  53                 loadPlaylist: function(){
  54                         this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
  55                         $.each(this.playlist,function(k,v){
  56                                 self.playlistContainer.append(self._htmlifyJsonSound(v));
  57                         });
  58                         return this.playlist;
  59                 },
  60                 // Transform HTML5 <audio> to simple JSON object.
  61                 jsonifyAudio: function(audio) {
  62                         var sound = {
  63                                 source :{},
  64                                 title: audio.attr('title'),
  65                                 id:audio.attr('id')
  66                         };
  67                         audio.children('source').each(function(){
  68                                 sound.source[$(this).attr('type')] = $(this).attr('src');
  69                         });
  70                         return sound;
  71                 },
  72                 // Transform JSON sound object to HTML container for playlist.
  73                 _htmlifyJsonSound: function(sound) {
  74                         var container = $('<div>',this.options.itemClasses);
  75                         var audio = $('<audio>',this.options.html5audioOptions);
  76                         $.each(sound.source,function(k,v){
  77                                 var source = $('<source>',{src:v,type:k});
  78                                 audio.append(source);
  79                         });
  80                         audio.attr('title',sound.title);
  81                         audio.attr('data-origin',sound.id);
  82                         var title = $('<button>',{html:sound.title,click:function(){
  83                                   if (audio[0].paused == false) {
  84                                       audio[0].pause();
  85                                         $(this).removeClass('active');
  86                                   } else {
  87                                         self.playlistContainer.find('.active').removeClass('active');
  88                                         $(this).addClass('active');
  89                                         self.pauseSounds();
  90                                       audio[0].play();
  91                                   }
  92                         }});
  93                         var remover = $('<button>',{class:'icon-remove',click:function(){
  94                                 container.remove();
  95                                 self._update();
  96                         }});
  97                         container.append(remover).append(title).append(audio);
  98                         return container;
  99                 },
 100                 // Create a public method.
 101                 registerAudio: function(audio) {
 102                         var htmlAudio = this._htmlifyJsonSound(this.jsonifyAudio(audio));
 103                         this.playlistContainer.append(htmlAudio);
 104                         this._update();
 105                 },
 106                 registerSound: function(sound) {
 107                         this.playlist.push(sound);
 108                         this._update();
 109                 },
 110                 removeSound: function(k) {
 111                         this.playlist.splice(k, 1);
 112                         this._update();
 113                 },
 114                 pauseSounds: function() {
 115                         this.playlistContainer.find('audio').each(function(){$(this)[0].pause();});
 116                 },
 117                 _buildhtmlSound: function(sound,k) {
 118                         var container = $('<div>');
 119                         var audio = $('<audio>',this.options.html5audioOptions);
 120                         $.each(sound.source,function(k,v){
 121                                 var source = $('<source>',{src:v,type:k});
 122                                 audio.append(source);
 123
 124                         });
 125                         var title = $('<button>',{html:sound.title,click:function(){
 126                                   if (audio[0].paused == false) {
 127                                       audio[0].pause();
 128                                         $(this).removeClass('active');
 129                                   } else {
 130                                         self.playlistContainer.find('.active').removeClass('active');
 131                                         $(this).addClass('active');
 132                                         self.pauseSounds();
 133                                       audio[0].play();
 134                                   }
 135                         }});
 136                         var remover = $('<button>',{class:'icon-remove',click:function(){
 137                                 self.removeSound(k);
 138                         }});
 139                         return container.append(remover).append(title).append(audio);
 140                 },
 141                 _buildhtmlPlaylist: function( argument ) {
 142                         var self = this;
 143                         self.playlistContainer.empty();
 144                         $.each(this.playlist,function(k,v){
 145                                 var soundHtml = self._buildhtmlSound(v,k);
 146                                 var listItem = $('<li>',{html:soundHtml});
 147                                 self.playlistContainer.append(listItem);
 148                         });
 149                 },
 150         });
 151 })(jQuery);
 152