web-dev-qa-db-ja.com

Javascriptでオーディオを再生する

私はHTML5とJavascriptでゲームを作っています。

Javascriptを使ってゲームのオーディオを再生する方法を教えてください。

javascripthtml5html5-audio
568
Ryan S.

あなたが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>
1120
Uri

それは簡単です、あなたのaudio要素を入手してplay()メソッドを呼び出すだけです：

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

この例をチェックしてください： http://www.storiesinflight.com/html5/audio.html

このサイト はload()、pause()、そしてaudio要素の他のいくつかのプロパティのようなあなたがすることができる他のクールなことのいくつかを発見します。

170
shanabus

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

SoundManager 2は、IE 6+など、最近のどのブラウザでもサウンドを再生できる使いやすいAPIを提供します。ブラウザがHTML5をサポートしていない場合は、フラッシュから助けを得ます。 HTML5を厳しくしてフラッシュをしたくない場合は、preferFlash=falseの設定があります。

IPad、iPhone（iOS 4）、その他のHTML 5対応デバイス+ブラウザで、100％フラッシュフリーのオーディオをサポートします。

使い方は簡単です。

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

36
LordZardeck

これはかなり古い質問ですが、役に立つ情報を追加したいと思います。トピックスターターは、彼が"making a game"であると述べました。そのため、ゲーム開発にオーディオを必要とするすべての人にとって、単に<audio>タグやHTMLAudioElementよりも良い選択があります。 Web Audio API の使用を検討する必要があると思います。

ウェブ上のオーディオはもはやプラグインを必要としませんが、オーディオタグは洗練されたゲームやインタラクティブなアプリケーションを実装する上で大きな制限をもたらします。 Web Audio APIは、Webアプリケーションでオーディオを処理および合成するための高レベルのJavaScript APIです。このAPIの目的は、最新のゲームオーディオエンジンに見られる機能と、最新のデスクトップオーディオ制作アプリケーションに見られるミキシング、処理、およびフィルタリングのタスクの一部を含めることです。

26
Konstantin Smolyanin

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

@ストーマの問題に対処するために、プレイリストを再生するためにこのアプローチをどのように使用するかを示します。

オブジェクトに曲を設定します。

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

このコードの実際の例については、 ここ を参照してください。

19
Cybernetic

隠しオーディオを追加して再生します。

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

次のエラーが発生した場合

キャッチされない（約束された）DOMException：ユーザーが最初にドキュメントを操作しなかったため、play（）が失敗した。

これは、ユーザーが最初にWebサイトと対話する必要があることを意味します（エラーメッセージが示すように）。この場合、clickまたは他のイベントリスナを使用する必要があります。そうすれば、ユーザはあなたのWebサイトと対話できます。

音声を自動読み込みして、ユーザーが最初にドキュメントを操作したくない場合は、setTimeoutを使用できます。

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

0.5秒後に音が鳴ります。

7
Reza Saadati

あなたが以下のようなHTMLタグを持っているならば、とても簡単な解決策：

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

JavaScriptを使って再生するだけです。

document.getElementById('myAudio').play();
5
Ben Stafford
var song = new Audio();
song.src = 'file.mp3';
song.play();
4
mamadaliev

私は音を鳴らすためにこの方法を使いました...

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

私は オーディオプロミスオブジェクト リターンに関連したいくつかの問題と、私がこの小さなオブジェクトを使用することになるサウンドとのユーザーインタラクションに関連したいくつかの問題がありました

私は、ユーザーが使用しているインタラクションイベントに最も近いプレイサウンドを実装することをお勧めします。

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

ページを開いたときにオーディオを再生したい場合は、次のようにします。

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

そしてあなたのゲームコードで必要なときはいつでもこのplayMusic（）を呼び出してください。

2
Suhani Mendapara

Web Audio APIを使ってサウンドを再生することができます。 howler.js、soundjsな​​ど、かなりの数のオーディオライブラリがあります。古いブラウザを気にしないのなら、 http://musquitojs.com/ をチェックすることもできます。サウンドを作成して再生するためのシンプルなAPIを提供します。

たとえば、音を鳴らすには、あなたがすることはすべてです。

import $buzz from 'musquito';

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

buzz.play();

このライブラリはオーディオスプライトもサポートしています。

1
VJAI

これを使うだけです：

<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以外のブラウザでも動作する場合は、IDEAを使用しないでください。

0
I.M.Smart

これは私が一緒に働いているベイビーAIプロジェクトで思い付いたJSです。これがお役に立てば幸いです。

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