この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。
Web Audio APIの公式資料を確認し、音を出さずに波形を観察できるJavaScript教材を作成しました。P1〜P5は同じChatGPT内の自己審査であり、独立AI審査ではありません。検証ステータス：📘 公式仕様確認済み／JavaScript構文・周波数境界4条件PASS／実ブラウザ・公開Pages・WordPress表示は未確認
2026年10月31日確認。実機の音声再生、実際の波形表示、モバイル、印刷/PDF、WordPressの青い囲みは確認していません。
周波数を220 Hzから440 Hzに変えると、波の山の間隔はどうなるでしょうか。 この教材では、音を出さずに画面の波形だけを観察できます。波形の変化と音の高さを混同せず、同じ時間幅の中で周期が変わる様子を理解することが目的です。
| 項目 | 今回の条件 |
|---|---|
| 対象 | Web Audio APIとCanvas 2D対応ブラウザ |
| 使う技術 | OscillatorNode・AnalyserNode・Canvas |
| 料金 | 無料。APIキー・外部ライブラリ不要 |
| 個人情報 | マイク・位置情報・ログイン不要 |
| 音声 | 初期ミュート。解除時も小音量設定 |
| 制限 | 実ブラウザ・実端末では未確認 |
まず試す：無音のまま波形を見る
🔷 動く教材（公開到達・ブラウザ動作は未確認）
Web Audio波形ラボを開く
Daily CodeのREADMEと完成ソース（GitHub保存済み）
ページの「開始（初期ミュート）」を押します。最初は音を出さない設定です。
周波数のスライダーを220 Hzから440 Hzへ動かします。
青い波の山と山の間隔と「440 Hz」表示を比べます。観察後は「停止」を押します。
実ブラウザでの動作確認はまだありません。以下はソースの計算とAPI仕様から予測した結果です。
| 操作 | 期待する変化 |
|---|---|
| 開始前 | 平坦な線・停止中 |
| 220 Hzで開始 | 周期の長い波 |
| 440 Hzへ変更 | 山の間隔が短くなる |
| ミュートを維持 | 音を出さず波形を描く |
| 停止 | 音声処理終了・平坦な線 |
操作後はここを見る
周波数の数値が2倍になっても、波の高さ（振幅）が2倍になるわけではありません。画面で注目するのは山の数と間隔です。Canvasは一定数の時間領域サンプルを同じ幅に描くため、周波数が高いほど短い周期が並びます。ただし、表示される山の数はサンプリング周波数や端末の状態にも左右されます。OSやブラウザで「動きを減らす」を有効にしている場合は、自動描画を止める設計なので、「波形を1回描く」で更新してください。開始直後に平坦なら少し待ってから再描画します。
なぜ音を消しても波形が見えるのか
音を扱うJavaScriptには、音を作る部品と音を調べる部品があります。OscillatorNodeは正弦波を作り、AnalyserNodeはその波形を取得します。GainNodeは音量を調整します。今回の教材は、解析を先に行ってから音量を0にするため、耳に音を届けずに信号を観察する構成です。
flowchart LR
A["周波数スライダー"] --> B["OscillatorNode"]
B --> C["AnalyserNode"]
C --> D["Canvasに波形描画"]
C --> E["GainNode: 初期音量0"]
E --> F["スピーカー"]
図の「スピーカー」は音声出力経路を表します。初期GainNodeの音量が0なので、経路があっても意図的に無音です。マイクから音を取得する処理はありません。外部の音楽ファイルも読みません。
波形の取り出しにはgetByteTimeDomainData()を使います。このメソッドは、音の時間変化を0〜255の数値列としてUint8Arrayへコピーします。値128付近が中心線に相当し、Canvasの縦座標へ換算して線を結びます。これは波形の表示であり、周波数ごとの音量を示すスペクトルとは異なります。
コードの核心：解析して描画する
完成版は、音声の接続・停止処理・アクセシビリティ対応も含みます。ここでは重要な部分だけ示します。
const samples = new Uint8Array(analyser.fftSize); analyser.getByteTimeDomainData(samples); const y = samples[i] / 255 * canvas.height;
samplesは波形を数値として受け取る入れ物です。1点ずつCanvasの縦位置に直し、線を描きます。実際の完成版はrequestAnimationFrameで表示を更新し、停止時にはアニメーションをキャンセルしてAudioContext.close()で処理を終了します。
開始ボタンが必要な理由も重要です。ブラウザは、ページを開いただけで音が鳴ることを制限する場合があります。そのため、AudioContextの作成とresume()を利用者のクリックから始める構成にしています。初期ミュートのまま観察できるので、音を出す操作は学習の必須条件ではありません。
1か所変えて比べる
220 Hzと440 Hzを比べたら、次は660 Hzにしてください。変更するのは周波数だけで、ミュートはそのままにします。
| 設定 | 予想する波形 |
|---|---|
| 220 Hz | 山の間隔が広い |
| 440 Hz | 山の間隔が狭い |
| 660 Hz | さらに狭い |
ここで「高い周波数＝大きな音」と誤解しないことが大切です。周波数は主に音の高さに関係し、音量は別の要素です。実験の後は「停止」を押し、画面が平坦な線に戻るかを確かめます。
音量に注意
初期状態ではミュートがONです。チェックを外すと小音量の音が出る設計ですが、端末の音量・イヤホン・周囲の環境によって感じ方は異なります。聴力測定や安全な音圧の保証には使えません。耳が不快な場合は直ちに停止してください。
うまく動かないとき
| 症状 | まず確認すること |
|---|---|
| 開始できない | ブラウザのWeb Audio対応とConsole |
| 波形が動かない | 開始状態・タブ表示・省アニメ設定 |
| 音が聞こえない | 初期ミュートは意図した動作 |
| 波形が平坦 | 「波形を1回描く」を試す |
| 動作が重い | 停止しタブを閉じる |
OSやブラウザが動きを減らす設定になっている場合は、自動アニメーションを止め、ボタンで1回だけ波形を描けるようにしています。色だけでは判断しにくい場合、周波数の文字表示も確認してください。キーボードで操作できる標準のボタン・スライダーを採用していますが、支援技術での実機試験は未実施です。
GitHub Pagesが開かない場合は、公開準備や配信反映が未完了の可能性があります。GitHubのREADMEとdocs/demos/audio-waveform-lab/のソースを確認し、自分のPCで安全に動かす方法へ進んでください。公開URLが存在することと、実際に動作することは別の確認事項です。
自分のPCで動かす
完成版はHTMLとJavaScriptの2ファイルで構成します。READMEにあるindex.htmlとapp.jsを同じフォルダに置き、ブラウザで開いてください。ローカルファイルの制限がある場合は、信頼できるローカルHTTPサーバーから配信します。音声を出す必要はありません。ブラウザにマイク・カメラ・位置情報の許可を与える必要もありません。
仕事・学習で使うなら
プログラミングの授業では、数値入力→信号生成→解析→画面表示というデータの流れを観察できます。音響の基礎学習では、周期と周波数の関係を説明する導入として使えます。業務アプリでは、音声入力を扱わずにCanvas更新の仕組みだけを応用することもできます。
一方、音圧測定・聴力診断・騒音の規制判定には使えません。今回の波形はブラウザ内で作った正弦波であり、現実の部屋や機器の音を測定していないためです。見た目の動きがあることと、測定器としての正確さは別です。
追加実験：無音でも解析できる理由を確かめる
波形表示は「スピーカーから音を聞くこと」と同じではありません。Web Audioでは波形を作る処理、数値を取り出す解析処理、最終的な音量を決める処理を分けて考えます。音量を0にした画面でも、解析器へ届く信号が存在すれば数値として観察できる構成があります。どのノードがどこへ接続されているかを確認し、聞こえないことだけで発振器が停止したとは判断しないでください。
周波数を低くすると、同じ観察時間内で波の山が少なく見えることが期待されます。ただし描画幅や表示に使うサンプル数が変わると、山の見え方も変化します。周波数だけを変えた比較と、横方向の表示スケールを変えた比較は別です。まず表示が更新されているか、次に設定した周波数が画面に反映されるかを確認すると原因を追いやすくなります。
波形の高さは実際の音量と必ずしも同じではありません。描画処理が信号の値を画面幅や高さに合わせて拡大・縮小している場合、音量を変えずに線だけ大きく表示することもできます。観察対象が振幅なのか、波の周期なのかを決めてから操作することが大切です。異なる周波数を比べるときは表示倍率を固定し、目盛りが変わっていないかも確認してください。
ブラウザによっては音声処理の開始がユーザー操作に制限されます。開いた直後に動かず、ボタンを押してから動く場合は、権限が必要だと決めつける前にAudioContextの状態を確認します。停止ボタンで描画だけを止めたのか、音源まで停止したのかも重要です。終了後に不要な発振器や描画ループが残らないよう、停止処理と再開処理を別々に調べてください。
公式資料
MDN: AnalyserNode.getByteTimeDomainData()（2026年10月31日確認）
MDN: Web Audio API Best practices（2026年10月31日確認）
MDN: Using the Web Audio API（2026年10月31日確認）
MDN: 自動再生ガイド（2026年11月1日確認、利用者操作後の開始について）
GitHubサンプル
検証範囲
GitHubに保存したJavaScriptはV8で構文検査し、周波数の上下限と不正入力の4条件を確認しました。実ブラウザでのAudioContext起動・音声再生・描画、GitHub Pages到達、WordPressの引用枠が青くなること、アイキャッチ、スマートフォン、印刷/PDFは未確認です。既存のWordPress表示に任せる項目を本文へ二重挿入せず、独自の本番CSSや未登録画像も追加していません。
