Javascript 向音频html5付款人添加可定制的进度条

我在我的网站上使用一个非常简单的mp3播放器，通过jquery进行控制。静音/启动

声音会自动启动，您可以通过单击文本链接停止并重新启动声音

它工作得很好，但我也想显示一个进度条，也希望在点击进度条时返回到前进

我在网上找不到任何资源或正确的方法

这是我的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>

我想保留当前使用的启动/停止解决方案，只想添加一个进度条 有人能帮我吗

下面是一个JSFIDLE，可以看到它的作用：

---

非常感谢，

您可以将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>

静音

致：

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();
});

var audioElement=document.getElementById（'background_audio'）；
audioElement.volume=0.4；
//关闭默认控件
audioElement.controls=假；
//提醒奥多已准备好开始播放
$（'audio#background_audio'）.bind（'canplay'，function（）{
});
//检测音频播放
$（'audio#background_audio'）.bind（'play'，function（）{
$（'totalduration，'time'）.fadeIn（'slow'）；
$（“[id*=audioPlayButtom]”。addClass（'isplay'）；
});
//检测音频暂停
$（'audio#background_audio'）.bind（'pause'，function（）{
$（“#audioplaybutom”）.removeClass（‘播放暂停’）；
});
//检测音频结束
$（'audio#background_audio'）.bind（'end'，function（）{
$（'totalduration，'time'）。淡出（'slow'）；
$（“[id*=audioPlayButtom-2]”。removeClass（'iPlay'）；
var nxtplay=$（'.nowPlaying'）.next（）；
nxtplay.click（）；
});
//var audio=audioElement.get（0）；
/*仅播放音频或视频*/
$（'audio，video'）.bind（'play'，function（）{
玩=这个；
$（'audio，video'）。每个（函数（）{
如果（这个！=玩）
这个。暂停（）；
});
});
//HTML5音频-加载百分比
audioElement.addEventListener（'progress'，function（）{
var audioBuffered=（$（this.get（0）.buffered.end（0）/$（this.get（0）.duration）*100+'%'；
//更改进度条的宽度
$（'#audioBuffered'）.css（{width:audioBuffered}）；
});
/*播放/暂停*/
$（“[id*='audioPlayButtom']”）。绑定（'click'，函数（）{
audioElement.pause？audioElement.play（）：audioElement.pause（）；
$（“[id*=audioPlayButtom-2]”。toggleClass（'isplay'）；
});
/*别玩了*/
$（“[id*=audioStop]”。绑定（'click'，函数（）{
$（“#tutorials li”）.removeClass（“timeInfoShow”）；
audioElement.pause（）；
audioElement.currentTime=0；
$（“[id*=audioPlayButtom-2]”。removeClass（'iPlay'）；
$（'totalduration，'time'）。淡出（'slow'）；
});
/*分钟和秒*/
addEventListener（“时间更新”，函数（）{
var time=document.getElementById（'time'），
currentTime=audioElement.currentTime，
分钟=parseInt（当前时间/60），
秒=parseInt（当前时间-（分钟*60）），
totalduration=document.getElementById（'totalduration'），
持续时间=audioElement.duration，
最小值=parseInt（持续时间/60），
秒=parseInt（持续时间-（分钟*60）），
//我们在赛道中所占百分比是多少
seekbar=（当前时间/持续时间）*100+'%'；
//更改进度条的宽度
$（'#audioSeekbar'）.css（{width:seekbar}）；
//seekbar输入
var seekbar=document.getElementById（'seekbar'）；
函数setupSeekbar（）{
seekbar.min=audioElement.startTime；
seekbar.max=audioElement.startTime+audioElement.duration；
}
audioElement.ondurationchange=设置Seekbar；
函数seekAudio（）{
audioElement.currentTime=seekbar.value；
}
函数updateUI（）{
var lastBuffered=audioElement.buffered.end（audioElement.buffered.length-1）；
seekbar.min=audioElement.startTime；
seekbar.max=最后缓冲；
seekbar.value=audioElement.currentTime；
}
seekbar.onchange=seekAudio；
audioElement.ontimeupdate=updateUI；
audioElement.addEventListener（'durationchange'，setupSeekbar）；
audioElement.addEventListener（'timeupdate'，updateUI）；
//如果分钟数小于10，请添加“0”
如果（最小值<10）{
最小值='0'+最小值；
}
如果（分钟<10）{
分钟='0'+分钟；
}
//如果秒数小于10，请添加“0”
如果（第10节）{
秒='0'+秒；
}
如果（秒<10）{
秒='0'+秒；
}
//显示当前时间
time.innerHTML=分钟+'：'+秒；
//显示时间（完整）
totalduration.innerHTML=min+'：'+秒；
}，假）；
/*静音歌曲切换*/
$（“#静音”）.bind（'click'，function（）{
audioElement.muted=！audioElement.muted；
$（this.toggleClass（“isMute”）；
});
/*音量滑块*/
$（'#卷'）。更改（函数（）{
audioElement.volume=$（this.val（）/100；
});
$（'#卷'）。更改（函数（）{
$（'video'）[0]。卷=$（this）.val（）/100；
});
/*播放列表中的上一首歌曲*/
$（'#prevSong'）。绑定（'单击'，函数（）{
var prvplay=$（'.nowPlaying'）.prev（）；
prvplay.click（）；
});
/*播放列表中的下一首歌曲*/
$（'#nextSong'）.bind（'click'，function（）{
var nxtplay=$（'.nowPlaying'）.next（）；
nxtplay.click（）；
});
/*播放时重置歌曲*/
$（“#重置”）.bind（'click'，函数（）{
audioElement.currentTime=0；
audioElement.load（）；
audioElement.play（）；
});

要使用进度条，此js有更多的任务要做。

---

这里的示例：

http://jsfiddle.net/X4cu9/26/

为什么不使用

http://kolber.github.io/audiojs/

？此播放器使用Flash，我只想查看进度条，有什么想法吗？如果用户浏览器支持HTML 5，请不要使用此自动检测播放器使用音频标签，否则请使用Flash进行播放

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();
});