HTML5 音频：如何快速停止和重新启动剪辑？答案

【问题标题】：HTML5 audio: How to quickly stop and restart a clip?HTML5 音频：如何快速停止和重新启动剪辑？
【发布时间】：2012-11-06 01:46:54
【问题描述】：

见标题。我正在尝试每 300 毫秒连续播放 4 次音频文件。但是，剪辑超过 300 毫秒，因此它会忽略新的播放请求，直到剪辑完成播放。我正在寻找某种方法来每 300 毫秒停止和重新启动剪辑。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
    <audio id="note0440"><source src="0440.a4.wav" type="audio/wav"></audio>
    <script type="text/javascript">
        function playNote (loop) {
            var n = document.getElementById("note0440")
            if (loop > 4)
                return
            n.volume = 0.05
            // n.currentTime = 0
            n.pause()
            n.play()
            setTimeout("playNote("+(loop + 1)+")", 300)
        }
    </script>
    <div style="margin:50px"><button onclick="playNote(1)">Play Note</button></div>
</body>
</html>

这不起作用。无论是否使用n.currentTime = 0，它都不会停止并重新启动。

如果您需要一个 WAV 文件进行测试，这里是一个 WAV 文件：http://popstrip.com/misc/0440.a4.wav

【问题讨论】：

-在运行 .play() 之前运行 .stop() 有效吗？- 从那以后我实际上读过一些文档 - 看起来没有 .stop()。但正如一些人所建议的那样，暂停然后将时间设置回 0 应该会产生相同的效果。
另外，仅供参考，您的 doctype 指定的 html 版本甚至不支持音频标签。将其更改为

标签： html audio

【解决方案1】：

无论您在哪里调用停止，只需按照 -

的顺序执行以下操作

 n.pause();
 n.currentTime = 0;
 n.play();

【讨论】：

你在 Firefox 中试过这个吗？它适用于 Chrome，但不适用于 FF。谢谢！
正如@user931794 和shadow 指出的那样——这在Firefox 中还不能完全支持，但这应该是正确的方法。我想它现在又回到了 Flash。 =/

【解决方案2】：

来自the specification 的第 4.8.10.6 节

媒体。 duration 返回媒体资源的长度，以秒为单位，假设媒体资源的开始时间为零。

如果持续时间不可用，则返回 NaN。

为无限流返回 Infinity。

媒体。 currentTime [ = value ] 返回官方播放位置，以秒为单位。

可以设置，寻找给定的时间。

如果没有选中会抛出 InvalidStateError 异常媒体资源，或者是否有当前的媒体控制器。

因此规范不允许少于一秒的搜索。但是，不同的浏览器都会以不同的方式实现它（当然）。一些浏览器可能支持这一点，但要让它在当今所有已部署的浏览器中可靠地工作将是一个巨大的痛苦。假设你可以发出毫秒级的 seek，另一个问题是 js 解释器可能无法及时完成你的请求，即 seek 的处理时间比 seek 的值长，这会导致其他困难。

如果您确实需要小于一秒的粒度来进行搜索，我对您的建议是暂时放弃 html5 方法，并尽可能使用在主机上本地运行的插件或一些代码。

【讨论】：

知道这一点很方便。但我不认为他想寻求——我认为他只是想阻止它，如果时间太长了？
停止和启动必须发生在寻道边界 AFAIK
对开始有意义...但不知道停止？（虽然没有测试）
@shadow 所说的 - 目标不是亚秒级搜索（比如快 10 倍），而是快速连续播放 4 次剪辑。我只想快速听到剪辑重复（准确地说是每 300 毫秒）。谢谢！
那是 Firefox 的错。恐怕我会同意@user931794 - 它的支持还不够好。您可能会使用 Flash 来做这种事情。

【解决方案3】：

这个答案似乎是正确的https://stackoverflow.com/a/13243338/8554041 但是我在没有controls 属性的音频元素中尝试了它，但它没有用。它只能与https://stackoverflow.com/a/13243333/8554041 提到的audioElement.currentTime=1 一起使用，但是对于我的用例来说，0 之后的 1 秒时间太长了。

所以我尝试了audioElement.currentTime=null，它成功了！ ✅ 这是我在 sn-p 中的解决方案。

<audio src="/file.mp3" id="audioElement" />

audioElement.play()
audioElement.currentTime = null

它可以在 Chrome 87、Firefox 84 上运行，我很快会在其他浏览器上进行测试，我会在这里更新它。

谢谢。

【讨论】：

【解决方案4】：

这有点小题大做，但我是这样做的：

<audio src="blah.wav" type="audio/wav" preload="preload" id="blah0"></audio>
<audio src="blah.wav" type="audio/wav" preload="preload" id="blah1"></audio>
<audio src="blah.wav" type="audio/wav" preload="preload" id="blah2"></audio>
<audio src="blah.wav" type="audio/wav" preload="preload" id="blah3"></audio>

var audioStore = [
  document.getElementById('blah0'),
  document.getElementById('blah1'),
  document.getElementById('blah2'),
  document.getElementById('blah3'),
];

var n = 0;

function playBlah () {
  // Cycle through the clips
  audioStore[n].play();
  n = (n+1)%4;
}

尽可能多地执行此操作。好处是，您不会失去声音的尾音，因此您可以负担得起使用氛围（例如，游戏有时希望声音重叠）。

有更优雅的方法可以做到这一点。我实际上会编写一个函数，该函数接受一个音频文件名、一个 id 词干（如示例中的 blah）和一些循环遍历的元素（该声音的最大同时值），并返回一个可以调用的函数来播放声音。该函数还将元素添加到页面中。

最后，您可能应该至少使用 MP3 和 Wav 以获得最大的 x 浏览器兼容性，格式越多越好，因为 Wave 是主要的带宽消耗。

希望这会有所帮助。（我在 Win、Mac OSX 和 Linux 上的 Chrome、Firefox、Ice Weasel 中使用过这种技术

【讨论】：