Question

这是我关于Stack Overflow的第一个问题;道歉，如果我做错了。

我正在尝试使用Web Audio API为自己创建一个漂亮的小音频播放器。但是，我试图创建一个＆＃34; seek＆＃34;用户可以在歌曲中跳过。

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

错误：

无法设置＆＃39; currentTime＆＃39;属性＆＃39; HTMLMediaElement＆＃39;：提供的double值是非限制性的。

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

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

我试过了：

parseFloat(e.clientX - seekslider.offsetLeft);

除了使用parseFloat解决此问题的许多其他尝试之外。

我只是有点困惑。我真诚地感谢所有人提供的帮助。美好的一天。

Answer 1

这本身并不是一个jQuery问题。

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

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

Answer 2

我已经解决了我的问题。似乎jQuery与Web音频API不兼容。

改 var seekslider = $('#seekslider');到

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

使程序正常运行。我会留下这个，以防它绊倒任何其他新手开发者，比如我自己。

Answer 3

isFinite（）将解决此错误：

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

HTML5音频元素 - 搜索滑块 - 无法设置＆＃39; currentTime＆＃39;属性＆＃39; HTMLMediaElement＆＃39;：提供的double值是非限定的

3 个答案: