11

见标题。我正在尝试每 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

4

4 回答 4

32

无论您在哪里呼叫停止，只需按以下顺序执行以下操作 -

 n.pause();
 n.currentTime = 0;
 n.play();
于 2012-11-06T02:02:48.567 回答
3

来自规范的第 4.8.10.6 节

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

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

为无界流返回 Infinity。

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

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

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

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

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

于 2012-11-06T02:01:14.810 回答
0

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

所以我试过audioElement.currentTime=null了，它奏效了！✅ 这是我在片段中的解决方案。

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

audioElement.play()
audioElement.currentTime = null

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

谢谢。

于 2021-01-27T13:58:05.333 回答
-1

这有点像黑客，但我这样做：

<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 中使用过这种技术）

于 2014-06-20T11:34:47.007 回答