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

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

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.