Відтворення аудіо за допомогою Javascript?

Я роблю гру з HTML5 та Javascript.

Як я можу відтворювати ігрове аудіо через Javascript?

Якщо ви не хочете возитися з елементами HTML:

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

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

<button onclick="play()">Play Audio</button>

Для цього використовується 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>

Це просто, просто отримайте свій 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 і не має спалаху, є налаштування для цього,preferFlash=false

Він підтримує 100% аудіо без флеш-пам’яті на 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. Думаю, вам слід розглянути можливість використання веб-аудіо API :

Хоча для аудіо в Інтернеті більше не потрібен плагін, звуковий тег приносить значні обмеження для впровадження складних ігор та інтерактивних програм. API Web Audio - це 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>

EDIT

Щоб вирішити питання @ 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');
});

Дивіться тут приклад цього коду в дії.

Додати прихований аудіозапис і відтворити його.

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

Якщо ви отримуєте таку помилку:

Uncaught (обіцяє) DOMException: play () не вдалося, оскільки користувач спочатку не взаємодіяв із документом.

Це означає, що користувачеві потрібно спочатку взаємодіяти з веб-сайтом (як йдеться у повідомленні про помилку). У цьому випадку вам потрібно використовувати clickабо просто іншого слухача подій, щоб користувач міг взаємодіяти з вашим веб-сайтом.

Якщо ви хочете автоматично завантажити аудіо та не хочете, щоб користувач спочатку взаємодіяв із документом, ви можете використовувати його setTimeout.

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

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

Звук розпочнеться через 0,5 секунди.

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

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

Досить просте рішення, якщо у вас є тег HTML, як показано нижче:

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

Просто використовуйте JavaScript, щоб відтворити його так:

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

У мене виникли деякі проблеми, пов’язані з поверненням об’єкта аудіообіцянки, а деякі проблеми, пов'язані з взаємодією користувачів із звуками, я закінчую цим маленьким об'єктом

Я рекомендую реалізувати звуки відтворення, найближчі до події взаємодії, яку користувач використовує.

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>

Я використовував цей метод для відтворення звуку ...

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

Що стосується вимог безпеки, якими користувач повинен взаємодіяти із веб-сторінкою, щоб дозволити звук, це я роблю так, базуючись на читанні багатьох статей, у тому числі на цьому веб-сайті

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

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

якщо ви хочете відтворювати звук кожного разу, коли сторінка відкрита, зробіть це так.

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

і зателефонуйте цьому playMusic (), коли вам потрібно в ігровому коді.

Для відтворення звуків можна використовувати веб-аудіо API. Тут є досить багато аудіобібліотек, як howler.js, soundjs тощо. Якщо ви не турбуєтесь про старі браузери, ви також можете перевірити на http://musquitojs.com/ . Він надає простий API для створення та відтворення звуків.

Наприклад, відтворювати звук - все, що вам потрібно зробити.

import $buzz from 'musquito';

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

buzz.play();

Бібліотека також підтримує аудіо спрайт.

Це якийсь 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>

Просто скористайтеся цим:

<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>

Не майте НЕ IDEA, якщо це працює в інших браузерах, окрім Chrome 73 !!

У мене виникли проблеми з відтворенням аудіо, тим більше, що 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 )

Ось рішення на 2020 рік, коли ви бачите помилку:

[Помилка] Нерозроблене відхилення обіцянки: NotSupportedError: Операція не підтримується. (анонімна функція) rejectPromise play (анонімна функція) (testaudio.html: 96) відправлення (jquery-3.4.1.min.js: 2: 42577)

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

Не будьте вигадливими і думайте, що це стара школа oclick, я просто переміщу це вниз на сторінку до свого jQuery або мого зовнішнього файлу JavaScript. Ні. Це повинно бути onclick.