JavaScriptでオーディオを再生しますか?


690

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

Javascriptを使用してゲームオーディオを再生するにはどうすればよいですか?


9
html5なのでがあり<audio>ます。その要素は、などの「遊び」、「一時停止」、...のための適切なJSフックがあります
マルク・B

1
@Marcさて、それらのフックが何であるかについていくつかの情報を提供できますか?
ライアンS.

14
:私は、ドキュメントは、オーディオメソッドのすべてについてここであなたが迷っている賭けstackoverflow.com/questions/4589451/...
ブライアンダウニング

回答:


1327

HTML要素をいじりたくない場合:

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

これは、要素HTMLAudioElementと同じように音声を再生するインターフェースを使用します。<audio>


より多くの機能が必要な場合は、howler.jsライブラリを使用しましたが、シンプルで便利です。


9
この方法はmp3の再生には有効ですが、wavファイルには無効です。wavファイルを再生する方法はありますか?
user781486 2014

12
@ user3293156このメソッドは、HTML5と同じ形式をサポートします<audio>。ウィキペディアには、オーディオ形式の互換性表がありますnew Audio()Internet Explorerを除くすべてのブラウザーでWAVファイルを再生できます。
Rory O'Kane

281
@ RoryO'Kaneだから、マイクロソフト以外のマイクロソフトのオーディオ形式を再生できますか?LOL
デイブCousineau

10
カップルの警告:(1)Firefoxはmp3を再生しません。代わりにoggファイルが必要です。(2)https経由でコンテンツを提供している場合、Safari / iOSは再生されません。有効な証明書が必要です。
ピーター

9
2018年4月以降、ユーザーがドキュメント内で少なくとも1回クリックしない限り、Chromeではオーディオファイルが再生されないことに注意してください。こちらをご覧ください
Nils Lindemann


38

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

SoundManager 2は、IE 6+などの最新のブラウザでサウンドを再生できる使いやすいAPIを提供します。ブラウザがHTML5をサポートしていない場合は、Flashからヘルプを取得します。厳密にHTML5を使用し、フラッシュを使用しない場合は、そのための設定があります。preferFlash=false

iPad、iPhone(iOS4)およびその他のHTML5対応デバイス+ブラウザーで100%Flashなしのオーディオをサポートします

使い方は次のように簡単です:

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


3
通常、このWebサイトにリンクを提供する場合は、投稿のリンクから情報を提供します。単純なリンクを投稿して「これをクリック」と言うのはお勧めしません。
Ryan S.

7
申し訳ありませんが、サイトはそれ自体を説明すると思いました。次に編集します
LordZardeck

32

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

Web上のオーディオはプラグインを必要としませんが、オーディオタグは高度なゲームやインタラクティブアプリケーションの実装に大きな制限をもたらします。Web Audio APIは、Webアプリケーションでオーディオを処理および合成するための高レベルの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"のすべてのオーディオタグが同時に再生されます。(プレイリストで)どのように次々とプレイしますか?
ストーマ2017年

StackOverflowでの質問なので、@ stomyで投稿しましたか?よろしければお知らせください。それをお手伝いします。それ以外の場合は、これを提供します-(曲の再生を開始した後)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);
}

14

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

キャッチされていない(約束どおり)DOMException:play()は、ユーザーが最初にドキュメントを操作しなかったために失敗しました。

つまり、ユーザーは最初にWebサイトと対話する必要があります(エラーメッセージが示すように)。この場合はclick、ユーザーがWebサイトを操作できるように、または別のイベントリスナーを使用する必要があります。

オーディオを自動的にロードし、ユーザーが最初にドキュメントを操作したくない場合は、を使用できますsetTimeout

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

0.5秒後に音が鳴ります。


動作しません。Chromeではありません。もう違います。
Arfeo



5

以下のようなHTMLタグがある場合は、非常に単純なソリューションです。

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

次のように、JavaScriptを使用して再生します。

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

</a>または</ audio>を使用するつもりでしたか?ちょっと興味があるんだけど。
クーパー

<audio>タグを使用しました。
ベンスタッフォード

1
ベン、あなたの例には間違った終了タグがありました。それが@Cooperがその質問をした理由です。正しい終了タグで回答を編集しました。
Sgnl 2018年

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>

JSから自動再生をトリガーすると、Safariで動作しません。
maki10

1
@ maki10こんにちは、サファリデスクトップバージョン12.0.3(14606.4.5)でテストしましたが、ここで機能します: jsfiddle.net/xf5zyv4q/5
talsibony

サファリモバイルIOS 12でも動作します
タルシボニー

問題jsfiddle.net/6431mfb5のリンクを更新します。私にとって、自動再生はSafari以降で初めて機能します。
maki10

@ maki10あなたがユーザーとの対話なしでそれを呼び出すために、クリックタッチのようなユーザの相互作用なしに文句を言わない作業を自動再生する最後の行を削除します。soundPlayer.play(」interactive-examples.mdn.mozilla.net/media/examples/...を)。
talsibony

3

私はこの方法を使ってサウンドを再生しました...

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

2

ページが開かれるたびにオーディオを再生したい場合は、次のようにします。

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

ゲームコードで必要なときはいつでも、このplayMusic()を呼び出します。


2

オーディオを許可するためにユーザーがWebページとやり取りする必要があるセキュリティ要件により、これは、このサイトを含む多くの記事を読むことに基づいて、私が行う方法です

  1. 必要なオーディオファイルをHTMLで定義します
  2. onclick付きのゲーム開始ボタンを用意する
  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();

ゲームの開始時に聞きたいオーディオを一時停止しないことを除いて、必要に応じて繰り返します


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

これは私が一緒に働いている赤ちゃん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

これを使うだけです:

<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以外のブラウザでこれが機能する場合は、アイデアはありません。


これは簡単で明確な答えです。jqueryはまったくありません!!
IMSMART

0

特にChromeが更新され、ユーザーが最初にドキュメントを操作する必要があることが更新されたため、オーディオの再生にいくつかの問題がありました。

しかし、私が見つけたほとんどすべてのソリューションで、JSコードはオーディオを再生するためにユーザーイベントを受信するようにリスナー(ボタンのクリックなど)をアクティブに設定する必要があることを発見しました。

私の場合、プレイヤーがBGMを操作したらすぐにBGMをプレイしたいと思ったので、Webページが操作されているかどうかをチェックし続ける単純なリスナーにしました。

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年の解決策は次のとおりです。

[エラー]未処理のPromise拒否:NotSupportedError:この操作はサポートされていません。(匿名関数)rejectPromise再生(匿名関数)(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ます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.