Как воспроизвести аудио?

SoundManager 2 предоставляет простой в использовании API, который позволяет воспроизводить звук в любых современных браузерах, включая IE 6+. Если браузер не поддерживает HTML5, используется Flash для воспроизведения звука. Если вам нужно строгое HTML5 без Flash, вы можете установить опцию preferFlash=false.

Эта библиотека обеспечивает 100% воспроизведение аудио без Flash на iPad, iPhone (iOS4) и других устройствах и браузерах с поддержкой HTML5.

Использование очень просто:

<script src="soundmanager2.js"></script>
<script>
    // Указываем путь к SWF-файлам Flash, если это необходимо...
    soundManager.url = '/path/to/swf-files/';

    soundManager.onready(function() {
        soundManager.createSound({
            id: 'mySound',
            url: '/path/to/an.mp3'
        });

        // ...и воспроизводим звук
        soundManager.play('mySound');
    });
</script>

Вот демонстрация работы библиотеки: демо SoundManager 2

Вы можете создать скрытый элемент <audio> и воспроизвести звук, используя следующий код:

function playSound(url) {
  var ourAudio = document.createElement('audio'); // Создаем элемент audio с помощью DOM
  ourAudio.style.display = "none"; // Скрываем элемент audio
  ourAudio.src = url; // Устанавливаем источник на наш URL
  ourAudio.autoplay = true; // Автоматически начинаем воспроизведение звука
  ourAudio.onended = function() {
    this.remove(); // Удаляем элемент после окончания воспроизведения
  };
  document.body.appendChild(ourAudio); // Добавляем элемент audio в тело документа
}

Эта функция создает новый элемент <audio>, устанавливает его источник на переданный URL, скрывает элемент (чтобы пользователь не видел его) и начинает воспроизведение автоматически. После завершения воспроизведения элемент удаляется из DOM.

Если у вас есть дополнительные вопросы или нужна помощь, не стесняйтесь спрашивать!

Если вы получаете следующую ошибку:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Это значит, что пользователю необходимо сначала взаимодействовать с веб-сайтом (как говорится в сообщении об ошибке). В этом случае вам нужно использовать событие click или другой обработчик событий, чтобы пользователь мог взаимодействовать с вашим сайтом.

Если вы хотите автоматическую загрузку аудио и не хотите, чтобы пользователь сначала взаимодействовал с документом, вы можете использовать setTimeout.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500);

<audio id="mySound" src="sound.mp3"></audio>

Звук начнет воспроизводиться через 0.5 секунды.

Ваш код для воспроизведения аудиофайла выглядит правильно, однако стоит учитывать несколько моментов. Во-первых, убедитесь, что файл file.mp3 действительно находится по указанному пути. Во-вторых, имейте в виду, что в большинстве современных браузеров воспроизведение аудио может блокироваться, если оно не инициируется в результате взаимодействия пользователя (например, по клику на кнопку).

Вот пример, как можно организовать воспроизведение аудио по клику на элемент:

document.getElementById('playButton').addEventListener('click', function() {
    const audio = new Audio('./file.mp3');
    audio.play().catch(error => {
        console.error('Ошибка воспроизведения аудио:', error);
    });
});

Не забудьте создать элемент (например, кнопку) с id="playButton" в вашем HTML, чтобы код сработал корректно. Кроме того, добавление обработчика ошибок при вызове play() поможет вам понять, если что-то пойдет не так.

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

1. Определите необходимые аудиофайлы в вашем HTML.
2. Создайте кнопку "Начать игру" с обработчиком события onclick.
3. Когда кнопка нажата, воспроизведите и приостановите все аудиофайлы, кроме того, который вы хотите воспроизвести в начале.

Поскольку все аудиофайлы будут "воспроизведены" по одному и тому же событию нажатия, вы сможете воспроизводить их в любое время в игре без ограничений.

Обратите внимание, что для лучшей совместимости не используйте файлы в формате WAV, так как Microsoft не поддерживает их.

Используйте MP3 и OGG — это охватывает все устройства.

Пример:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает элемент audio.
</audio>

Повторите это по мере необходимости для всего аудио в игре.

Затем:

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

Повторите это по мере необходимости, но не ставьте на паузу аудио, которое вы хотите услышать, когда игра начинается.