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

693

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

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

Райан С.
источник
9
Так как это HTML5, есть <audio>. Этот элемент будет иметь соответствующие JS-хуки для «play», «pause» и т. Д.
Marc B
1
@Marc Хорошо, не могли бы вы предоставить некоторую информацию о том, что это за хуки?
Райан С.
14
Могу поспорить, что вам интересно, где находится документация для всех аудио методов: stackoverflow.com/questions/4589451/…
Брайан Даунинг

Ответы:

1335

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

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

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


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

Uri
источник
9
Этот метод работает для воспроизведения mp3, но не для файлов wav. Есть ли способ воспроизведения файлов WAV?
user781486
12
@ user3293156 Этот метод поддерживает те же форматы, что и HTML5 <audio>. В Википедии есть таблица совместимости аудиоформатов . new Audio()может воспроизводить файлы WAV во всех браузерах, кроме Internet Explorer.
Рори О'Кейн
284
@ RoryO'Kane, чтобы все могли играть в аудиоформат Microsoft, кроме Microsoft? LOL
Дейв Кузино,
10
Несколько предостережений: (1) Firefox не будет проигрывать mp3 . Вместо этого вам понадобится файл ogg. (2) Safari / iOS не будет воспроизводиться, если вы передаете контент через https . Вам нужно иметь действующий сертификат.
Питер
9
Обратите внимание, что с апреля 2018 года в Chrome не будут воспроизводиться аудиофайлы, если пользователь хотя бы один раз не щелкнул в документе. Смотрите здесь .
Нильс Линдеманн
182

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

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

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

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

shanabus
источник
38

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/

LordZardeck
источник
3
Как правило, когда вы даете ссылку на этом сайте, вы предоставляете некоторую информацию по ссылке в вашем сообщении. Не рекомендуется просто публиковать простую ссылку и говорить "нажмите на эту ссылку".
Райан С.
7
Извините, я подумал, что сайт сам себя объяснит. Я отредактирую это тогда
LordZardeck
32

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

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

Константин Смолянин
источник
22

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

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

кибернетический
источник
Это проигрывает все аудио теги с class = "my_audio" одновременно. Как вы играете один за другим (в списке воспроизведения)?
стомия
@stomy Вы опубликовали это как собственный вопрос на StackOverflow? Если вы, дайте мне знать. Я мог бы помочь вам с этим. в противном случае я предложу это - вы могли бы (после начала воспроизведения песни) прослушать endedсобытие, которое будет выпущено, и запустить следующий аудиофайл в списке (вероятно, вы отслеживаете либо в DOM, памяти JS и т. д. ). developer.mozilla.org/en-US/docs/Web/Events/ended
SGnL
@stomy, пожалуйста, проверьте РЕДАКТИРОВАТЬ в моем ответе, чтобы создать список воспроизведения, который воспроизводит песни последовательно.
Кибернетический
15

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

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);
}
Rey
источник
14

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

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

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

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

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

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

Реза Саадати
источник
Не работает Не в Хроме. Уже нет.
Arfeo
5
var song = new Audio();
song.src = 'file.mp3';
song.play();
Мамадалии
источник
простой и рабочий код.
Арш Хан
5

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

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

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

document.getElementById('myAudio').play();
Бен Стаффорд
источник
Вы хотели использовать </a> или </ audio>. Просто любопытно.
Купер
Я использовал тег <audio>.
Бен Стаффорд
1
Бен, в твоем примере был неправильный закрывающий тег, поэтому @Cooper задал этот вопрос. Я отредактировал ответ с правильным закрывающим тегом.
Sgnl
4

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

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

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>
talsibony
источник
Не работает на Safari, если я запускаю автозапуск из JS.
maki10
1
@ maki10 Привет, я протестировал его в Safari Desktop версии 12.0.3 (14606.4.5), и он работает здесь: jsfiddle.net/xf5zyv4q/5
talsibony
Также работает на
Safari
Я обновляю ссылку для моей проблемы jsfiddle.net/6431mfb5 . Для меня автозапуск работает только в первый раз в сафари и более новые.
maki10
@ maki10, потому что вы называете это без взаимодействия с пользователем, автозапуск не будет работать без взаимодействия с пользователем, как, например, касание клика, удалите последнюю строку: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/… );
Талсибони
3

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

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
Билал Соомро
источник
3

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

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

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

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

Используйте mp3 и ogg, который охватывает все устройства

Пример:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

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

Затем:

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

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

Фил Аллен
источник
2

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

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

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

Сухани Мендапара
источник
1

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

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

import $buzz from 'musquito';

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

buzz.play();

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

VJAI
источник
0

Это какой-то JS, который я придумал для детского AI-проекта, с которым я работаю. Я надеюсь, что это может помочь вам.

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>
Урихель Коулман
источник
0

Просто используйте это:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

Или, чтобы сделать это проще:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

Образец:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

НЕ ИДЕИ, если это работает на других браузерах, кроме Chrome 73 !!

Я УМНЫЙ
источник
Это простой, чистый ответ. Никаких вопросов вообще!
IMSMART
0

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

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

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

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )
Дэнни
источник
0

Вот решение для 2020 года, когда вы видите ошибку:

[Ошибка] Необработанный отказ от обещания: NotSupportedError: Операция не поддерживается. (анонимная функция) rejectPromise play (анонимная функция) (testaudio.html: 96) dispatch (jquery-3.4.1.min.js: 2: 42577)


<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

Не будь ловким и подумай, что это старая школа oclick, я просто переместу это вниз по странице к моему jQuery или моему внешнему файлу JavaScript. Нет. Это должно быть onclick.

Уильям Энтрикен
источник