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

Posted

技术标签:

【中文标题】播放 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

以上是关于播放 html5 的 Audio 对象的多个实例的主要内容,如果未能解决你的问题,请参考以下文章

html5怎么可以添加多个音频然后一个接着一个播放??、急急急

如何在 iOS 中播放多个 html5 音频文件?

HTML5我只做到单曲播放,能否实现多曲音乐按顺序自动播放,请问诸位高手怎么样标注和提供<audio>这编码?

html5 audio标签相关知识点总结

从 js/jquery 中的对象数组播放音频文件

html5 audio 顺序播放