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

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

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

13 ответов


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

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

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

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


это легко, просто получите свой audio элемент и называем play() способ:

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

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

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


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

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

Он поддерживает 100% Flash-Free audio на 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/


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

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


легко с 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');
});

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


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

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

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);
}

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

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

просто используйте JavaScript, чтобы воспроизвести его, например:

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

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

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

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

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

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>

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


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

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

Если вы хотите воспроизводить аудио при открытии страницы, сделайте так.

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

и вызовите этот playMusic () всякий раз, когда вам нужно в вашем коде игры.


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

вы можете использовать Web Audio API для воспроизведения звуков. Есть довольно много аудиобиблиотек, таких как howler.Яш, soundjs и т. д. Если вы не беспокоитесь о старых браузерах, вы также можете проверитьhttp://musquitojs.com/. Он предоставляет простой API для создания и воспроизведения звуков.

например, для воспроизведения звука все, что вам нужно сделать, это.

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

библиотека также поддерживает аудио спрайты.