これは本ブログでも解説している『Web Audio APIを利用した簡単なサンプルと解説』を更に簡単にしたものです。
Playボタンを押すと指定した音声ファイルを再生するだけのWeb Audio APIを利用した超簡単なサンプルです。
とりあえずどんな風にWeb Audio APIを利用するのか知りたい方は役に立つかもしれません。（役に立たなかったらごめんなさいm(__)m）
単純な再生だけならaudioタグで問題ないのです。
Web Audio APIを使う利点は、ゲームなどで同時に複数の音声を再生したり、あるいは音声にエフェクトを加えたり、音量調整をしたりと高度に利用できる点にあります。
Web Audio API は
Web Audio APIの使用 – MDN より引用<audio>メディア要素を置き換えるものではなく、むしろその機能を補完するものであり、<canvas>が<img>要素と並行して存在するのと似ています。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js"></script>
<title>Web Audio APIの基本</title>
</head>
<body>
<p>Web Audio APIの基本</p>
<!-- 利用する音声ファイル -->
<audio src="maou_bgm_8bit29.mp3"></audio>
<!-- 再生ボタン -->
<button>Play</button>
</body>
</html>
main.js
// Web Audio APIの基本
window.addEventListener("load", ()=>{
// 古いブラウザ向けの設定
const AudioContext = window.AudioContext || window.webkitAudioContext;
// 音声コンテキスト作成
const audioContext = new AudioContext();
// 音声ファイル（入力元）を取得
const audio = document.querySelector("audio");
// 音声コンテキストに音声ファイルを設定する
const track = audioContext.createMediaElementSource(audio);
// PLAYボタン取得
const playButton = document.querySelector("button");
// PLAYボタンを押した時の処理
playButton.addEventListener(
"click",
function(){
// 音声（audioContext）が中断状態かどうかチェックする（中断であれば再開する）
if(audioContext.state === "suspended"){
audioContext.resume();
}
audio.play(); // 再生する
},
false
);
// 設定済みの音声ファイルの音声コンテキストを出力先（スピーカー）に接続
track.connect(audioContext.destination);
});
簡単な解説
再生させたい音声ソースはindex.html にaudio タグで配置しています。
これはあくまでサイトに音声ソースを読み込ませるためです。画面には表示されません。
<audio src="maou_bgm_8bit29.mp3"></audio>
今回利用した音声ファイルは、魔王魂の以下のファイルを利用させていただきました。
ありがとうございます。
ボタンを押すと音声ファイルの再生をするためにPlayボタンとして button タグが1つあります。
<button>Play</button>
このボタンを押した時にaudioタグに指定した音声ファイルを再生する処理は全てmain.js のloadイベント部分に記述しています。
最初の処理は、Web Audio APIに必須ではありませんが、コメント通り古いブラウザ向けの記述となります。
// 古いブラウザ向けの設定
const AudioContext = window.AudioContext || window.webkitAudioContext;
ちなみに2024年時点でのChrome最新版では、上記記述がなくても動作します。
念のため記述してあるだけですので削除しても大抵のブラウザで動きます。
Web Audio APIは、AudioContextオブジェクトのインスタンスを作ることで利用できます。
これが最初にすべきことです。
// 音声コンテキスト作成
const audioContext = new AudioContext();
audioタグの音声ソースを特定するためにDOM取得します。
// 音声ファイル（入力元）を取得
const audio = document.querySelector("audio");
次に取得した音声ソースをAudioContextのインスタンスに結び付ける処理です。
// 音声コンテキストに音声ファイルを設定する
const track = audioContext.createMediaElementSource(audio);
createMediaElementSourceメソッドは、HTMLに存在するaudioやvideoコンテンツを指定すると、そのコンテンツを操作することができるようになるメソッドです。
戻り値の変数名がtrackとなっています。ただし再生するときは、track.play()とは記述せずaudio.play()となります。あくまで再生や停止はコンテンツ側で行うようです。
では戻り値として変数trackとしている意味ですが、後述する出力先の指定に必要だからです。
audioContextはあくまでラジカセ（古い？）みたいなもので、どんな音声ソース（カセットテープやCD）を鳴らすか？という設定がこのcreateMediaElementSourceでの引数（今回はaudio）だと考えると少しはしっくりくるかと思います。
Playボタンを押した時の処理です。
DOM取得とボタンを押した時のイベント処理を記述しています。
// PLAYボタン取得
const playButton = document.querySelector("button");
// PLAYボタンを押した時の処理
playButton.addEventListener(
"click",
function(){
// 音声（audioContext）が中断状態かどうかチェックする（中断であれば再開する）
if(audioContext.state === "suspended"){
audioContext.resume();
}
audio.play(); // 再生する
},
false
);
ボタンを押した時に再生するだけならclickイベントの処理に audio.play()のみで大丈夫な気がしますが、ブラウザ上のメディアコンテンツの自動再生禁止という決まりがあるため、以下のif文の処理が必要です。（Chromeではこの処理がないと音声が再生されませんでした。FireFoxでは大丈夫でした）
if(audioContext.state === "suspended"){
audioContext.resume();
}
最後に音声の出力先をconnectメソッドでスピーカーに設定して完了です。（audioContext.destinationは基本的に端末につながっているスピーカーとなります）
// 設定済みの音声ファイルの音声コンテキストを出力先（スピーカー）に接続
track.connect(audioContext.destination);
超簡単といっても手続きが面倒ですが、Web Audio APIを使って音声ソースの再生ができるようになります。
今回のサンプルではPlayボタンで再生しっぱなしになってしまいます。
もし再生中の音声を停止したい場合は、audio.pause()をプログラムから実行するようにしてください。
音量調整や再生と停止などを行いたい場合は、以下を参考にしてみてください。
コメント