添加可自定義的進度條到音頻html5付款人

Question

我在我的網站上使用了一個非常簡單的MP3播放器，通過jquery控件。靜音/開始。

聲音自動啓動，您可以通過單擊文本鏈接將其停止並重新啓動。

它工作正常，但我想顯示一個進度條，也希望在點擊進度條時能夠返回前進。

我不能在網上幹什麼就

這裏的任何ressources或正確的方式是找我的html：

<div id="player"> 
<span class="mute">Mute sound</span> 
<audio id="background_audio" autoplay="autoplay" loop="loop"> 
<source src="http://rockonbones.com/wp-content/uploads/intro.mp3" type="audio/mpeg"/> 
<source src="http://rockonbones.com/wp-content/uploads/intro.ogg" type="audio/ogg"/> 
</audio> 
</div> 

和JS的;

var backAudio = $('#background_audio'); 

    var muted = false; 

    $('.mute').click(function(){ 
     var mute = $(this); 
     if (!muted) { 
      $('.mute').text("play sound"); 
      mute.attr("disabled", ""); 
      backAudio.animate({volume: 0}, 1000, function() { 
       muted = true; 
       mute.removeAttr("disabled", ""); 

      }); 
     } 
     else { 
      $('.mute').text("Mute sound"); 
      mute.attr("disabled", ""); 
      backAudio.animate({volume: 1}, 1000, function() { 
       muted = false; 
       mute.removeAttr("disabled", ""); 

      }); 
     } 
    }); 

我想保持啓動/停止我curently使用，只需要添加一個進度條解決方案 任何人可以幫助我嗎？

這裏是一個的jsfiddle看到它在行動：http://jsfiddle.net/X4cu9/25/

非常感謝，

Answer 1

可以HTML更改爲：

<div id="player"> 
<span id="mute">Mute sound</span> 
<audio id="background_audio" autoplay="autoplay" loop="loop"> 
    <source src="http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" type="audio/mpeg"/> 
    <source src="http://jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" type="audio/ogg"/> 
</audio> 
<input type="range" step="any" id="seekbar"/> 
<ul id="seekbarWrapper"> 
    <li id="audioSeekbar" hidden=""></li> 
    <li id="audioBuffered" hidden=""></li> 
</ul> 
<div class="AudioClock"> 
    <div id="time" ></div> 
    <div id="totalduration"></div> 
</div> 

和JS到：

var audioElement = document.getElementById('background_audio'); 
audioElement.volume = 0.4; 
// Turn off the default controls 
audioElement.controls = false; 

//Alert that the audo is ready to start playing 
$('audio#background_audio').bind('canplay', function() { 

}); 
// detect audio playing 
$('audio#background_audio').bind('play', function() { 
    $('#totalduration, #time').fadeIn('slow'); 
    $("[id*=audioPlayButtom]").addClass('isPlaying'); 

}); 
// detect audio pause 
$('audio#background_audio').bind('pause', function() { 
    $("#audioPlayButtom").removeClass('playPause'); 

}); 
// detect audio end 
$('audio#background_audio').bind('ended', function() { 
    $('#totalduration, #time').fadeOut('slow'); 
    $("[id*=audioPlayButtom-2]").removeClass('isPlaying'); 
    var nxtplay = $('.nowPlaying').next(); 
    nxtplay.click(); 
}); 

// var audio = audioElement.get(0); 
/*play only audio or video*/ 
$('audio,video').bind('play', function() { 
    playing = this; 
    $('audio,video').each(function() { 
     if (this != playing) 
      this.pause(); 
    }); 
}); 

//HTML5 Audio - Percentage Loaded 
audioElement.addEventListener('progress', function() { 
    var audioBuffered = ($(this).get(0).buffered.end(0)/$(this).get(0).duration) * 100 + '%'; 
    // Change the width of the progress bar 

    $('#audioBuffered').css({width: audioBuffered}); 

}); 

/*play/pause*/ 
$("[id*='audioPlayButtom']").bind('click', function() { 
    audioElement.paused ? audioElement.play() : audioElement.pause(); 
    $("[id*=audioPlayButtom-2]").toggleClass('isPlaying'); 
}); 

/* stop playing */ 
$("[id*=audioStop]").bind('click', function() { 
    $("#tutorials li").removeClass("timeInfoShow"); 
    audioElement.pause(); 
    audioElement.currentTime = 0; 
    $("[id*=audioPlayButtom-2]").removeClass('isPlaying'); 
    $('#totalduration, #time').fadeOut('slow'); 
}); 
/* min and secs */ 
audioElement.addEventListener("timeupdate", function() { 

    var time = document.getElementById('time'), 
      currentTime = audioElement.currentTime, 
      minutes = parseInt(currentTime/60), 
      seconds = parseInt(currentTime - (minutes * 60)), 
      totalduration = document.getElementById('totalduration'), 
      duration = audioElement.duration, 
      min = parseInt(duration/60), 
      sec = parseInt(duration - (min * 60)), 
      // How far through the track are we as a percentage seekbar 230px 
      seekbar = (currentTime/duration) * 100 + '%'; 
    // Change the width of the progress bar 
    $('#audioSeekbar').css({width: seekbar}); 
    // seekbar input 
    var seekbar = document.getElementById('seekbar'); 
    function setupSeekbar() { 
     seekbar.min = audioElement.startTime; 
     seekbar.max = audioElement.startTime + audioElement.duration; 
    } 
    audioElement.ondurationchange = setupSeekbar; 

    function seekAudio() { 
     audioElement.currentTime = seekbar.value; 
    } 

    function updateUI() { 
     var lastBuffered = audioElement.buffered.end(audioElement.buffered.length - 1); 
     seekbar.min = audioElement.startTime; 
     seekbar.max = lastBuffered; 
     seekbar.value = audioElement.currentTime; 
    } 

    seekbar.onchange = seekAudio; 
    audioElement.ontimeupdate = updateUI; 


    audioElement.addEventListener('durationchange', setupSeekbar); 
    audioElement.addEventListener('timeupdate', updateUI); 

    // If the number of minutes is less than 10, add a '0' 
    if (min < 10) { 
     min = '0' + min; 
    } 
    if (minutes < 10) { 
     minutes = '0' + minutes; 
    } 
    // If the number of seconds is less than 10, add a '0' 
    if (sec < 10) { 
     sec = '0' + sec; 
    } 
    if (seconds < 10) { 
     seconds = '0' + seconds; 
    } 
    // Display the current time 
    time.innerHTML = minutes + ':' + seconds; 
    // Display the time(full) 
    totalduration.innerHTML = min + ':' + sec; 
}, false); 

/*mute song toggle*/ 
$('#mute').bind('click', function() { 
    audioElement.muted = !audioElement.muted; 
    $(this).toggleClass("isMute"); 
}); 
/* volume slider*/ 
$('#volume').change(function() { 
    audioElement.volume = $(this).val()/100; 
}); 
$('#volume').change(function() { 
    $('video')[0].volume = $(this).val()/100; 
}); 

/* play the prev song on the list */ 
$('#prevSong').bind('click', function() { 
    var prvplay = $('.nowPlaying').prev(); 
    prvplay.click(); 
}); 

/* play the next song on the list */ 
$('#nextSong').bind('click', function() { 
    var nxtplay = $('.nowPlaying').next(); 
    nxtplay.click(); 
}); 

/* reset song while playing*/ 

$('#reset').bind('click', function() { 
    audioElement.currentTime = 0; 
    audioElement.load(); 
    audioElement.play(); 
}); 

與進度條一起工作，這js有更多的項目。 和這裏的示例：http://jsfiddle.net/X4cu9/26/