git.dj3c1t.com Git - mw_sourceml/blob - app/out/default/js/jaudio-player.1.1.js

   1 /*
   2   jaudioPlayer 1.1
   3   http://jaudio-player.dj3c1t.com/
   4
   5 */
   6 (function($){
   7
   8   // -----------------------------------------------------------------------
   9   //                                              fonction d'appel du plugin
  10
  11   $.fn.jaudioPlayer = function(param){
  12     if(jap_api[param]) return jap_api[param].apply(this, Array.prototype.slice.call(arguments, 1));
  13     if(typeof param === 'object' || !param) return jap.init.apply(this, arguments);
  14   };
  15
  16   // -----------------------------------------------------------------------
  17   //                                                               attributs
  18
  19   var settings        = {},
  20       audio_elts      = {},
  21       audio_elt_index = 0,
  22       waiting_track   = false,
  23       current_track   = false,
  24       seek_to_precent = 0;
  25
  26   // -----------------------------------------------------------------------
  27   //                                                     fonctions publiques
  28
  29   var jap_api = {
  30
  31     set_option: function(option_name, value){
  32       settings[option_name] = value;
  33     },
  34
  35     get_option: function(option_name){
  36       return settings[option_name];
  37     },
  38
  39     resize: function(){
  40       jap.resize_audio_players();
  41     },
  42
  43     clean_audio_elts: function(){
  44       for(var i in audio_elts){
  45         if($("#" + audio_elts[i].attr("id")).size() == 0){
  46           if(current_track == i){
  47             try{
  48               jap.stop();
  49             }
  50             catch(e){}
  51             current_track = false;
  52           }
  53           delete audio_elts[i];
  54         }
  55       }
  56     }
  57
  58   };
  59
  60   // -----------------------------------------------------------------------
  61   //                                                      fonctions internes
  62
  63   var jap = {
  64
  65     init: function(options){
  66       settings = $.extend(
  67         {
  68           "waveform_class": "",
  69           "player_graphics": "jaudio-player/jap-graphics.png",
  70           "loading_img": "jaudio-player/jap-loading.gif",
  71           "auto_play_next_track": false,
  72           "loop": false
  73         },
  74         options
  75       );
  76       return this.each(
  77         function(){
  78           var audio_elt = $(this);
  79           if(audio_elt.is("audio")){
  80             jap.init_player(audio_elt);
  81           }
  82         }
  83       );
  84     },
  85
  86     // ------------------- initialisation
  87
  88     init_player: function(audio_elt){
  89       audio_elt_index++;
  90       audio_elts[audio_elt_index] = audio_elt;
  91       var CAN_PLAY = false;
  92       audio_elt.find("source").each(
  93         function(){
  94           if(audio_elt.get(0).canPlayType($(this).attr("type"))) CAN_PLAY = true;
  95         }
  96       );
  97       if(CAN_PLAY){
  98         audio_elt.wrap('<div class="audio_wrapper" id="audio_wrapper_' + audio_elt_index + '" />');
  99         $("#audio_wrapper_" + audio_elt_index).append(
 100             "<div class=\"audio_player\" id=\"audio_player_" + audio_elt_index + "\">"
 101           + "  <img class=\"loading\" src=\"" + settings["loading_img"] + "\" />"
 102           + "  <div class=\"player_controls\">"
 103           + "    <a class=\"pause\" href=\"#\"><span>pause</span></a>"
 104           + "    <a class=\"play\" href=\"#\"><span>play</span></a>"
 105           + "    <a class=\"stop\" href=\"#\"><span>stop</span></a>"
 106           + "  </div>"
 107           + "  <div class=\"player_progress\">"
 108           + "    <div class=\"bg\"></div>"
 109           + "    <div class=\"loaded\"></div>"
 110           + "    <div class=\"position\"></div>"
 111           + "  </div>"
 112           + "  <div class=\"time\">"
 113           + "    <span class=\"position\">00:00</span>"
 114           + "    <span class=\"duration\">00:00</span>"
 115           + "  </div>"
 116           + "</div>"
 117         );
 118         if(settings["waveform_class"].length){
 119           if($("#audio_wrapper_" + audio_elt_index + " ." + settings["waveform_class"]).size()){
 120             $("#audio_wrapper_" + audio_elt_index).addClass("with_waveform");
 121             $("#audio_wrapper_" + audio_elt_index + " .player_progress div").html(
 122               "<img src=\"" + $("#audio_wrapper_" + audio_elt_index + " ." + settings["waveform_class"]).attr("src") + "\" />"
 123             );
 124           }
 125         }
 126         audio_elt.bind('loadedmetadata', function(e){ jap.track_loadedmetadata(e); })
 127         audio_elt.bind('progress', function(){ jap.track_progress(); })
 128         audio_elt.bind('canplaythrough', function(){ jap.track_canplaythrough(); })
 129         audio_elt.bind('timeupdate', function(){ jap.track_timeupdate(); })
 130         audio_elt.bind('waiting', function(){ jap.track_waiting(); })
 131         audio_elt.bind('playing', function(){ jap.track_playing(); })
 132         audio_elt.bind('ended', function(){ jap.track_ended(); })
 133         $("#audio_wrapper_" + audio_elt_index + " .player_controls a").css("background-image", "url(" + settings["player_graphics"] + ")");
 134         $("#audio_wrapper_" + audio_elt_index + " .player_controls .play").css("display: block");
 135         $("#audio_wrapper_" + audio_elt_index + " .player_controls .play").click(function() { jap.play($(this)); return false; });
 136         $("#audio_wrapper_" + audio_elt_index + " .player_controls .pause").click(function() { jap.pause(); return false; });
 137         $("#audio_wrapper_" + audio_elt_index + " .player_controls .stop").click(function() { jap.stop(); return false; });
 138         $("#audio_wrapper_" + audio_elt_index + " .player_progress").click(function(e) { jap.seek(e); });
 139         jap.resize_audio_players();
 140       }
 141     },
 142
 143     resize_audio_players: function(){
 144       $(".audio_player .player_progress").each(
 145         function(){
 146           var progress_width = $(this).width();
 147           $(this).find("img").css("width", progress_width);
 148         }
 149       );
 150     },
 151
 152     // ------------------- evenements
 153
 154     track_loadedmetadata: function(e){
 155       var current_audio = e.target;
 156       var minutes = "" + Math.floor(current_audio.duration / 60);
 157       var secondes = "" + Math.round(current_audio.duration - (minutes * 60));
 158       if(minutes.length == 1) minutes = "0" + minutes;
 159       if(secondes.length == 1) secondes = "0" + secondes;
 160       $(current_audio).parents(".audio_wrapper").find(".time .duration").html(minutes + ":" + secondes);
 161     },
 162
 163     track_progress: function(){
 164       if(current_track != false){
 165         var current_audio = audio_elts[current_track].get(0);
 166         if(current_audio.buffered.length){
 167           var buffered = current_audio.buffered.end(0);
 168           var loaded = parseInt(((buffered / current_audio.duration) * 100), 10);
 169         }
 170         $("#audio_player_" + current_track).find(".loaded").css("width", loaded + "%");
 171       }
 172     },
 173
 174     track_canplaythrough: function(){
 175       if(waiting_track != false){
 176         current_track = waiting_track;
 177         waiting_track = false;
 178         setTimeout(
 179           function(){
 180             var current_audio = audio_elts[current_track].get(0);
 181             current_audio.play();
 182             jap.gui_state("playing");
 183             if(seek_to_precent != 0){
 184               current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent;
 185               seek_to_precent = 0;
 186             }
 187           },
 188           500
 189         );
 190       }
 191     },
 192
 193     track_timeupdate: function(){
 194       if(current_track != false){
 195         var current_audio = audio_elts[current_track].get(0);
 196         var progress_bar = $("#audio_player_" + current_track).find(".position").get(0);
 197         if(current_audio && progress_bar){
 198           progress_bar.style.width = ((100 * current_audio.currentTime) / current_audio.duration) + "%";
 199           var minutes = "" + Math.floor(current_audio.currentTime / 60);
 200           var secondes = "" + Math.round(current_audio.currentTime - (minutes * 60));
 201           if(minutes.length == 1) minutes = "0" + minutes;
 202           if(secondes.length == 1) secondes = "0" + secondes;
 203           $("#audio_player_" + current_track + " .time .position").html(minutes + ":" + secondes);
 204           var minutes = "" + Math.floor(current_audio.duration / 60);
 205           var secondes = "" + Math.round(current_audio.duration - (minutes * 60));
 206           if(minutes.length == 1) minutes = "0" + minutes;
 207           if(secondes.length == 1) secondes = "0" + secondes;
 208           $("#audio_player_" + current_track + " .time .duration").html(minutes + ":" + secondes);
 209         }
 210       }
 211     },
 212
 213     track_waiting: function(){
 214       jap.gui_state("waiting");
 215     },
 216
 217     track_playing: function(){
 218       jap.gui_state("playing");
 219     },
 220
 221     track_ended: function(){
 222       if(current_track != false){
 223         var current_audio = audio_elts[current_track].get(0);
 224         jap.gui_state("stoped");
 225         if(settings["auto_play_next_track"] || settings["loop"]) jap.play_next_track();
 226       }
 227     },
 228
 229     play_next_track: function(){
 230       var next_track = false,
 231           first_track = false,
 232           CURRENT_FOUND = false;
 233       for(var track in audio_elts){
 234         if(!first_track) first_track = track;
 235         if(track == current_track) CURRENT_FOUND = true;
 236         else{
 237           if(CURRENT_FOUND){
 238             next_track = track;
 239             break;
 240           }
 241         }
 242       }
 243       if(!next_track && settings["loop"] && first_track) next_track = first_track;
 244       if(next_track){
 245         if(current_track != false) jap.stop();
 246         current_track = next_track;
 247         jap.gui_state("waiting");
 248         current_track = false;
 249         var current_audio = audio_elts[track].get(0);
 250         waiting_track = next_track;
 251         seek_to_precent = 0;
 252         jap.load_track(current_audio);
 253       }
 254     },
 255
 256     load_track: function(audio){
 257       audio.preload = "auto";
 258       if(audio.readyState == audio.HAVE_ENOUGH_DATA) jap.track_canplaythrough();
 259       else audio.load();
 260     },
 261
 262     // ------------------- boutons
 263
 264     play: function(play_elt){
 265       var track = play_elt.parents(".audio_wrapper").attr("id").substr(14);
 266       if(current_track == track){
 267         if(audio_elts[track].get(0).paused){
 268           audio_elts[track].get(0).play();
 269         }
 270       }
 271       else{
 272         if(current_track != false) jap.stop();
 273         current_track = track;
 274         jap.gui_state("waiting");
 275         current_track = false;
 276         var current_audio = audio_elts[track].get(0);
 277         waiting_track = track;
 278         seek_to_precent = 0;
 279         jap.load_track(current_audio);
 280       }
 281     },
 282
 283     seek: function(e){
 284       var $target = $(e.target);
 285       if(true || $target.is("img")){
 286         var audio_player_elt = $target.parents(".audio_player");
 287         var track = audio_player_elt.attr("id").substr(13);
 288         var progress_bar = audio_player_elt.find(".player_progress");
 289         var current_audio = audio_elts[track].get(0);
 290         seek_to_precent = ((e.pageX - progress_bar.offset().left) * 100) / progress_bar.width();
 291         if(track){
 292           if(current_track == false || current_track != track){
 293             if(current_track != false) jap.stop();
 294             current_track = track;
 295             jap.gui_state("waiting");
 296             current_track = false;
 297             waiting_track = track;
 298             jap.load_track(current_audio);
 299           }
 300           else{
 301             current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent;
 302           }
 303         }
 304       }
 305     },
 306
 307     pause: function(){
 308       if(current_track != false){
 309         audio_elts[current_track].get(0).pause();
 310         jap.gui_state("paused");
 311       }
 312     },
 313
 314     stop: function(){
 315       if(current_track != false){
 316         var current_audio = audio_elts[current_track].get(0);
 317         current_audio.pause();
 318         if(current_audio.currentTime) current_audio.currentTime = 0;
 319         jap.gui_state("stoped");
 320         current_track = false;
 321       }
 322     },
 323
 324     // ------------------- interface
 325
 326     gui_state: function(state){
 327       if(current_track != false){
 328         jap.gui_blur();
 329         if(state == "waiting"){
 330           $("#audio_player_" + current_track).find(".play").css("display", "none");
 331           $("#audio_player_" + current_track).find(".pause").css("display", "none");
 332           $("#audio_player_" + current_track).find(".stop").css("display", "none");
 333           $("#audio_player_" + current_track).find("img.loading").css("display", "block");
 334         }
 335         if(state == "playing"){
 336           $("#audio_player_" + current_track).find("img.loading").css("display", "none");
 337           $("#audio_player_" + current_track).find(".play").css("display", "none");
 338           $("#audio_player_" + current_track).find(".pause").css("display", "inline");
 339           $("#audio_player_" + current_track).find(".stop").css("display", "inline");
 340         }
 341         else if(state == "paused"){
 342           $("#audio_player_" + current_track).find("img.loading").css("display", "none");
 343           $("#audio_player_" + current_track).find(".play").css("display", "inline");
 344           $("#audio_player_" + current_track).find(".pause").css("display", "none");
 345           $("#audio_player_" + current_track).find(".stop").css("display", "inline");
 346         }
 347         else if(state == "stoped"){
 348           $("#audio_player_" + current_track).find("img.loading").css("display", "none");
 349           $("#audio_player_" + current_track).find(".play").css("display", "inline");
 350           $("#audio_player_" + current_track).find(".pause").css("display", "none");
 351           $("#audio_player_" + current_track).find(".stop").css("display", "none");
 352           $("#audio_player_" + current_track).find(".position").css("width", "0%");
 353           $("#audio_player_" + current_track).find(".time .position").html("00:00");
 354         }
 355       }
 356     },
 357
 358     gui_blur: function(){
 359       if(current_track != false){
 360         $("#audio_player_" + current_track).find(".play").get(0).blur();
 361         $("#audio_player_" + current_track).find(".pause").get(0).blur();
 362         $("#audio_player_" + current_track).find(".stop").get(0).blur();
 363       }
 364     }
 365
 366   };
 367
 368 })(jQuery);