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

Posted 2023-02-25

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

【英文标题】：HTML5 audio element - seek slider - Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite

【发布时间】：2016-01-14 18:42:10

【问题描述】：

这是我关于 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 不能很好地与网络音频 API 配合使用。

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

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

让程序运行起来。我会保留它，以防它绊倒像我这样的其他新手开发者。

【参考方案3】：

isFinite() 将解决此错误：

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