javascript - HTML5 音频元素 - 搜索滑块 - 无法在 'HTMLMediaElement' 上设置 'currentTime' 属性：提供的双精度值不是有限数

这是我在 Stack Overflow 上的第一个问题；如果我做错了，请见谅。

我正在尝试使用 Web Audio API 为自己创建一个小巧的音频播放器。然而，在尝试为用户创建一个“跳转”功能以在歌曲中跳转时，我遇到了一个问题。

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

错误：

无法在 'HTMLMediaElement' 上设置 'currentTime' 属性：提供的双精度值不是有限数。

现在，console.log(typeof(seekslider.value)) 返回的是数字。然而，console.log(seekslider.value) 返回的是 NaN。

我理解 currentTime 的值是带有小数点的浮点数。

我已经尝试过：

parseFloat(e.clientX - seekslider.offsetLeft);

除了使用 parseFloat 尝试解决这个问题的许多其他方法之外。

我只是有点困惑。我真诚地感谢大家提供的任何帮助。大家好。

答案＃1

这本身并不是 jQuery 的问题。

问题是 JQuery 对象没有 offsetLeft。只有实际的 DOM 元素才有这个属性。

所以实际上你做的是 e.clientX - undefined，当然这就是 NaN。

答案＃2

我已经解决了我的问题。看起来 jQuery 与 Web Audio API 配合得不是很好。

将 var seekslider=$ ('#seekslider'); 改为

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

让程序运行起来了。我会保留这个，以防它让像我这样的其他新手开发者遇到麻烦。