Question

我在我的javascript代码中添加了一个进度条，以显示音乐曲目的进度。

audioElement.addEventListener("timeupdate", function(){
var progress = document.getElementById("progress");
var value = 0;
if (audioElement.currentTime > 0) {
  value = Math.floor((100 / audioElement.duration) * audioElement.currentTime);
}
progress.style.width = value + "%";}, false);

代码工作正常，我可以看到我的酒吧随着音乐的进展而进步。

现在我希望能够点击进度条上的任意位置，并能够相应地转发音乐。换句话说，我希望能够通过单击进度条本身来控制回放/转发音轨。有人可以帮助我，并告诉我如何做到这一点。我不是HTML和JavaScripting的专家，所以我很感激一些帮助。

谢谢， - 鲁迪

Answer 1

我会这样做，使用jQuery使事情变得更容易：

http://jsfiddle.net/LQqGS/3/

$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;

    $('.progress').width(x);
});

<div class='clickable'>
    <div class='display'>
        <div class="progress"></div>
    </div>
</div>

然后，您可以使用该x坐标来操作音乐播放器占div宽度的百分比。

Answer 2

我在创建自定义HTML5视频播放器时遇到了这个问题。只是关于视频而不是音频。根据您的音频需求，该过程应该是相同的。

我找到了这篇文章，并且能够将其中的进度条部分合并到我的播放器中。 https://msdn.microsoft.com/en-us/library/ie/gg589528%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

而不是像我一样使用progressbar元素，我在这里使用的方法是使用canvas元素。

<canvas id='progress-bar' width="200" height="20" style="border:1px solid green;">canvas not supported</canvas>

然后在您的JavaScript中，创建一个句柄以通过

引用它

var mediaPlayer;
var progressBar;
var canvas;

加载文档时，初始化所有内容，包括进度条项目

mediaPlayer = document.getElementById('media-video');
progressBar = document.getElementById('progress-bar');
canvas = document.getElementById('progress-bar');

canvas.addEventListener("click", function(e) {

    var canvas = document.getElementById('progress-bar');

    if (!e) {
        e = window.event;
    } //get the latest windows event if it isn't set
    try {
        //calculate the current time based on position of mouse cursor in canvas box
        mediaPlayer.currentTime = mediaPlayer.duration * (e.offsetX / canvas.clientWidth);
    }
    catch (err) {
    // Fail silently but show in F12 developer tools console
        if (window.console && console.error("Error:" + err));
    }
}, true);

mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

然后在初始化函数之外创建一个函数，让timeupdate侦听器调用并自动更新进度条

function updateProgressBar() {        
    mediaPlayer = document.getElementById('media-video');
    //get current time in seconds
    var elapsedTime = Math.round(mediaPlayer.currentTime);
    //update the progress bar
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        //clear canvas before painting
        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
        ctx.fillStyle = "rgb(255,0,0)";
        var fWidth = (elapsedTime / mediaPlayer.duration) * (canvas.clientWidth);
        if (fWidth > 0) {
            ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
        }
    }
}

我还没完全清理过它。因此冗余处理相同的id。但我相信你能得到这张照片。

HTML进度条单击并更新

2 个答案: