Question

见标题。我试图连续4次播放音频文件，每300毫秒。但是，剪辑长度超过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文件：http://popstrip.com/misc/0440.a4.wav

Answer 1

你在哪里呼叫停止只是按照 -

的顺序执行以下操作

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

Answer 2

来自the specification

的第4.8.10.6节

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

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

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

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

如果没有选中，将抛出InvalidStateError异常   媒体资源或当前媒体控制器。

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

我建议你现在放弃html5方法，如果你真的需要小于1秒的搜索粒度，并且尽可能使用插件或在主机上本地运行的代码。

Answer 3

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

所以我尝试了 audioElement.currentTime=null 并且成功了！ ✅ 这是我的解决方案片段。

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

audioElement.play()
audioElement.currentTime = null

它适用于 Chrome 87、Firefox 84，我很快就会在其他浏览器上进行测试，我会在这里更新。

谢谢。

Answer 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中的这种技术）

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

4 个答案: