HTML5 audio clicking the progress bar to move to a different time

Answer 1

I wrote about that in Working with HTML5 multimedia components – Part 3: Custom controls, scroll down to "Adding a progress bar".

Answer 2

Given some html that looks like this:

<div class="container">
    <video class="video">
        <source></source>
    </video>
    <progress min="0" max="100" value="0"></progress>
    <div class="controls"></div>
</div>

In order to seek to a specific time in the video as a result of a click event the js would look like this:

var player = document.querySelector("video");
var progressBar = document.querySelector("progress");
progressBar.addEventListener("click", seek);

function seek(e) {
    var percent = e.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    progressBar.value = percent / 100;
}

However, this doesn't address how to seek on a click/drag (like most video players do). include script

Answer 3

Hope this can save someone some time. If you're trying to set this up in an Angular app, you'll notice this is your controller context. So you'll need to use e.srcElement.clientWidth for this to work.

vm.setPosition = function(e){

  var percent = ((e.offsetX / e.srcElement.clientWidth));

  vm.songObject.setProgress(percent);
}

Answer 4

I came across this question today because I am creating a custom HTML5 video player and had the same question. Just in regards to video instead of audio. The process should work the same though.

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, or a div element, like you're doing, the trick 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.