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

Question

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

我正在尝试使用网络音频 API 为我自己创建一个不错的小音频播放器。但是，我运行在尝试创建一个 "seek" 功能让用户在歌曲中跳过时遇到了问题。

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

错误：

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

现在，console.log(typeof(seekslider.value)) returns 一个数字。但是，console.log(seekslider.value) returns NaN.

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

我尝试过：

parseFloat(e.clientX - seekslider.offsetLeft);

除了使用 parseFloat.

解决此问题的许多其他尝试之外

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

Answer 1

我的问题已经解决了。 jQuery 似乎不能很好地播放网络音频 API。

已更改 var seekslider = $('#seekslider'); 至

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

使程序运行。我将保留它，以防它绊倒任何其他新手开发人员，例如我自己。

Answer 2

这本身不是 jQuery 问题。

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

如此有效，您所做的是 e.clientX - undefined，当然是 NaN。

Answer 3

isFinite() 将解决此错误：

if (!isFinite(seekto)) {
    console.log(seekto);
    audio.currentTime = seekto;
}

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

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

html

javascript

audio

jquery

web-audio-api