JavaScript でオーディオファイルを再生する

1. JavaScript で .play() を使用してオーディオファイルを再生する
2. Web Audio API を使用してオーディオファイルを再生する
3. JavaScript で howler.js ライブラリを使用してオーディオファイルを再生する

この記事では、JavaScript でオーディオファイルを再生する方法を学習します。

<audio> タグを使用するだけで、オーディオファイルをページに追加できます。これは、JavaScript をまったく使用せずにオーディオファイルを再生する最も簡単な方法です。<audio> タグの src 属性は、オーディオファイルのアドレスを指定します。また、control、autoplay、loop などの他の便利な属性もあります。ただし、ゲーム、クリック、その他のイベントのように、自動的に制御してサウンドを自動的に再生したい場合があります。このような状況では、JavaScript が制御を取得し、ロジックに従ってファイルを再生する必要があります。

JavaScript で .play() を使用してオーディオファイルを再生する

オーディオオブジェクトインスタンスを作成するだけで、つまり new Audio() を使用するだけで、JavaScript でオーディオファイルをロードできます。オーディオファイルがロードされたら、.play() 関数を使用して再生できます。

const music = new Audio('adf.wav');
music.play();
music.loop = true;
music.playbackRate = 2;
music.pause();
qqazszdgfbgtyj

上記のコードでは、オーディオファイルをロードしてから再生するだけです。JavaScript は、多くの柔軟性と豊富な機能を提供してくれます。再生速度の制御、オーディオのループ、一時停止、およびサウンドの再生を行うことができます。唯一の問題は、一度に複数のサウンドを処理し、最新の洗練されたものと比較して制御がいくらか制限されていることです。

Web Audio API を使用してオーディオファイルを再生する

セットアップは少し面倒ですが、Web Audio API は、サウンドに対する多くの柔軟性と制御を提供します。これは、典型的な HTML5 オーディオからの大幅な進歩であり、複雑なオーディオ操作を可能にします。HTML5 オーディオを使用して、オーディオコンテキストと呼ばれる有向グラフのような構造上のノードとしてオーディオ要素を表します。オーディオソースと宛先の間に接続されたボリュームノードのような多くのタイプのノードがあり、ボリュームの操作に役立ちます。

<audio src='audio_file.mp3'></audio>
const audioContext = new AudioContext();
const element = document.querySelector(audio);
const source = audioContext.createMediaElementSource(element);
source.connect(audioContext.destination)
audio.play();

ここでは、最初にオーディオコンテキストを初期化し、オーディオファイルのソースへの参照を取得します。次に、そのソースをグローバルな宛先に接続し、オーディオのセットアップが完了します。

JavaScript で howler.js ライブラリを使用してオーディオファイルを再生する

howler.js はオーディオ操作ライブラリです。これにより、Web AudioAPI のパワーと HTML5Audio のシンプルさを活用できます。これは、特に複数のオーディオソースを再生しているときに、ブラウザベースのオーディオを処理するために react クラスコンポーネントで広く使用されています。Howler オブジェクトを使用してグローバルオーディオコンテキストを制御し、Howl を使用してオーディオまたはオーディオのグループを制御します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'],
      volume: 1.0,
      onend: function () {
        alert('We finished with the setup!');
      }
    });
    sound.play()
</script>

Internet Explorer を除くすべての主要なブラウザは、これらすべての方法をサポートしています。Internet Explorer は、Web AudioAPI および howler.js をサポートしていません。