ToneQuest は、 音感トレーニング (絶対音感 / 相対音感) をブラウザだけで無料でできるサービス。 音名当て / 音程当て / 和音当て の 3 モード × Easy / Normal / Hard の 3 レベル。 WebAudio API で純合成、 録音音源は使わない。 ラボ 20本目、 インタラクティブ学習 ジャンル 1本目。
#なぜこの形にしたか
直近 5本は (type-forge: ジェネレーター / wiki-orbit: データ可視化 / fate-num: 占い / roof-fund: 計算ツール / coin-stack: 計算ツール)。 作ろうと決めていた 8 ジャンルで インタラクティブ学習 はまだゼロ (道場系 cmd-dojo / sql-dojo は古いサービスで学習だが ジャンル としては別枠扱い)。 今のうちに 「ラボに学習軸の現代版を 1 本立てる」。
候補比較:
- 絶対音感トレーナー (採用)
- 国旗当てクイズ (wow 弱)
- タイピング練習 (ありふれ)
- 手書き数学ソルバー (精度問題)
- 暗算トレーナー (wow 弱)
選んだ理由:
- WebAudio API をラボ初のクリエイティブ活用 (voice-scribe / pitch-flip は音声入力の認識・加工で用途別、 純合成は ToneQuest が初)
- 「絶対音感 トレーニング 無料」 系の検索ボリュームが安定して強い
- モバイルアプリ DL 嫌い層への入口になる
- 派生 (音楽理論 / リズム / メロディ模唱) でシリーズ化可能
#見た目をどう決めたか
直近 5本の 見た目 を書き出す:
type-forge — charcoal + ember orange (warm-dark industrial, forge モチーフ)
wiki-orbit — bone paper + ink (light theme, 古地図)
fate-num — deep indigo + arcane gold (serif italic, zodiac wheel)
roof-fund — drafting cyan + brass (sans, graph paper)
coin-stack — midnight navy + gold + teal (sans, trading dashboard)題材 「音感 / 音楽理論 / 耳を鍛える」 → モチーフ は コンサートホール + 楽譜:
- ステージカーテン (wine burgundy ストライプ + gilt 下縁)
- ステージライト (gold radial glow)
- 五線譜風 stave-line texture (背景に薄い水平線リピート)
- 鳴った音の波形を Canvas で gilt 色で描画
採用 3 要素:
- 配色: wine burgundy
#4a1828+ obsidian#0f080c+ ivory paper#f5f1e8+ gilt gold#c9a445+ rich teal#2b6171 - wine + gilt はラボ 19 本で未使用の組合せ (warmth は type-forge ember orange とは別質、 fate-num indigo + gold とも 配色 別)
- モチーフ: コンサートホールカーテン + ステージライト + stave-line texture + 波形 canvas
- typography: Space Grotesk display (classical proportions, 700 weight) + JetBrains Mono、 hero title gilt にイタリック gradient で クラシック感
#技術スタック
#WebAudio 純合成 (録音音源不要)
const partials = [
{ mult: 1.0, gain: 1.00, type: "sine" }, // 基音
{ mult: 2.0, gain: 0.32, type: "sine" }, // 2倍音
{ mult: 3.0, gain: 0.16, type: "sine" }, // 3倍音
{ mult: 4.0, gain: 0.08, type: "sine" }, // 4倍音
]OscillatorNode を 4 つ重ねて 「ピアノ風」 の音色を合成。 ピアノに完全に近づける必要はなく、 「sine 基音だけだと薄く感じる、 倍音を弱めに重ねると音感判定に必要な厚みが出る」 という最小設計。
#等分平均律 + A4=440Hz
function midiToFreq(midi: number) {
return 440 * Math.pow(2, (midi - 69) / 12)
}12 平均律で A4 = MIDI 69 = 440Hz を基準。 ピッチクラス 0..11 = C, C#, D, ..., B。 出題 root はランダムな pitch class × octave 3-4。
#3 モード × 3 レベル の問題生成
function makeQuestion(mode, level): Question {
// mode === "note": 12 音から 1 つ、 候補は同音から N 個 (Easy:3 / Normal:6 / Hard:12)
// mode === "interval": ランダム root + ランダム interval (12 種)、 候補は他 interval
// mode === "chord": ランダム root + ランダム chord (8 種、 三和音 4 + 四和音 4)
}正解は配列の最後に置かず、 candidates 全体を再 shuffle。 「左端 = 正解」 のバイアスを避ける。
#波形可視化
analyser.getByteTimeDomainData(buf) // Uint8Array 0-255、 128 が無音
// → Canvas 2D で gilt 色で線描画requestAnimationFrame で毎フレーム更新。 音が出ていない時は 128 の直線。
#iOS Safari の AudioContext
iOS Safari では最初のユーザー操作まで AudioContext が suspended。 「トレーニングを始める」 ボタンを必ず 1 回押させる UX で ctx.resume を呼ぶ。
#まだやっていないこと
- サンプルベース音源 (本物のピアノ録音) への切替オプション。 軽量な ~100KB のシングルピッチ音源を pitch-shift する設計でいける
- localStorage スコア永続化 + リロード後の継続
- 段階トレーニング (curriculum) — 「Day 1: 完全5度のみ → Day 2: + 完全4度 → ...」 的な段階解禁
- リズム当て / メロディ模唱 (マイク + 音程推定 + Pitch detection)
- Web MIDI 入力 で実楽器でアンサー
- ヘッドホン非装着 警告 (audio output device detection)
- 共有 URL で スコア / 設定 を SNS 自慢
[ ./next_action ]
読んだら、 ToneQuest を実際に動かす。
この開発ログは ToneQuest をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。