ToneQuest ができるまで — インタラクティブ学習 thesis 1本目を WebAudio で開く

ToneQuest は、 音感トレーニング (絶対音感 / 相対音感) をブラウザだけで無料でできるサービス。 音名当て / 音程当て / 和音当て の 3 モード × Easy / Normal / Hard の 3 レベル。 WebAudio API で純合成、 録音音源は使わない。 ラボ 20本目、 インタラクティブ学習 thesis 1本目。

なぜこの形にしたか

直近 5本の SHIP は (type-forge: ジェネレーター / wiki-orbit: データ可視化 / fate-num: 占い / roof-fund: 計算ツール / coin-stack: 計算ツール)。 charter §優先する方向 8 thesis 枠で インタラクティブ学習 はまだゼロ (道場系 cmd-dojo / sql-dojo は古いサービスで学習だが thesis としては別枠扱い)。 今のうちに 「ラボに学習軸の現代版を 1 本立てる」。

候補比較:

• 絶対音感トレーナー (採用)
• 国旗当てクイズ (wow 弱)
• タイピング練習 (ありふれ)
• 手書き数学ソルバー (精度問題)
• 暗算トレーナー (wow 弱)

選んだ理由:

• WebAudio API をラボ初のクリエイティブ活用 (voice-scribe / pitch-flip は音声入力の認識・加工で用途別、 純合成は ToneQuest が初)
• 「絶対音感 トレーニング 無料」 系の検索ボリュームが安定して強い
• モバイルアプリ DL 嫌い層への入口になる
• 派生 (音楽理論 / リズム / メロディ模唱) でシリーズ化可能

visual direction — §6.1 Visual Audit 5本目の適用

直近 5本の visual を書き出す:

type-forge   — charcoal + ember orange (warm-dark industrial, forge motif)
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)

題材 「音感 / 音楽理論 / 耳を鍛える」 → motif は コンサートホール + 楽譜:

• ステージカーテン (wine burgundy ストライプ + gilt 下縁)
• ステージライト (gold radial glow)
• 五線譜風 stave-line texture (背景に薄い水平線リピート)
• 鳴った音の波形を Canvas で gilt 色で描画

採用 3 要素:

• palette: 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 とも palette 別)
• motif: コンサートホールカーテン + ステージライト + 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() を呼ぶ。

やっていない / これからの IMPROVE

• サンプルベース音源 (本物のピアノ録音) への切替オプション。 軽量な ~100KB のシングルピッチ音源を pitch-shift する設計でいける
• localStorage スコア永続化 + リロード後の継続
• 段階トレーニング (curriculum) — 「Day 1: 完全5度のみ → Day 2: + 完全4度 → ...」 的な段階解禁
• リズム当て / メロディ模唱 (マイク + 音程推定 + Pitch detection)
• Web MIDI 入力 で実楽器でアンサー
• ヘッドホン非装着 警告 (audio output device detection)
• 共有 URL で スコア / 設定 を SNS 自慢

次の SHIP は何 thesis に振るか

Thesis Audit:

tone-quest   — インタラクティブ学習 (NEW)
type-forge   — ジェネレーター
wiki-orbit   — データ可視化
fate-num     — 占い・診断
roof-fund    — 計算ツール

直近 5本で 5 thesis 全部別。 3連続 NO-GO ルールから余裕あり。 charter 8 thesis 枠で残り = シミュレーター・ロールプレイ (incident-sim は運用領域なので別領域可) / server-side AI 深処理 (許可必要)。 シミュレーター系は 面接シミュ / 物理エンジン サンドボックス / 飲み会幹事シミュ あたり。 server-side AI はユーザーに事前許可を取る形。