From: dj3c1t <dj3c1t@free.fr>
Date: Fri, 9 May 2014 21:15:36 +0000 (+0200)
Subject: integration jaudio-player
X-Git-Tag: sourceml.1.2.0~5
X-Git-Url: http://git.dj3c1t.com/?p=mw_sourceml;a=commitdiff_plain;h=8fd286a6a89f98742e6d8916622778df974a5bfd

integration jaudio-player
---

diff --git a/app/observers/mw_observer_sourceml.php b/app/observers/mw_observer_sourceml.php
index f8d8fe3..38c3622 100644
--- a/app/observers/mw_observer_sourceml.php
+++ b/app/observers/mw_observer_sourceml.php
@@ -40,6 +40,9 @@
         $env->add_js_file($env->out_url("js/jquery-ui-1.8.12.custom.min.js"));
         $env->add_css_file($env->out_url("css/colorbox.css"));
         $env->add_css_file($env->out_url("css/ui-lightness/jquery-ui-1.8.12.custom.css"));
+        $env->add_js_file($env->out_url("js/jaudio-player.1.1.js"));
+        $env->add_css_file($env->out_url("css/jaudio-player.1.1.css"));
+
       }
     }
 
diff --git a/app/out/default/css/actions/sources.css b/app/out/default/css/actions/sources.css
index aea7e08..0befaf6 100644
--- a/app/out/default/css/actions/sources.css
+++ b/app/out/default/css/actions/sources.css
@@ -94,7 +94,7 @@ ul.groupes li .infos li
 
 .description
 { padding: 15px 50px 15px 50px;
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
 .description p
@@ -314,65 +314,31 @@ ul.sources li{
   text-align: right;
 }
 
-ul.documents
-{ list-style-type: none;
-}
-
-ul.documents li
-{ margin: 0px;
-  padding: 0px;
-  clear: left;
-  font-size: 0.8em;
-}
-
-/* ------ player */
-
-.loading_player{
-  opacity: 0.5;
-  background-image: url(../../icons/player_loading.gif);
-  background-position: center;
+ul.documents{
+  list-style-type: none;
+  padding-left: 65px;
+  background-image: url(../../icons/download.png);
   background-repeat: no-repeat;
+  background-position: 23px 8px;
+  min-height: 32px;
 }
 
-.player_progress
-{ width: 100%;
-  height: 5px;
-  font-size: 1px;
-  line-height: 1px;
-  overflow: hidden;
-  margin: 0px 0px 0px 0px;
-  position: relative;
-  cursor: pointer;
-}
-
-.player_progress .loaded
-{ width: 0;
-  height: 5px;
-}
-
-.player_progress .position
-{ width: 0;
-  height: 5px;
-  position: absolute;
-  top: 0px;
-}
-
-.player_controls, .no_player
-{ margin: 2px 5px 0 0;
+ul.documents li{
+  margin: 0px;
+  padding: 0px;
   float: left;
-  width: 40px;
-}
-
-.player_controls a
-{ text-decoration: none;
+  font-size: 1em;
+  padding: 5px 5px 0 0;
 }
 
-.player_controls a.pause
-{ display: none;
+ul.documents li a{
+  display: block;
+  border: solid 1px #c0c0c0;
+  padding: 3px 10px;
 }
-
-.player_controls a.stop
-{ display: none;
+ul.documents li a:hover{
+  background-color: #f5f5f5;
+  color: #000066;
 }
 
 /* ------ pistes / derivations */
diff --git a/app/out/default/css/jaudio-player.1.1.css b/app/out/default/css/jaudio-player.1.1.css
new file mode 100644
index 0000000..2566c2b
--- /dev/null
+++ b/app/out/default/css/jaudio-player.1.1.css
@@ -0,0 +1,156 @@
+/*
+  jaudioPlayer 1.1
+  http://jaudio-player.dj3c1t.com/
+
+*/
+
+.audio_player{
+  position: relative;
+  margin-bottom: 0.5em;
+}
+
+.audio_player img.loading{
+  position: absolute;
+  top: 2px;
+  left: 0;
+  display: none;
+}
+.with_waveform .audio_player img.loading{
+  top: 21px;
+}
+
+
+.audio_player .player_controls{
+  margin: 0;
+  position: absolute;
+  top: 2px;
+  left: 0px;
+  width: 42px;
+}
+
+.with_waveform .audio_player .player_controls{
+  top: 21px;
+}
+
+.audio_player .player_controls a{
+  text-decoration: none;
+  display: block;
+  float: right;
+  width: 16px;
+  height: 16px;
+  margin: 0 0 0 5px;
+}
+
+.audio_player .player_controls a span{
+  display: none;
+}
+
+.audio_player .player_controls a.play{
+  background-position: 0px 0px;
+}
+
+.audio_player .player_controls a.play:hover{
+  background-position: -16px 0px;
+}
+
+.audio_player .player_controls a.pause{
+  background-position: 0px -16px;
+  display: none;
+}
+
+.audio_player .player_controls a.pause:hover{
+  background-position: -16px -16px;
+}
+
+.audio_player .player_controls a.stop{
+  background-position: 0px -32px;
+  display: none;
+}
+
+.audio_player .player_controls a.stop:hover{
+  background-position: -16px -32px;
+}
+
+
+.audio_player .player_progress{
+  height: 20px;
+  overflow: hidden;
+  margin: 0 10em 0 55px;
+  position: relative;
+}
+
+.audio_player .player_progress div,
+.audio_player .player_progress img{
+  cursor: pointer;
+}
+
+.audio_player .player_progress .bg{
+  background-color: #e5e5e5;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.audio_player .player_progress .loaded{
+  background-color: #c0c0c0;
+  width: 0;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.audio_player .player_progress .position{
+  background-color: #666666;
+  width: 0;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.with_waveform .audio_player .player_progress{
+  height: 60px;
+  background-color: transparent;
+}
+
+.with_waveform .audio_player .player_progress img{
+	height:100%;
+}
+
+.with_waveform .audio_player .player_progress .bg{
+  background-color: transparent;
+  opacity: 0.4;
+}
+
+.with_waveform .audio_player .player_progress .loaded{
+  background-color: transparent;
+  opacity: 0.4;
+}
+
+.with_waveform .audio_player .player_progress .position{
+  background-color: transparent;
+  opacity: 1;
+  border-right: solid 2px #333333;
+}
+
+.audio_player .time{
+  position: absolute;
+  top: 0px;
+  right: 5px;
+}
+
+.with_waveform .audio_player .time{
+  top: 22px;
+}
+
+.audio_player .time .duration{
+  color: #888888;
+  border-left: solid 1px #888888;
+  padding-left: 0.5em;
+}
diff --git a/app/out/default/images/jaudio-player/jap-graphics.png b/app/out/default/images/jaudio-player/jap-graphics.png
new file mode 100644
index 0000000..bc965c4
Binary files /dev/null and b/app/out/default/images/jaudio-player/jap-graphics.png differ
diff --git a/app/out/default/images/jaudio-player/jap-loading.gif b/app/out/default/images/jaudio-player/jap-loading.gif
new file mode 100644
index 0000000..340fc81
Binary files /dev/null and b/app/out/default/images/jaudio-player/jap-loading.gif differ
diff --git a/app/out/default/js/actions/sources.js b/app/out/default/js/actions/sources.js
index 03a20c0..90a052e 100644
--- a/app/out/default/js/actions/sources.js
+++ b/app/out/default/js/actions/sources.js
@@ -1,313 +1,36 @@
 $(document).ready(
   function(){
     init_show_xml_links();
-    init_players("*");
-    init_player_listener();
+    init_players("");
     init_menu_source("body");
+    init_album_play_all();
   }
 );
 
 // -----------------------------------------------------------------
-//                                                      player audio
+//                                                     players audio
 //
 
-var current_document = false;
-var autoplay_next = false;
-
-function init_players(target){
-  $(target == "*" ? "audio" : target + " audio").each
-  ( function()
-    { var audio_elt = $(this).get(0);
-      var CAN_PLAY = false;
-      var id_document = $(this).attr("id").substring(6);
-      var id_source = null;
-      if((k = id_document.indexOf("_")) != -1) id_source = id_document.substring(0, k);
-      if(id_source){
-        $(this).find("source").each(
-          function(){
-            if(audio_elt.canPlayType($(this).attr("type"))) CAN_PLAY = true;
-         }
-        );
-        if(CAN_PLAY){
-          audio_elt.addEventListener("ended", track_ended, false);
-          $("#player_" + id_document + " .play").click(function() { play(id_document); return false; });
-          $("#player_" + id_document + " .play").css("display", "inline");
-          $("#player_" + id_document + " .pause").click(function() { pause(); return false; });
-          $("#player_" + id_document + " .pause").css("display", "none");
-          $("#player_" + id_document + " .stop").click(function() { stop(); return false; });
-          $("#player_" + id_document + " .stop").css("display", "none");
-          $("#document_" + id_document + " .no_player").remove();
-        }
-      }
-      if(!CAN_PLAY) $("#player_" + id_document).remove();
-    }
-  );
-  $(target == "*" ? ".track" : target + " .track").each(
-    function(){
-      if($(this).find(".player").size()){
-        var id_source = $(this).attr("id").substring(6);
-        $(this).find(".player_progress").first().click(
-          function(e){
-            if((progress_width = $(this).width()) != 0){
-              play_source_from(id_source, (100 * (e.pageX - this.offsetLeft)) / progress_width);
-            }
-          }
-        );
-      }
-      else $(this).find(".player_progress").first().css("cursor", "default");
-    }
-  );
+function init_players(elt){
+  $(elt + " audio").jaudioPlayer({
+    "player_graphics": mw_path_url + "plugins/mw_sourceml/app/out/default/images/jaudio-player/jap-graphics.png",
+    "loading_img": mw_path_url + "plugins/mw_sourceml/app/out/default/images/jaudio-player/jap-loading.gif",
+    "auto_play_next_track": false,
+    "loop": false,
+    "waveform_class": "waveform"
+  });
 }
 
-function init_player_listener(){
-  setInterval("player_listener_update()", 300);
-}
-
-function player_listener_update(){
-  if(
-       (current_document != false)
-    && (source_id = get_current_source_id())
-    && (current_audio = $("#audio_" + current_document).get(0))
-    && ($("#track_" + source_id + " .player_progress").size())
-  ){
-    $("#track_" + source_id + " .player_progress .position").not(
-      "#track_" + source_id + " .pistes .player_progress .position").not(
-      "#track_" + source_id + " .derivation .player_progress .position").css(
-        "width",
-        Math.round((100 * current_audio.currentTime) / current_audio.duration) + "%"
-    );
-  }
-}
-
-function get_current_source_id(){
-  if(current_document != false){
-    if($("#document_" + current_document).size()){
-      var source_document_id = $("#document_" + current_document).attr("id").substring(9);
-      if((k = source_document_id.indexOf("_")) != -1){
-        return source_document_id.substring(0, k);
-      }
-    }
-  }
-  return false;
-}
-
-function play_all(){
-  autoplay_next = play_first_source();
-}
-
-function play_first_source(){
-  var FOUND = false;
-  $(".track").not(".pistes .track").not(".derivation .track").each(
+function init_album_play_all(){
+  $("#play_all a").click(
     function(){
-      if(!FOUND){
-        $(this).find(".documents li").not(".pistes .documents li").not(".derivation .documents li").each(
-          function(){
-            if(!FOUND){
-              var source_document_id = $(this).attr("id").substring(9);
-              if(source_document_id.length > 0){
-                if($("#player_" + source_document_id).size()){
-                  FOUND = true;
-                  play(source_document_id);
-                }
-              }
-            }
-          }
-        );
-      }
+      $("audio").jaudioPlayer("set_option", "auto_play_next_track", true);
+      $("#audio_wrapper_1 .player_controls .play").trigger("click");
+      return false;
     }
   );
-  return FOUND;
-}
-
-function play_next_source(){
-  var FOUND = false;
-  if(current_document != false){
-    if($("#document_" + current_document).size()){
-      var current_source_document_id = $("#document_" + current_document).attr("id");
-      var current_source_id = get_current_source_id();
-      if(current_source_id != false){
-        var CURRENT_FOUND = false;
-        $(".track").not(".pistes .track").not(".derivation .track").each(
-          function(){
-            if(!FOUND){
-              if(CURRENT_FOUND){
-                $(this).find(".documents li").not(".pistes .documents li").not(".derivation .documents li").each(
-                  function(){
-                    if(!FOUND){
-                      var source_document_id = $(this).attr("id").substring(9);
-                      if(source_document_id.length > 0){
-                        if($("#player_" + source_document_id).size()){
-                          FOUND = true;
-                          play(source_document_id);
-                        }
-                      }
-                    }
-                  }
-                );
-              }
-              else{
-                if(current_source_id == $(this).attr("id").substring("6")){
-                  CURRENT_FOUND = true;
-                }
-              }
-            }
-          }
-        );
-      }
-    }
-  }
-  return FOUND;
-}
-
-function play(id_document){
-  if(current_document == id_document){
-    if($("#audio_" + current_document).get(0).paused){
-      gui_state("playing");
-      $("#audio_" + current_document).get(0).play();
-    }
-  }
-  else{
-    if(current_document != false){
-      var audio_elt = $("#audio_" + current_document).get(0);
-      audio_elt.pause();
-      audio_elt.currentTime = 0;
-      gui_state("stoped");
-    }
-    current_document = id_document;
-    _play(0);
-  }
 }
 
-function play_source_from(id_source, position){
-  if(
-       (current_document != false)
-    && (current_source_id = get_current_source_id())
-    && (id_source == current_source_id)
-  ){
-    _play(position);
-  }
-  else{
-    stop();
-    var FOUND = false;
-    $("#track_" + id_source + " .documents li").each(
-      function(){
-        if(!FOUND){
-          var source_document_id = $(this).attr("id").substring(9);
-          if(source_document_id.length > 0){
-            if($("#player_" + source_document_id).size()){
-              FOUND = true;
-              current_document = source_document_id;
-              _play(position);
-            }
-          }
-        }
-      }
-    );
-  }
-}
-
-function _play(position){
-  if(current_document != false){
-    var audio_elt = $("#audio_" + current_document).get(0);
-    audio_elt.preload = "auto";
-    audio_elt.addEventListener("loadeddata", track_loadeddata, false);
-    audio_elt.addEventListener("canplaythrough", track_canplaythrough, false);
-    audio_elt.addEventListener("playing", track_playing, false);
-    gui_state("loading");
-    audio_elt.position = position;
-    audio_elt.load();
-  }
-}
-
-function track_loadeddata(event){
-  var audio_elt = event.target;
-  audio_elt.removeEventListener("loadeddata", track_loadeddata, false);
-  if(current_document != false){
-    audio_elt.currentTime = audio_elt.position ? (audio_elt.position * audio_elt.duration) / 100 : 0;
-  }
-}
-
-function track_canplaythrough(event){
-  var audio_elt = event.target;
-  audio_elt.removeEventListener("canplaythrough", track_canplaythrough, false);
-  audio_elt.play();
-}
-
-function track_playing(event){
-  var audio_elt = event.target;
-  audio_elt.removeEventListener("playing", track_playing, false);
-  gui_state("playing");
-}
-
-function pause(){
-  if(current_document != false){
-    var audio_elt = $("#audio_" + current_document).get(0);
-    audio_elt.pause();
-    gui_state("paused");
-  }
-}
-
-function stop(){
-  if(current_document != false){
-    var audio_elt = $("#audio_" + current_document).get(0);
-    audio_elt.pause();
-    audio_elt.currentTime = 0;
-    gui_state("stoped");
-    current_document = false;
-  }
-  autoplay_next = false;
-}
-
-function track_ended(){
-  gui_state("stoped");
-  var current_audio = $("#audio_" + current_document).get(0);
-  current_audio.pause();
-  if(current_audio.currentTime) current_audio.currentTime = 0;
-  if(autoplay_next) autoplay_next = play_next_source();
-}
-
-function gui_state(state){
-  gui_blur();
-  if(current_document != false){
-    var source_id = get_current_source_id();
-    $("#track_" + source_id).removeClass("loading_player");
-    if(state == "playing"){
-      $("#player_" + current_document).find(".play").css("display", "none");
-      $("#player_" + current_document).find(".pause").css("display", "inline");
-      $("#player_" + current_document).find(".stop").css("display", "inline");
-//      $("#track_" + source_id).removeClass("track");
-      $("#track_" + source_id).addClass("playing_track");
-    }
-    else if(state == "paused"){
-      $("#player_" + current_document).find(".play").get(0).style.display = "inline";
-      $("#player_" + current_document).find(".pause").get(0).style.display = "none";
-      $("#player_" + current_document).find(".stop").get(0).style.display = "inline";
-//      $("#track_" + source_id).removeClass("track");
-      $("#track_" + source_id).addClass("playing_track");
-    }
-    else if(state == "stoped"){
-      $("#player_" + current_document).find(".play").get(0).style.display = "inline";
-      $("#player_" + current_document).find(".pause").get(0).style.display = "none";
-      $("#player_" + current_document).find(".stop").get(0).style.display = "none";
-      $("#track_" + source_id).removeClass("playing_track");
-//      $("#track_" + source_id).addClass("track");
-      $("#track_" + source_id + " .player_progress .position").not(
-        "#track_" + source_id + " .pistes .player_progress .position").not(
-        "#track_" + source_id + " .derivation .player_progress .position").css("width", "0%");
-    }
-    else if(state == "loading"){
-      $("#track_" + source_id).addClass("loading_player");
-    }
-  }
-}
-
-function gui_blur(){
-  if((current_document != false) && $("#player_" + current_document).size()){
-    $("#player_" + current_document).find(".play").get(0).blur();
-    $("#player_" + current_document).find(".pause").get(0).blur();
-    $("#player_" + current_document).find(".stop").get(0).blur();
-  }
-}
 
 // -----------------------------------------------------------------
 //                                                        source xml
@@ -342,6 +65,7 @@ function toggle_source_list(id_block){
     $("#source_list_" + id_block).slideUp(200);
     $("#source_list_" + id_block + " .pistes").empty();
     $("#toggle_sources_list_" + id_block + ".block_list_toggle").html("[+]");
+	  $("audio").jaudioPlayer("clean_audio_elts");
   }
   else{
     $("#source_list_" + id_block).slideDown(200);
@@ -365,6 +89,7 @@ function toggle_derivation_list(id_block){
     $("#derivation_list_" + id_block).slideUp(200);
     $("#derivation_list_" + id_block + " .derivation").empty();
     $("#toggle_derivation_list_" + id_block + ".block_list_toggle").html("[+]");
+	  $("audio").jaudioPlayer("clean_audio_elts");
   }
   else{
     $("#derivation_list_" + id_block).slideDown(200);
diff --git a/app/out/default/js/jaudio-player.1.1.js b/app/out/default/js/jaudio-player.1.1.js
new file mode 100644
index 0000000..e3e6ac0
--- /dev/null
+++ b/app/out/default/js/jaudio-player.1.1.js
@@ -0,0 +1,368 @@
+/*
+  jaudioPlayer 1.1
+  http://jaudio-player.dj3c1t.com/
+
+*/
+(function($){
+
+  // -----------------------------------------------------------------------
+  //                                              fonction d'appel du plugin
+
+  $.fn.jaudioPlayer = function(param){
+    if(jap_api[param]) return jap_api[param].apply(this, Array.prototype.slice.call(arguments, 1));
+    if(typeof param === 'object' || !param) return jap.init.apply(this, arguments);
+  };
+
+  // -----------------------------------------------------------------------
+  //                                                               attributs
+
+  var settings        = {},
+      audio_elts      = {},
+      audio_elt_index = 0,
+      waiting_track   = false,
+      current_track   = false,
+      seek_to_precent = 0;
+
+  // -----------------------------------------------------------------------
+  //                                                     fonctions publiques
+
+  var jap_api = {
+
+    set_option: function(option_name, value){
+      settings[option_name] = value;
+    },
+
+    get_option: function(option_name){
+      return settings[option_name];
+    },
+
+    resize: function(){
+      jap.resize_audio_players();
+    },
+
+    clean_audio_elts: function(){
+      for(var i in audio_elts){
+        if($("#" + audio_elts[i].attr("id")).size() == 0){
+          if(current_track == i){
+            try{
+              jap.stop();
+            }
+            catch(e){}
+            current_track = false;
+          }
+          delete audio_elts[i];
+        }
+      }
+    }
+
+  };
+
+  // -----------------------------------------------------------------------
+  //                                                      fonctions internes
+
+  var jap = {
+
+    init: function(options){
+      settings = $.extend(
+        {
+          "waveform_class": "",
+          "player_graphics": "jaudio-player/jap-graphics.png",
+          "loading_img": "jaudio-player/jap-loading.gif",
+          "auto_play_next_track": false,
+          "loop": false
+        },
+        options
+      );
+      return this.each(
+        function(){
+          var audio_elt = $(this);
+          if(audio_elt.is("audio")){
+            jap.init_player(audio_elt);
+          }
+        }
+      );
+    },
+
+    // ------------------- initialisation
+
+    init_player: function(audio_elt){
+      audio_elt_index++;
+      audio_elts[audio_elt_index] = audio_elt;
+      var CAN_PLAY = false;
+      audio_elt.find("source").each(
+        function(){
+          if(audio_elt.get(0).canPlayType($(this).attr("type"))) CAN_PLAY = true;
+        }
+      );
+      if(CAN_PLAY){
+        audio_elt.wrap('<div class="audio_wrapper" id="audio_wrapper_' + audio_elt_index + '" />');
+        $("#audio_wrapper_" + audio_elt_index).append(
+            "<div class=\"audio_player\" id=\"audio_player_" + audio_elt_index + "\">"
+          + "  <img class=\"loading\" src=\"" + settings["loading_img"] + "\" />"
+          + "  <div class=\"player_controls\">"
+          + "    <a class=\"pause\" href=\"#\"><span>pause</span></a>"
+          + "    <a class=\"play\" href=\"#\"><span>play</span></a>"
+          + "    <a class=\"stop\" href=\"#\"><span>stop</span></a>"
+          + "  </div>"
+          + "  <div class=\"player_progress\">"
+          + "    <div class=\"bg\"></div>"
+          + "    <div class=\"loaded\"></div>"
+          + "    <div class=\"position\"></div>"
+          + "  </div>"
+          + "  <div class=\"time\">"
+          + "    <span class=\"position\">00:00</span>"
+          + "    <span class=\"duration\">00:00</span>"
+          + "  </div>"
+          + "</div>"
+        );
+        if(settings["waveform_class"].length){
+          if($("#audio_wrapper_" + audio_elt_index + " ." + settings["waveform_class"]).size()){
+            $("#audio_wrapper_" + audio_elt_index).addClass("with_waveform");
+            $("#audio_wrapper_" + audio_elt_index + " .player_progress div").html(
+              "<img src=\"" + $("#audio_wrapper_" + audio_elt_index + " ." + settings["waveform_class"]).attr("src") + "\" />"
+            );
+          }
+        }
+        audio_elt.bind('loadedmetadata', function(e){ jap.track_loadedmetadata(e); })
+        audio_elt.bind('progress', function(){ jap.track_progress(); })
+        audio_elt.bind('canplaythrough', function(){ jap.track_canplaythrough(); })
+        audio_elt.bind('timeupdate', function(){ jap.track_timeupdate(); })
+        audio_elt.bind('waiting', function(){ jap.track_waiting(); })
+        audio_elt.bind('playing', function(){ jap.track_playing(); })
+        audio_elt.bind('ended', function(){ jap.track_ended(); })
+        $("#audio_wrapper_" + audio_elt_index + " .player_controls a").css("background-image", "url(" + settings["player_graphics"] + ")");
+        $("#audio_wrapper_" + audio_elt_index + " .player_controls .play").css("display: block");
+        $("#audio_wrapper_" + audio_elt_index + " .player_controls .play").click(function() { jap.play($(this)); return false; });
+        $("#audio_wrapper_" + audio_elt_index + " .player_controls .pause").click(function() { jap.pause(); return false; });
+        $("#audio_wrapper_" + audio_elt_index + " .player_controls .stop").click(function() { jap.stop(); return false; });
+        $("#audio_wrapper_" + audio_elt_index + " .player_progress").click(function(e) { jap.seek(e); });
+        jap.resize_audio_players();
+      }
+    },
+
+    resize_audio_players: function(){
+      $(".audio_player .player_progress").each(
+        function(){
+          var progress_width = $(this).width();
+          $(this).find("img").css("width", progress_width);
+        }
+      );
+    },
+
+    // ------------------- evenements
+
+    track_loadedmetadata: function(e){
+      var current_audio = e.target;
+      var minutes = "" + Math.floor(current_audio.duration / 60);
+      var secondes = "" + Math.round(current_audio.duration - (minutes * 60));
+      if(minutes.length == 1) minutes = "0" + minutes;
+      if(secondes.length == 1) secondes = "0" + secondes;
+      $(current_audio).parents(".audio_wrapper").find(".time .duration").html(minutes + ":" + secondes);
+    },
+
+    track_progress: function(){
+      if(current_track != false){
+        var current_audio = audio_elts[current_track].get(0);
+        if(current_audio.buffered.length){
+          var buffered = current_audio.buffered.end(0);
+          var loaded = parseInt(((buffered / current_audio.duration) * 100), 10);
+        }
+        $("#audio_player_" + current_track).find(".loaded").css("width", loaded + "%");
+      }
+    },
+
+    track_canplaythrough: function(){
+      if(waiting_track != false){
+        current_track = waiting_track;
+        waiting_track = false;
+        setTimeout(
+          function(){
+            var current_audio = audio_elts[current_track].get(0);
+            current_audio.play();
+            jap.gui_state("playing");
+            if(seek_to_precent != 0){
+              current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent;
+              seek_to_precent = 0;
+            }
+          },
+          500
+        );
+      }
+    },
+
+    track_timeupdate: function(){
+      if(current_track != false){
+        var current_audio = audio_elts[current_track].get(0);
+        var progress_bar = $("#audio_player_" + current_track).find(".position").get(0);
+        if(current_audio && progress_bar){
+          progress_bar.style.width = ((100 * current_audio.currentTime) / current_audio.duration) + "%";
+          var minutes = "" + Math.floor(current_audio.currentTime / 60);
+          var secondes = "" + Math.round(current_audio.currentTime - (minutes * 60));
+          if(minutes.length == 1) minutes = "0" + minutes;
+          if(secondes.length == 1) secondes = "0" + secondes;
+          $("#audio_player_" + current_track + " .time .position").html(minutes + ":" + secondes);
+          var minutes = "" + Math.floor(current_audio.duration / 60);
+          var secondes = "" + Math.round(current_audio.duration - (minutes * 60));
+          if(minutes.length == 1) minutes = "0" + minutes;
+          if(secondes.length == 1) secondes = "0" + secondes;
+          $("#audio_player_" + current_track + " .time .duration").html(minutes + ":" + secondes);
+        }
+      }
+    },
+
+    track_waiting: function(){
+      jap.gui_state("waiting");
+    },
+
+    track_playing: function(){
+      jap.gui_state("playing");
+    },
+
+    track_ended: function(){
+      if(current_track != false){
+        var current_audio = audio_elts[current_track].get(0);
+        jap.gui_state("stoped");
+        if(settings["auto_play_next_track"] || settings["loop"]) jap.play_next_track();
+      }
+    },
+
+    play_next_track: function(){
+      var next_track = false,
+          first_track = false,
+          CURRENT_FOUND = false;
+      for(var track in audio_elts){
+        if(!first_track) first_track = track;
+        if(track == current_track) CURRENT_FOUND = true;
+        else{
+          if(CURRENT_FOUND){
+            next_track = track;
+            break;
+          }
+        }
+      }
+      if(!next_track && settings["loop"] && first_track) next_track = first_track;
+      if(next_track){
+        if(current_track != false) jap.stop();
+        current_track = next_track;
+        jap.gui_state("waiting");
+        current_track = false;
+        var current_audio = audio_elts[track].get(0);
+        waiting_track = next_track;
+        seek_to_precent = 0;
+        jap.load_track(current_audio);
+      }
+    },
+
+    load_track: function(audio){
+      audio.preload = "auto";
+      if(audio.readyState == audio.HAVE_ENOUGH_DATA) jap.track_canplaythrough();
+      else audio.load();
+    },
+
+    // ------------------- boutons
+
+    play: function(play_elt){
+      var track = play_elt.parents(".audio_wrapper").attr("id").substr(14);
+      if(current_track == track){
+        if(audio_elts[track].get(0).paused){
+          audio_elts[track].get(0).play();
+        }
+      }
+      else{
+        if(current_track != false) jap.stop();
+        current_track = track;
+        jap.gui_state("waiting");
+        current_track = false;
+        var current_audio = audio_elts[track].get(0);
+        waiting_track = track;
+        seek_to_precent = 0;
+        jap.load_track(current_audio);
+      }
+    },
+
+    seek: function(e){
+      var $target = $(e.target);
+      if(true || $target.is("img")){
+        var audio_player_elt = $target.parents(".audio_player");
+        var track = audio_player_elt.attr("id").substr(13);
+        var progress_bar = audio_player_elt.find(".player_progress");
+        var current_audio = audio_elts[track].get(0);
+        seek_to_precent = ((e.pageX - progress_bar.offset().left) * 100) / progress_bar.width();
+        if(track){
+          if(current_track == false || current_track != track){
+            if(current_track != false) jap.stop();
+            current_track = track;
+            jap.gui_state("waiting");
+            current_track = false;
+            waiting_track = track;
+            jap.load_track(current_audio);
+          }
+          else{
+            current_audio.currentTime = (current_audio.duration / 100) * seek_to_precent;
+          }
+        }
+      }
+    },
+
+    pause: function(){
+      if(current_track != false){
+        audio_elts[current_track].get(0).pause();
+        jap.gui_state("paused");
+      }
+    },
+    
+    stop: function(){
+      if(current_track != false){
+        var current_audio = audio_elts[current_track].get(0);
+        current_audio.pause();
+        if(current_audio.currentTime) current_audio.currentTime = 0;
+        jap.gui_state("stoped");
+        current_track = false;
+      }
+    },
+
+    // ------------------- interface
+
+    gui_state: function(state){
+      if(current_track != false){
+        jap.gui_blur();
+        if(state == "waiting"){
+          $("#audio_player_" + current_track).find(".play").css("display", "none");
+          $("#audio_player_" + current_track).find(".pause").css("display", "none");
+          $("#audio_player_" + current_track).find(".stop").css("display", "none");
+          $("#audio_player_" + current_track).find("img.loading").css("display", "block");
+        }
+        if(state == "playing"){
+          $("#audio_player_" + current_track).find("img.loading").css("display", "none");
+          $("#audio_player_" + current_track).find(".play").css("display", "none");
+          $("#audio_player_" + current_track).find(".pause").css("display", "inline");
+          $("#audio_player_" + current_track).find(".stop").css("display", "inline");
+        }
+        else if(state == "paused"){
+          $("#audio_player_" + current_track).find("img.loading").css("display", "none");
+          $("#audio_player_" + current_track).find(".play").css("display", "inline");
+          $("#audio_player_" + current_track).find(".pause").css("display", "none");
+          $("#audio_player_" + current_track).find(".stop").css("display", "inline");
+        }
+        else if(state == "stoped"){
+          $("#audio_player_" + current_track).find("img.loading").css("display", "none");
+          $("#audio_player_" + current_track).find(".play").css("display", "inline");
+          $("#audio_player_" + current_track).find(".pause").css("display", "none");
+          $("#audio_player_" + current_track).find(".stop").css("display", "none");
+          $("#audio_player_" + current_track).find(".position").css("width", "0%");
+          $("#audio_player_" + current_track).find(".time .position").html("00:00");
+        }
+      }
+    },
+    
+    gui_blur: function(){
+      if(current_track != false){
+        $("#audio_player_" + current_track).find(".play").get(0).blur();
+        $("#audio_player_" + current_track).find(".pause").get(0).blur();
+        $("#audio_player_" + current_track).find(".stop").get(0).blur();
+      }
+    }
+
+  };
+
+})(jQuery);
\ No newline at end of file
diff --git a/app/out/default/views/sources/source.php b/app/out/default/views/sources/source.php
index 2bf3811..ffc1aeb 100644
--- a/app/out/default/views/sources/source.php
+++ b/app/out/default/views/sources/source.php
@@ -6,6 +6,7 @@
 <?php
 
   require $this->out_file("views/sources/source/header.php");
+  require $this->out_file("views/sources/source/player.php");
   require $this->out_file("views/sources/source/metas.php");
   require $this->out_file("views/sources/source/documents.php");
 
diff --git a/app/out/default/views/sources/source/documents.php b/app/out/default/views/sources/source/documents.php
index 540057a..2396423 100644
--- a/app/out/default/views/sources/source/documents.php
+++ b/app/out/default/views/sources/source/documents.php
@@ -3,39 +3,13 @@
   $documents = $source["reference"] ? $source["reference"]["documents"] : $source["documents"];
   if($documents) :
   $mw_out = $this->helper("mw_helper_out");
+
 ?>
 
 
   <ul class="documents">
-  <?php
-
-    foreach($documents as $id_document => $document) :
-    $ext = "";
-    $audio_type = "";
-    if(($k = strrpos($document["url"], ".")) !== false) $ext = strtolower(substr($document["url"], $k + 1));
-    switch($ext){
-      case "ogg":
-        $audio_type = "audio/ogg";
-        break;
-      case "mp3":
-        $audio_type = "audio/mp3";
-        break;
-    }
-
-  ?>
-
+    <?php foreach($documents as $id_document => $document) : ?>
     <li id="document_<?php echo $source["id"]."_".$id_document ?>">
-      <?php if($audio_type) : ?>
-      <div class="player_controls player" id="player_<?php echo $source["id"]."_".$id_document ?>">
-        <a class="play" href="#"><img src="<?php echo $this->out_url("icons/play.png") ?>" alt="play" /></a>
-        <a class="pause" href="#"><img src="<?php echo $this->out_url("icons/pause.png") ?>" alt="pause" /></a>
-        <a class="stop" href="#"><img src="<?php echo $this->out_url("icons/stop.png") ?>" alt="stop" /></a>
-        <audio id="audio_<?php echo $source["id"]."_".$id_document ?>" preload="none">
-          <source src="<?php echo $document["url"] ?>" type="<?php echo $audio_type ?>">
-        </audio>
-      </div>
-      <?php endif; ?>
-      <div class="no_player"><!-- --></div>
       <?php
         if(!($nom = $document["nom"])){
           $nom = explode(".", $document["url"]);
@@ -46,10 +20,8 @@
       ?>
       <a href="<?php echo $document["url"] ?>" title="<?php echo $mw_out->esc_attr($document["nom"]); ?>"><?php echo $nom; ?></a>
     </li>
-
-  <?php endforeach; ?>
+    <?php endforeach; ?>
   </ul>
-
   <div class="clear"><!-- --></div>
 
-  <?php endif; ?>
+<?php endif; ?>
diff --git a/app/out/default/views/sources/source/header.php b/app/out/default/views/sources/source/header.php
index 51d654a..c7bc6b6 100644
--- a/app/out/default/views/sources/source/header.php
+++ b/app/out/default/views/sources/source/header.php
@@ -27,8 +27,6 @@
   <?php if(!isset($display_name) || $display_name) : ?>
   <?php
 
-
-
     $source_image_url = false;
     if($source["reference"]){
       if(
@@ -96,8 +94,3 @@
   <br class="clear" />
 
 </header>
-
-<div class="player_progress">
-  <div class="loaded"><!-- --></div>
-  <div class="position"><!-- --></div>
-</div>
diff --git a/app/out/default/views/sources/source/player.php b/app/out/default/views/sources/source/player.php
new file mode 100644
index 0000000..965618a
--- /dev/null
+++ b/app/out/default/views/sources/source/player.php
@@ -0,0 +1,41 @@
+<?php
+
+  $documents = $source["reference"] ? $source["reference"]["documents"] : $source["documents"];
+  if($documents) :
+  $mw_out = $this->helper("mw_helper_out");
+  $audio_files = array();
+  foreach($documents as $id_document => $document){
+    $ext = "";
+    if(($k = strrpos($document["url"], ".")) !== false) $ext = strtolower(substr($document["url"], $k + 1));
+    switch($ext){
+      case "ogg":
+        $audio_files[] = array(
+          "type" => "audio/ogg",
+          "src" => $document["url"]
+        );
+        break;
+      case "mp3":
+        $audio_files[] = array(
+          "type" => "audio/mp3",
+          "src" => $document["url"]
+        );
+        break;
+    }
+  }
+ if($audio_files) :
+
+?>
+<audio id="audio_<?php echo $source["id"] ?>" preload="none">
+  <?php foreach($audio_files as $audio_file) : ?>
+  <source src="<?php echo $audio_file["src"] ?>" type="<?php echo $audio_file["type"] ?>" />
+  <?php endforeach; ?>
+  <?php
+
+    $waveform_file = $this->path("content")."waveforms/".$source["id"].".png";
+    if(file_exists($waveform_file)) :
+
+  ?>
+  <img class="waveform" src="<?php echo $waveform_file; ?>" alt="waveform" />
+  <?php endif; ?>
+</audio>
+<?php endif; endif; ?>