Вы использовали ответ отсюда , который в какой-то момент приводит к тому, что sh обрабатывает браузер, потому что вы либо создаете проблему с памятью, либо заполняете DOM элементами, которые должен обрабатывать браузер - поэтому вам следует переосмыслить свой подход И, как вы выяснили, он не будет работать для интенсивного использования в большинстве браузеров, таких как safari или FireFox
Если заглянуть глубже в спецификацию тега <audio>, становится ясно, что есть много вещей с этим просто невозможно обойтись, что неудивительно, поскольку он был разработан для воспроизведения мультимедиа. Одно из ограничений включает в себя -> Нет мелкой синхронизации звука.
Таким образом, вы должны найти другой способ для того, что вы хотите, мы используем Web Audio API, предназначенный для онлайн-видеоигр.
Web Audio API
AudioContext для управления и воспроизведения все звуки. Чтобы создать звук с помощью API-интерфейса Web Audio, создайте один или несколько источников звука и подключите их к месту назначения звука, предоставленному экземпляром AudioContext (обычно динамиком). AudioBuffer
С API Web Audio аудиофайлы могут воспроизводиться только после их загрузки в буфер. Загрузка звуков требует времени, поэтому ресурсы, используемые в анимации / игре, должны загружаться при загрузке страницы, в начале игры или на уровне или постепенно, пока игрок играет.
Основы c шаги
- Мы используем XMLHttpRequest для загрузки данных в буфер из аудиофайла.
- Далее мы делаем асинхронный обратный вызов и отправляем фактический запрос на загрузку.
- Как только звук буферизован и декодирован, он может быть запущен мгновенно.
- Каждый раз, когда он срабатывает, создается другой экземпляр буферизованного звука.
Ключевая особенность звуковых эффектов в играх заключается в том, что их может быть много одновременно. Вот вам пример «пулемета»: представьте, что вы находитесь в середине перестрелки, стреляющего из пулемета. Пулемет стреляет много раз в секунду, вызывая одновременное воспроизведение десятков звуковых эффектов. Это где API Web Audio действительно сияет. Простой пример для вашего приложения:
/* global AudioContext:true,
*/
var clickingBuffer = null;
// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
function loadClickSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
if (!buffer) {
console.log('Error decoding file data: ' + url);
return;
}
clickingBuffer = buffer;
});
request.onerror = function() {
console.log('BufferLoader: XHR error');
};
request.send();
};
}
function playSound(buffer, time, volume) {
var source = context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(context.destination); // connect the source to the context's destination (the speakers)
var gainNode = context.createGain(); // Create a gain node
source.connect(gainNode); // Connect the source to the gain node
gainNode.connect(context.destination); // Connect the gain node to the destination
gainNode.gain.value = volume; // Set the volume
source.start(time); // play the source at the deisred time 0=now
}
// You call with in your document ready
loadClickSound('sounds/click.wav');
//and this plays the sound
playSound(clickingBuffer, 0, 1);
Теперь вы можете поиграться с разными временами и вариациями громкости, например, путем введения случайного фактора. Если вам нужно более сложное решение с различными звуками щелчков (хранится в буфере). массив) и вариации объема / расстояния, это будет более длинный кусок кода.