Воспроизведение нескольких звуков в Chrome - PullRequest
Новая
       0

Воспроизведение нескольких звуков в Chrome

3 голосов
/ 22 декабря 2011

Я занимаюсь разработкой HTML5-игры для Facebook. У меня есть следующий HTML-код: 

<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>

И следующий Javascript, который запускает звуки: 

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

Каждый щелчок мыши вызывает звуковое событие. Проблема в Chrome, где после десятка нажатий звуки исчезают или начинают играть с довольно большой задержкой (дюжина секунд). Но при игре в FF или Opera проблем нет.

1 Ответ

2 голосов
/ 22 декабря 2011

Это определенно ошибка, но я думаю, что это связано с реальным элементом, а не с частью воспроизведения звука.Вы можете легко обойти это, предварительно загрузив аудио, создавая новый аудиообъект для каждого воспроизведения звука, а затем, наконец, проверяйте звуковые объекты на каждом тике, чтобы определить, закончили ли они воспроизведение, чтобы вы могли очистить память.

Предварительная загрузка, конечно, выглядит примерно так: 

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

Создание экземпляра выглядит так: 

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

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

А проверка очистки будет выглядеть так: 

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

Я использую что-то подобное в своем собственном игровом движке HTML5, и до сих пор это прекрасно работало.

...