HTML5 音频元素 - 查找滑块 - 无法在“HTMLMediaElement”上设置“当前时间”属性:提供的双精度值

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

本文关键字：属性 当前时间 时间 双精度 设置 查找 HTML5 HTMLMediaElement 音频 元素      更新时间：2023-09-26

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

我正在尝试使用 Web 音频 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解决此问题之外

。

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

这本身不是jQuery问题。

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

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

我已经解决了我的问题。 看起来jQuery不能很好地与Web音频API配合使用。

改变 var seekslider = $('#seekslider');至

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

使程序工作。 我会把它留在那里，以防它绊倒任何其他新手开发人员，比如我自己。

isFinite（） 将解决此错误：

if (!isFinite(seekto)) {
    console.log(seekto);
    audio.currentTime = seekto;
}
相关文章：