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

新手上路,请多包涵

这是我关于 Stack Overflow 的第一个问题;如果我做错了,我深表歉意。

我正在尝试使用 Web Audio API 为自己创建一个不错的小音频播放器。但是,我在尝试创建一个“搜索”功能以便用户在歌曲中跳过时遇到了问题。

HTML:

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

脚本:

 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 解决此问题的许多其他尝试。

我只是有点困惑。我真诚地感谢你们提供的任何帮助。美好的一天,伙计们。

原文由 Brian 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 510
2 个回答

这本身不是 jQuery 问题。

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

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

原文由 Kevin Ennis 发布,翻译遵循 CC BY-SA 3.0 许可协议

我已经解决了我的问题。 jQuery 似乎不能很好地与网络音频 API 配合使用。

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

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

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

原文由 Brian 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题