HTML5 audio element - seek slider - Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite

Question

This is my first question on Stack Overflow; apologies if I have done it wrong.

I am attempting to use the Web Audio API to create a nice little audio player for myself. However, I have run into a problem in trying to create a "seek" function for a user to skip around in the song.

HTML:

<p>Seek Slider</p>
<input id="seekslider" type="range" min="0" max="100" value="0" />

JavaScript:

var seekslider = $('#seekslider');

$(seekslider).mousedown(function(e) {
  seeking = true;
  seek(e);
});

$(seekslider).mousemove(function(e) {
  seek(e);
});

$(seekslider).mouseup(function(e) {
  seeking = false;
});

function seek(e) {
  if (seeking) {
    seekslider.value = e.clientX - seekslider.offsetLeft;
    console.log(typeof(seekslider.value));
    console.log(seekslider.value, audio.currentTime);
    seekto = audio.duration * (seekslider.value / 100);
    console.log(seekto);
    audio.currentTime = seekto;
  }
}     

The error:

Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.

Now, console.log(typeof(seekslider.value)) returns a number. however, console.log(seekslider.value) returns NaN.

I understand the value of currentTime is a float with a decimal point.

I have attempted:

parseFloat(e.clientX - seekslider.offsetLeft);

In addition to numerous other attempts at solving this using parseFloat.

I am just a bit confused. I sincerely appreciate any help y'all have to offer. Good day folks.

Solution 1

This isn't a jQuery problem, per se.

The issue is that a JQuery object doesn't have offsetLeft. Only actual DOM elements have that property.

So effectively what you're doing is e.clientX - undefined, which of course is NaN.

Solution 2

I have solved my problem. It appears that jQuery does not play well with the web audio API.

Changed var seekslider = $('#seekslider'); to

var seekslider = document.getElementById('seekslider');

Made the program work. I will leave this up in case it trips up any other novice developers such as myself.

Comments

[Brian]

Hey, Kevin. Thanks for that explanation, very clear. Greatly appreciated!