在Chrome中播放多个声音 [英] Playing multiple sounds in Chrome

问题描述

我正在开发面向Facebook的HTML5游戏。我有以下HTML代码：

 < audio style =visibility：hidden; controls =controlsid =sound-0> 
< source src =sound / sound_new.oggtype =audio / ogg/> 
< source src =sound / sound_new.mp3type =audio / mp3/> 
< / audio> 
< audio style =visibility：hidden; controls =controlsid =sound-1> 
< source src =sound / sound_new.oggtype =audio / ogg/> 
< source src =sound / sound_new.mp3type =audio / mp3/> 
< / audio> 
< audio style =visibility：hidden; controls =controlsid =sound-2> 
< source src =sound / sound_new.oggtype =audio / ogg/> 
< source src =sound / sound_new.mp3type =audio / mp3/> 
< / audio> 
< audio style =visibility：hidden; controls =controlsid =sound-3> 
< source src =sound / sound_new.oggtype =audio / ogg/> 
< source src =sound / sound_new.mp3type =audio / mp3/> 
< / audio> 
< audio style =visibility：hidden; controls =controlsid =sound-4> 
< source src =sound / sound_new.oggtype =audio / ogg/> 
< source src =sound / sound_new.mp3type =audio / mp3/> 
< / audio> 
< audio style =visibility：hidden; controls =controlsid =sound-5> 
< source src =sound / sound_new.oggtype =audio / ogg/> 
< source src =sound / sound_new.mp3type =audio / mp3/> 
< / audio> 
  

以下是启动声音的Javascript：

  if（this.hitFlag> 6）this.hitFlag = 1; 
 var soundElem = document.getElementById（'sound-'+（this.soundFlag％6）+'0'）; 
 soundElem.play（）; 
  

每次点击鼠标都会触发声音事件。问题在于，Chrome在点击数十次之后声音消失或者开始播放的时间相当长（十几秒）。
但在FF或Opera中播放时没有问题。

解决方案

这绝对是一个错误，但我认为它必须处理实际的元素，而不是声音播放部分。您可以通过预加载音频，为每次播放声音实例化一个新的音频对象，然后最后在每个节拍处检查声音对象以确定它们是否已完成播放，以便清理内存来轻松解决此问题。 / p>

预加载当然是这样的：

  var _mySnd =新音频（'我/ snd / file / is / here.mp3'）; 
  

实例化就像：

  var _sndCollection = []; 
 var n = _sndCollection.length; 
 
 _sndCollection [n] = new Audio（）; 
 _sndCollection [n] .src = _mySnd.src; 
 _sCollection [n] .play（）; 
  

清理检查将会是：

<$对于（var i = 0; i< _sndCollection.length; i ++）
{
if（_sndCollection [i] .currentTime> = _sndCollection [i]），p $ p> .duration）
{
_sCollection.splice（i，1）;
i--;




$ b我在我自己的HTML5游戏引擎中使用了类似的东西，而且迄今为止它的运行情况很好。

I am developing a HTML5 game for Facebook. I have the following HTML code:

<audio style="visibility: hidden;" controls="controls" id="sound-0">
    <source src="sound/sound_new.ogg" type="audio/ogg"/>
    <source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-1">
    <source src="sound/sound_new.ogg" type="audio/ogg"/>
    <source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-2">
    <source src="sound/sound_new.ogg" type="audio/ogg"/>
    <source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-3">
    <source src="sound/sound_new.ogg" type="audio/ogg"/>
    <source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-4">
    <source src="sound/sound_new.ogg" type="audio/ogg"/>
    <source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-5">
    <source src="sound/sound_new.ogg" type="audio/ogg"/>
    <source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>

And the following Javascript that starts the sounds:

if (this.hitFlag > 6) this.hitFlag = 1;
var soundElem = document.getElementById('sound-' + (this.soundFlag % 6) + '0' );
soundElem.play();

Each click of the mouse triggers a sound event. The problem is with Chrome where after dozen of clicks the sounds disappear or start playing with quite a big delay(a dozen of seconds). But there is no problem when playing in FF or Opera.

解决方案

It's definitely a bug, but I think it has to do with the actual element and not the sound playing portion. You can easily get around this by preloading your audio, instantiating a new audio object for each playing of a sound, then finally checking the sound objects at each tick to determine whether or not they've finished playing so you can clean up memory.

Preloading is, of course, something like:

var _mySnd = new Audio('my/snd/file/is/here.mp3');

Instantiating is like:

var _sndCollection = [];
var n = _sndCollection.length;

_sndCollection[n] = new Audio();
_sndCollection[n].src = _mySnd.src;
_sndCollection[n].play();

And the cleanup check would be:

for (var i = 0; i < _sndCollection.length; i++)
{
    if (_sndCollection[i].currentTime >= _sndCollection[i].duration)
    {
        _sndCollection.splice(i, 1);
        i--;
    }
}

I use something like this in my own HTML5 game engine, and it's worked perfectly thus far.

这篇关于在Chrome中播放多个声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！