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

506

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

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

  • 7
    Поскольку это HTML5, есть <audio> . Этот элемент будет иметь соответствующие JS-хуки для «play», «pause» и т. Д.
  • 1
    @ Марк Хорошо, не могли бы вы предоставить некоторую информацию о том, что это за хуки?
Показать ещё 3 комментария
Теги:
html5-audio

14 ответов

1109
Лучший ответ

Если вы не хотите связываться с элементами 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>
  • 2
    Есть ли форматы файлов, рекомендуемые для Интернета?
  • 8
    Этот метод работает для воспроизведения mp3, но не для файлов wav. Есть ли способ воспроизведения файлов WAV?
Показать ещё 14 комментариев
159

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

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

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

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

36

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/

  • 2
    Как правило, когда вы даете ссылку на этом сайте, вы предоставляете некоторую информацию по ссылке в вашем сообщении. Не рекомендуется просто публиковать простую ссылку и говорить "нажмите на эту ссылку".
  • 6
    Извините, я подумал, что сайт сам себя объяснит. Я отредактирую это тогда
25

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

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

17

Просто с 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');
});

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

  • 0
    Это проигрывает все аудио теги с class = "my_audio" одновременно. Как вы играете один за другим (в списке воспроизведения)?
  • 0
    @stomy Вы опубликовали это как собственный вопрос на StackOverflow? Если вы, дайте мне знать. Я мог бы помочь вам с этим. в противном случае, я предложу это - вы могли бы (после того, как вы начнете проигрывать песню) прослушать ended события, которое будет отправлено, и запустить следующий аудиофайл в списке (предположительно, вы отслеживаете либо в памяти DOM, JS, так далее). developer.mozilla.org/en-US/docs/Web/Events/ended
Показать ещё 1 комментарий
10

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

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);
}
9
new Audio('./file.mp3').play()
5

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

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

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

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

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

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

5

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

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

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

document.getElementById('myAudio').play();
  • 0
    Вы хотели использовать </a> или </ audio>. Просто любопытно.
  • 0
    Я использовал тег <audio>.
Показать ещё 1 комментарий
3
var song = new Audio();
song.src = 'file.mp3';
song.play();
2

если вы хотите воспроизводить свой звук при каждом открытии страницы, выполните следующие действия.

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

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

2

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

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

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

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

import $buzz from 'musquito';

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

buzz.play();

Библиотека также поддерживает Audio Sprites.

0

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

Я бы порекомендовал реализовать звуки воспроизведения, наиболее близкие к пользовательскому событию взаимодействия.

var soundPlayer = {
  audio: null,
  muted: false,
  playing: false,
  _ppromis: null,
  puse: function () {
      this.audio.pause();
  },
  play: function (file) {
      if (this.muted) {
          return false;
      }
      if (!this.audio && this.playing === false) {
          this.audio = new Audio(file);
          this._ppromis = this.audio.play();
          this.playing = true;

          if (this._ppromis !== undefined) {
              this._ppromis.then(function () {
                  soundPlayer.playing = false;
              });
          }

      } else if (!this.playing) {

          this.playing = true;
          this.audio.src = file;
          this._ppromis = soundPlayer.audio.play();
          this._ppromis.then(function () {
              soundPlayer.playing = false;
          });
      }
  }
};

И реализовать это следующим образом:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>
  • 0
    Не работает на Safari, если я запускаю автозапуск из JS.
  • 1
    @ maki10 Привет, я тестировал его в Safari Desktop версии 12.0.3 (14606.4.5), и он работает здесь: jsfiddle.net/xf5zyv4q/5
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню