$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"));
+
}
}
.description
{ padding: 15px 50px 15px 50px;
- font-size: 0.9em;
+ font-size: 1em;
}
.description p
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 */
--- /dev/null
+/*
+ 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;
+}
$(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
$("#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);
$("#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);
--- /dev/null
+/*
+ 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
<?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");
$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"]);
?>
<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; ?>
<?php if(!isset($display_name) || $display_name) : ?>
<?php
-
-
$source_image_url = false;
if($source["reference"]){
if(
<br class="clear" />
</header>
-
-<div class="player_progress">
- <div class="loaded"><!-- --></div>
- <div class="position"><!-- --></div>
-</div>
--- /dev/null
+<?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; ?>
projects / mw_sourceml / commitdiff
