Воспроизведение аудио с помощью Javascript?

Question

Я делаю игру с HTML5 и Javascript.

Как я могу воспроизводить игровой звук через Javascript?

Answer 1

Если вы не хотите связываться с элементами HTML:

var audio = new Audio('audio_file.mp3');
audio.play();

var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
audio.play();

Используется интерфейс HTMLAudioElement, который воспроизводит звук так же, как элемент <audio> .

---

Если вам нужна дополнительная функциональность, я использовал библиотеку howler.js и нашел ее простой и полезной.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

Answer 2

Это просто, просто получите элемент audio и вызовите метод play():

document.getElementById('yourAudioTag').play();

Посмотрите этот пример: http://www.storiesinflight.com/html5/audio.html

Этот сайт раскрывает некоторые другие интересные вещи, которые вы можете сделать, такие как load(), pause() и некоторые другие свойства элемента audio.

Answer 3

http://www.schillmania.com/projects/soundmanager2/

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

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

Использование так же просто, как:

<script src="soundmanager2.js"></script>
<script>
    // where to find flash SWFs, if needed...
    soundManager.url = '/path/to/swf-files/';

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

        // ...and play it
        soundManager.play('mySound');
    });
</script>

Вот демонстрация этого в действии: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Answer 4

Это довольно старый вопрос, но я хочу добавить немного полезной информации. Автор темы упомянул, что он "making a game". Поэтому для всех, кому нужен звук для разработки игр, есть лучший выбор, чем просто тег <audio> или HTMLAudioElement. Я думаю, вы должны рассмотреть возможность использования Web Audio API :

В то время как для аудио в сети больше не требуется плагин, аудио-тег имеет значительные ограничения для реализации сложных игр и интерактивных приложений. Web Audio API - это высокоуровневый JavaScript API для обработки и синтеза аудио в веб-приложениях. Целью этого API является включение возможностей, имеющихся в современных игровых звуковых движках, и некоторых задач микширования, обработки и фильтрации, которые встречаются в современных приложениях для создания аудиозаписей в настольных компьютерах.

Answer 5

Easy с Jquery

// установка звуковых тегов без предварительной загрузки

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// добавление jquery для загрузки

$(".my_audio").trigger('load');

// запись методов для воспроизведенияи остановка

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// решить, как управлять звуком

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

РЕДАКТИРОВАТЬ

Чтобы ответить на вопрос @ Stomy, вот как выбудет использовать этот подход для воспроизведения списка воспроизведения :

Установите ваши песни в объекте:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

Используйте триггер иВоспроизведение функций, как и раньше:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

Динамически загружать первую песню:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

Сброс источника звука для следующей песни всписок воспроизведения, когда заканчивается текущая песня:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

См. здесь для примера этого кода в действии.

Answer 6

new Audio('./file.mp3').play()

Answer 7

Добавьте скрытый звук и воспроизведите его.

function playSound(url){
  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;
  audio.autoplay = true;
  audio.onended = function(){
    audio.remove() //Remove when played.
  };
  document.body.appendChild(audio);
}

Answer 8

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

Uncaught (в обещании) DOMException: play () не выполнен, поскольку пользователь не взаимодействовал с документом первым.

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

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

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

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

Звук начнется через 0,5 секунды.

Answer 9

Довольно простое решение, если у вас есть тег HTML, как показано ниже:

<audio id="myAudio" src="some_audio.mp3"></audio>

Просто используйте JavaScript для воспроизведения, вот так:

document.getElementById('myAudio').play();

Answer 10

var song = new Audio();
song.src = 'file.mp3';
song.play();