Update Progress Bar Using Percentage Values?

Question

I created a custom player built to be responsive. So far, everything works fine, except I can't seem to get the audio to play at the spot where the user clicked on the progress bar. All tutorials I've seen for this use pixel values, whereas my player uses percentages, so when I set barSize = 100 + '%'; it breaks the code and I get an error message saying "Failed to set the currentTime property on HTMLMediaElement: The provided double value is non-finite".

HTML

<!-- PROGRESS BAR -->
<div id="progress_bar">
    <div id="bar"></div>
</div>

JS CODE (for progress bar)

// PROGRESS BAR

// audio display
var progress = document.getElementById('bar');
//click area
var audioBar = document.getElementById('progress_bar');
var barSize = 100 + '%';

audio.addEventListener('timeupdate', updateProgress, false);


function updateProgress() {
    if (audio.currentTime > 0) {
        var value = 0;
        value = Math.floor((100 / audio.duration) * audio.currentTime);

        progress.style.width = value + '%';
    }       
    else{
        $('#play').html('<img src="img/play.png" width="70" height="70" />');

        $(curTimeDisplay).html('0:00');

        progress.style.width = 0;
    }

}

// CHANGING TIME ON PROGRESS BAR

$('#progress_bar').bind('click', function (e) {
    var $div = $(e.target);
    var $display = $div.find('#progress_bar');

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

    //$('#bar').width(x);

    var newtime = x*audio.duration/barSize;

    audio.currentTime = newtime;

    progress.style.width = x + '%';
});

CSS

#progress_bar {
border:1px solid #500012;
margin:1em 0;
cursor:pointer;
background:#f2f2f2;
width:100%;
height:20px;
display:inline-block;
padding:0;
}

#bar {
background:#77001A;
height:20px;
display:inline-block;
float:left;
width:0%;
}

Any help is appreciated :) Thanks!

Answer 1

The clue is in the error message. It wants a double value and your barSize var is calculated as a string when you initialize it. This happens when you add the + '%' to any number - javascript will change that from a numeric to a string value. Doing math operations on a string will give you 'NaN'.

But in this case, you want to advance the media proportionate to where the click occurred, so replace barSize with the pixel width of the total bar area. $('#progress_bar').width() should give you what you need. You will probably want to move the operands of the expression around like so...

Replace

var newtime = x*audio.duration/barSize;

With

var newtime = (x / $('#progress_bar').width()) * audio.duration;

Get to know the console and debugging tools in your browser. Adding breakpoints and watches is super helpful with code like this.