Question

我正在玩制作带有JavaScript和HTML5的音频播放器。现在我遇到了一个错误，当我尝试更改文件，然后根据滑块的位置播放它时，player.duration是NaN，因为还没有加载到那么远。如果我发出警报，那么它可以正常工作。所以基本上如果浏览器只是勉强挂起，它会给它足够的时间，而当它直接运行时，它不会首先完成加载。

player.src = file;
// The next command is reached before the full effect of the above line is finished
player.currentTime = (slider.offsetLeft) / trackWidth * player.duration;

还有一些其他的东西，但实质上，我需要一种方法在那里稍微停顿一下，或者在第二行运行之前等待一切完成。我意识到我可以在第二行使用setTimeout，但是该行在函数中有几个位置，所以我希望能在第一行之后添加“一次修复”。

Answer 1

您需要做的是等待音频的元数据可用。这可以通过等待loadedmetadata event并在该事件被触发后在回调中执行剩余的代码来实现。

player.addEventListener('loadedmetadata', function() {
    player.currentTime = (slider.offsetLeft) / trackWidth * player.duration;
    // and the remainder of your code relating to the audio element
}, false);

唯一可能出现的问题是，如果文件非常快速加载（即它已经在缓存中），则事件可能会在附加事件处理程序之前触发。添加事件侦听器后，最好分配src属性。

Answer 2

您可以使用setTimeout函数稍微延迟运行代码，例如。 0.5秒。

setTimeout(function() {
    // your code
}, 500);

此外，您可以检查播放器是否已加载，如果没有，请将新超时设置为等待一段时间。

等待其他东西在本机JavaScript中完成

2 个答案: