この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。架空のデータとブラウザの操作を使って、Tone.jsの用途、仕組み、失敗時の観察ポイントを学びます。実在のサービスや個人情報へのアクセスは行いません。
検証ステータス： 2026-10-30に公式資料とGitHub固定コミットのHTML/JavaScriptを照合しました。実ブラウザ操作・CDN取得・描画/音声出力は未実行で、本文の結果はコードからの期待値です。
| 項目 | 内容 |
|---|---|
| 対象 | Chrome/Edge/Firefox等の現代的なブラウザ（実機互換性は未確認） |
| 使用ライブラリ | Tone.js（教材内バージョン: 15.1.22） |
| 費用 | デモのソース自体に有料APIは不要。通信料金や利用条件は環境に依存 |
| データ | ページ内の架空データ。認証情報・位置情報・企業データ不要 |
| 学習操作 | 4音のメロディーを再生しテンポを変更する |
なぜこの技術を試すのか
JavaScriptで画面の色や位置を変えるだけでなく、音も作れます。Tone.jsはWeb Audio APIを扱いやすくするためのライブラリです。今回はC、E、G、高いCの四音を鳴らします。楽器の録音ファイルを再生するのではなく、ブラウザ内でシンセサイザーの音を作り、時間差で鳴らすのが特徴です。画面が動かなくても結果が耳で分かるため、イベントと時間のプログラミングを実感しやすい題材です。音量が突然大きくならないように、デモの初期状態では無音とし、音量設定にも注意を促します。
動くサンプルを作るときは、見た目が動いたという事実だけで終わらず、「どの入力がどの変数を変え、どの処理が描画を更新したか」を区別する必要があります。今回の教材では、その変化を画面に明示します。実際のサービスへ取り込むときには、認証や保存の処理を別途設計してください。
まず試す：ライブデモと期待する結果
ブラウザのスピーカー音量を低めにして「4音を再生」を押します。成功した場合は音が四つ聞こえ、ステータスが予約済みへ変わる想定です。次にBPMを100から60へ下げ、音と音の間隔が長くなるか確認します。BPMはBeats Per Minuteの略で一分間の拍数を表します。180へ上げれば間隔が短くなります。音が出ない場合、ブラウザの権限、端末のミュート、別タブの音声出力先を切り分けます。音声実験では画面のSUCCESS表示だけを聴覚上の実行成功とみなしてはいけません。
操作の前に確認すること
自分のPCがJavaScriptを実行できることを確認します。管理者権限は必要ありません。
ブラウザの開発者ツールを開き、Consoleでエラー、NetworkでCDN取得失敗がないか見る準備をします。
デモが実際に公開されていない場合は、Daily Code側の
index.htmlとapp.jsを同じフォルダに保存して、ローカルHTTPサーバーで開きます。moduleを使う場合、file://での直接実行は動作保証されません。結果を操作前後で比べます。期待値と異なる場合は「何が表示されなかったか」を先に記録します。
仕組みの全体図
flowchart LR
A["入力やクリック"] --> B["イベントを受ける"]
B --> C["Tone.js のAPI"]
C --> D["状態と描画を更新"]
D --> E["見た目と文字で確認"]
この図は学習用の概念図で、ブラウザ内部の実装やネットワーク通信の詳細を表したものではありません。ライブラリが何でも「操作がどの変数へ届くか」を追いかけることは共通です。
公開デモが使えない場合のローカル確認
固定コミットのHTML本体とJavaScript本体をGitHubのRaw表示から、それぞれindex.htmlとapp.jsとして同じ新規フォルダに保存します。READMEだけでは動作しません。WindowsではそのフォルダでPowerShellを開きpy -3 -m http.server 8000 --bind 127.0.0.1、Linux/macOSではpython3 -m http.server 8000 --bind 127.0.0.1を実行し、同じPCのhttp://127.0.0.1:8000/を開きます。終了はターミナルでCtrl+Cです。ブラウザがライブラリ本体を外部CDNから取得するため、接続できない場合はConsoleとNetworkのエラーを確認します。この手順は再現案内であり、本記事のブラウザ実測報告ではありません。
どう動いているのか：APIを読み解く
ブラウザはユーザーが操作していない段階で音が鳴ることを制限しています。Tone.start()はクリックなどのユーザー操作に結び付けて呼ぶ必要があります。音源はTone.Synthで作り、toDestinationによってスピーカー側の出力経路に接続します。triggerAttackReleaseで音名、長さ、開始時刻を指定します。JavaScriptのsetTimeoutで一つずつ鳴らす方式より、AudioContextの時刻を使って演奏を予約する方が音のタイミングを設計しやすくなります。
最小コードの読み方
await Tone.start(); // クリックのイベント内で呼ぶ
const synth = new Tone.Synth({volume: -18}).toDestination();
synth.triggerAttackRelease("C4", "8n", Tone.now());
上記はAPIの要点を取り出した抜粋です。コピーして単独実行する完成ファイルではありません。動かすためのHTMLと実装一式はDaily Code側のREADME／デモファイルで確認してください。どの関数がHTML要素を選び、どの行が数値を更新するかを追い、既知の架空値で試します。
一条件だけ変更して比較する
音の並びをC4、E4、G4、C5から、C4、F4、G4、B4へ変えれば響きが変わります。周波数を数値で書くこともできますが、最初は音名を使った方が読みやすいでしょう。音の長さを変更すると、隣の音と重なることがあります。そのため再生予約の時間間隔と一音の長さは別々に考えます。連続再生へ拡張するなら、停止・再開・速度変更時の予約済み音の扱いが重要になります。
比較の手順は、最初の値を記録し、一か所だけ変更して、結果が想定の部分に現れたかを確認することです。入力を一度にいくつも変更すると、何が影響したか分からなくなります。変更前へ戻す操作まで含めて検証してください。
失敗したときにどこを見るか
再生ボタンを何回も押すと音が重なります。楽器をそのたびに新規作成し続けるのではなく、サンプルでは基本的に音源を再利用します。停止時にはdisposeして後始末しますが、予約済み音との関係は実ブラウザで追加確認が必要です。イベント会場で公開する場合は自動再生しないこと、音声を止める操作をいつでも使えること、聴覚に配慮した代替の視覚情報を併記することが大切です。
| 観察した状態 | 切り分ける点 | 対応の例 |
|---|---|---|
| 画面が初期状態から変わらない | スクリプト取得・初期化・イベント登録 | Console / Network / scriptタグを確認 |
| 表示が変わるが意味が合わない | 入力値・配列・単位・更新対象 | 値を固定して一条件ずつ確認 |
| ボタンを押せない | セレクターとDOM生成順序 | idが一致するかHTMLを確認 |
| 一部の端末だけ動かない | ブラウザ機能、権限、CDN、性能 | 端末とバージョン、再現操作を記録 |
ブラウザ内でのエラーと公開Webサーバーの障害は別です。前者は開発者ツールのエラー内容、後者はHTTPレスポンスやアセットの配信条件から調べます。未知の失敗を成功と表現しないことが、技術メモの信頼性を高めます。
業務・学習への応用
タイピング教材のフィードバック、ゲームの効果音、タイミング学習、音程の可視化などへ応用できます。ただし通知音の鳴動は端末の状態に依存し、重要な警告を音だけに頼ってはいけません。業務システムでは画面テキスト・通知履歴・音を組み合わせた設計が必要です。
導入前に決めること
読者へ公開するとき、表示したデータがどこから来るか、誰が変更できるか、画面へ残る情報の種類、ライブラリ更新時の確認項目を決めます。今回のデモにはログインもサーバー保存もありません。そこで運用機能を追加する前に、まず「想定どおり表示される最小部分」と「実務上の信頼性・権限・バックアップが必要な部分」を区別することを勧めます。第三者CDNは外部通信のため、企業ネットワークで許されるか事前確認が必要です。
別方式と比較する
| 方式 | 向く場面 | 注意点 |
|---|---|---|
| Tone.js | 4音のメロディーを再生しテンポを変更するなど目的に合う場面 | 依存ライブラリの更新・利用条件の管理が必要 |
| ブラウザ標準API | 小さな機能を自前で作る | 仕様や互換性を自分で確認する |
| 静的画像・表 | 操作を必要としない説明 | 状態の変化をその場で体験できない |
ライブラリは必要なときに選ぶ道具です。何を達成したいかと学習コストを合わせて比較します。「ライブラリを入れること」を目的にしない方が、小規模なページでは保守しやすくなります。
GitHubサンプル
ブログ本文は背景や考え方、Daily Codeは実行・改造するためのコード、という役割を分けています。外部サービスへ投稿・保存するAPIは含めません。
公式情報・一次情報
資料確認範囲： 2026-10-27の編集時点で公式ドキュメントを参照。リンク先の将来の変更やすべてのCDNアセット応答まで保証するものではありません。
検証範囲の補足
GitHubに保存された固定ソースと公式API説明を照合しました。ブラウザ操作、CDNロード、各OS上での結果は未検証です。実際の動作確認時にはConsoleとNetworkを確認し、画面のSUCCESS表示だけで全条件の成功を断定しないでください。
