Воспроизведение аудио с помощью Javascript? - PullRequest
Новая
       80

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

582 голосов
/ 23 февраля 2012

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

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

Ответы [ 16 ]

3 голосов
/ 03 февраля 2019

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

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

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>
3 голосов
/ 04 июля 2016

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

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
2 голосов
/ 09 февраля 2017

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

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

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

1 голос
/ 25 июня 2018

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

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

import $buzz from 'musquito';

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

buzz.play();

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

0 голосов
/ 03 апреля 2019

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

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

0 голосов
/ 29 марта 2019

Это какой-то 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>
Страница:
...