播放 html5 的 Audio 对象的多个实例

Posted 2023-03-04

【中文标题】播放 html5 的 Audio 对象的多个实例

【英文标题】：Play multiple instances of an html5's Audio object

【发布时间】：2011-06-11 07:56:43

【问题描述】：

我正在用 javascript 制作一个小游戏，它需要一些音频才能获得更好的用户体验。 我遇到的主要问题是我必须多次播放一首歌曲/声音，有时同时播放。 但是，如果我 cloneNode 音频对象，音频会从服务器再下载一次，所以只在后面播放，因为它必须先下载。所以在正常游戏过程中声音可以下载超过100次！

由于我在互联网上找不到答案，所以我问你:)

请注意，我想使用自己的代码而不是库。

【问题讨论】：

我认为它被缓存了。

【参考方案1】：

我尚未对此进行测试，但可能值得尝试将数据 URI 用于需要同时播放的音频剪辑的 src。这将在您克隆元素时防止服务器命中 - 尽管每次下载它的事实听起来确实像浏览器错误。我认为应该从浏览器缓存中提取它。

看起来有人已经尝试过了：Is it possible to use data URIs in video and audio tags?

【参考方案2】：

解决这个问题的方法是制作一个制作和播放音频元素的函数，所有这些都在一个函数中。我想应该是这样的：

var makePlayAudio = function(src) 
var aud = new Audio();
aud.src = src;
aud.play();

然后，您可以随时调用它。

注意：我只在 Chrome 中测试过。

【讨论】：

这不适用于移动浏览器，因为没有缓存。

【参考方案3】：

无需 cloneNode 音频对象。只需从 JavaScript 对同一个对象调用 play() ，它就会在每次调用该函数时播放。如果它已经在播放，它将重新启动。见https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox#Controlling_media_playback

【讨论】：

发帖人希望同时播放同一声音的多个实例。

所以，使用 cloneNode().play()。

@Triang3l 性能如何？也许有更好的方法使用 WebAudio API