3 http://jaudio-player.dj3c1t.com/
8 // -----------------------------------------------------------------------
9 // fonction d'appel du plugin
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);
16 // -----------------------------------------------------------------------
22 waiting_track = false,
23 current_track = false,
26 // -----------------------------------------------------------------------
27 // fonctions publiques
31 set_option: function(option_name, value){
32 settings[option_name] = value;
35 get_option: function(option_name){
36 return settings[option_name];
40 jap.resize_audio_players();
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){
51 current_track = false;
60 // -----------------------------------------------------------------------
65 init: function(options){
69 "player_graphics": "jaudio-player/jap-graphics.png",
70 "loading_img": "jaudio-player/jap-loading.gif",
71 "auto_play_next_track": false,
78 var audio_elt = $(this);
79 if(audio_elt.is("audio")){
80 jap.init_player(audio_elt);
86 // ------------------- initialisation
88 init_player: function(audio_elt){
90 audio_elts[audio_elt_index] = audio_elt;
92 audio_elt.find("source").each(
94 if(audio_elt.get(0).canPlayType($(this).attr("type"))) CAN_PLAY = true;
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>"
107 + " <div class=\"player_progress\">"
108 + " <div class=\"bg\"></div>"
109 + " <div class=\"loaded\"></div>"
110 + " <div class=\"position\"></div>"
112 + " <div class=\"time\">"
113 + " <span class=\"position\">00:00</span>"
114 + " <span class=\"duration\">00:00</span>"
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") + "\" />"
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();
143 resize_audio_players: function(){
144 $(".audio_player .player_progress").each(
146 var progress_width = $(this).width();
147 $(this).find("img").css("width", progress_width);
152 // ------------------- evenements
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);
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);
170 $("#audio_player_" + current_track).find(".loaded").css("width", loaded + "%");
174 track_canplaythrough: function(){
175 if(waiting_track != false){
176 current_track = waiting_track;
177 waiting_track = false;
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;
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);
213 track_waiting: function(){
214 jap.gui_state("waiting");
217 track_playing: function(){
218 jap.gui_state("playing");
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();
229 play_next_track: function(){
230 var next_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;
243 if(!next_track && settings["loop"] && first_track) next_track = first_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;
252 jap.load_track(current_audio);
256 load_track: function(audio){
257 audio.preload = "auto";
258 if(audio.readyState == audio.HAVE_ENOUGH_DATA) jap.track_canplaythrough();
262 // ------------------- boutons
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();
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;
279 jap.load_track(current_audio);
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();
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);
301 current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent;
308 if(current_track != false){
309 audio_elts[current_track].get(0).pause();
310 jap.gui_state("paused");
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;
324 // ------------------- interface
326 gui_state: function(state){
327 if(current_track != false){
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");
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");
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");
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");
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();