この記事の目次 開く・閉じる
今回の仕上がり
ボタンを押すと0.35秒の音を生成する作例です。5%では信号の最大振幅0.0500、0%では0.0000を確認しました。ミュート中は音を生成せず、再開後は再び押して鳴らせます。ここで確認した数値はブラウザ内の信号で、実際のスピーカー音量ではありません。
こちらは実際に触れる作例です。 スクリーンショットで操作や音を代用したものではありません。音の作例も自動では鳴りません。
必要なものと操作順
Web Audioに対応したブラウザを使います。試す前に端末の音量を下げてください。外部音源、登録、インストールは不要です。聞こえ方は端末の出力先や設定にも左右されます。
- 作例を開き、「未開始。自動では鳴りません。」の表示を見る。
- 端末と作例の音量を下げてから、「音を鳴らす」を押す。
- 短い生成が終了し、結果と信号の数値が表示されることを確認する。
- 「ミュート」を押し、続けて「音を鳴らす」を押す。ミュート中という案内になる。
- 「音を再開」を押した後、音量を0にして鳴らす。信号0.0000を確認し、必要なら音量を戻す。
仕組みと使いどころ
開始の操作をはっきり用意する
MDNはWeb Audioの開始や再開をユーザーの操作から行う方法を案内しています。ブラウザの自動再生制限を回避するために、ページを開いた直後の音を無理に鳴らす設計にはしません。
作例ではクリックの処理でAudioContextを用意し、resumeを待ってから音を生成します。開始できなければ文字で案内します。音がないと成功したか分からないUIにもしていません。
音源を使わず、短い信号を作る
OscillatorNodeで660Hzの信号を作り、GainNodeで小さくして出力します。0.35秒後に止まるため、押しっぱなしで無限に鳴る作例ではありません。これはゲーム用効果音の完成素材ではなく、開始と音量を確認するための音です。
信号のメーターはAnalyserNodeから取得した値です。5%と0%の違いを数値で確かめられますが、端末の音量、スピーカーの性能、周囲の音を測ったものではありません。
鳴らすボタンと止める方法を一緒に作る
ミュートは新しい生成を止め、AudioContextも停止します。再開操作だけで勝手に新しい音を鳴らさず、もう一度「音を鳴らす」を押す方式です。小さな作例でも、読者が音を選べる状態にします。
長いBGMなら、再生位置、タブを離れた場合、連打、画面移動後の片付けまで設計します。作例はページを離れたときにcontextを閉じますが、全ブラウザの音声動作を保証するものではありません。
コードの要点
// ボタンの操作から開始
const context = new AudioContext();
await context.resume();
const tone = context.createOscillator();
const gain = context.createGain();
tone.frequency.value = 660;
gain.gain.value = 0.05;
tone.connect(gain).connect(context.destination);
tone.start();
tone.stop(context.currentTime + 0.35);開始と短い音の抜粋です。本体はcontextの再利用、重複生成の抑制、ミュート、信号の取得、使い終わったノードの切断を追加しています。クリック時の処理へ置き、ページ読み込みだけでは実行しません。
自作のHTML・CSS・JavaScript・SVGはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認とよくあるつまずき
- クリック前には信号を生成していない。
- 5%で生成した信号が0ではなく、0%なら0.0000になる。
- ミュート中に押しても生成せず、再開後は再度ボタンを押して開始できる。
ここに注意。音が聞こえないときは、ブラウザの対応と自動再生の条件に加え、端末のミュートや出力先も調べます。信号があるだけでは聞こえた証拠になりません。
ここに注意。別の音源を使う場合は作者、ライセンス、商用条件、改変条件を確認します。この自作信号の条件を、音楽素材の許可として流用できません。
出典と確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
ブラウザで開始、終了、ミュート、再開と信号の値を確認。スピーカーから出た音、実機スマホ、全ブラウザ、BGM素材、音の品質や聴感は未確認です。
MDN：Web Audio API best practices。ユーザー操作からの開始、音量とミュート。
MDN：AudioContext resume。停止したcontextの再開とPromise。