HTML进度条单击并更新

Question

I've added a progress bar in my javascript code, to show the progress of a music track.

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

The code works fine, and I can see that my bar progresses as the music progresses as well.

Now I would like to be able to click anywhere on the progressbar, and be able to forward the music accordingly. In other words, I would like to be able to control the rewind/forward the track by clicking on the progress bar itself. Could someone help me, and gave me some idea how to do this. I am not an expert with HTML and JavaScripting, so I would appreciate some help.

Thanks, --Rudy

Answer 1

I would do it like this, using jQuery to make things slightly easier:

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>

You can then use that x coordinate to manipulate your music player as a percentage of the div width.

Answer 2

I came across this question today while creating a custom HTML5 video player. Just in regards to video instead of audio. The process should work the same though for your audio needs.

I found this article and was able to incorporate the progress bar part of it into my player. https://msdn.microsoft.com/en-us/library/ie/gg589528%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

Instead of using a progressbar element, like I was doing, the method I used here is to use a canvas element instead.

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

Then in your JavaScript, create a handle to reference it by

var mediaPlayer;
var progressBar;
var canvas;

When the document loads, initialize everything including the progress bar items

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

Then create a function outside of your initialization function for the timeupdate listener to call and automatically update the progress bar for you

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

I haven't completely cleaned it up yet. Hence the redundant handles to the same id. But I'm sure you get the picture.