音もLEARNに加える。
色の学習と同時に、音符を練習する Music Notes を作った。五線譜上の音符を見て名前を確認し、「音をきく」で実際の高さを聞く。「おぼえる」と「クイズ」の2つのモードを用意した。
最初の対象はト音記号のドからシまでの7音。C4、D4、E4、F4、G4、A4、B4を扱う。♯や♭、高いド、複数の音符を読む楽譜にはまだ広げていない。
五線譜をSVGで描く。
五線譜と音符は画像素材ではなくSVGで描画する。5本の線とト音記号、音符をひとつのSVGにまとめ、選んだ音に合わせて音符のY座標を動かす。
音のデータは src/data/learn-cards.mjs にまとめた。E4を五線の最下線として、全音階で1段上がるごとに10単位ずつ上へ移動する。
中央ドのC4は五線の下にあるため補助線を表示する。それ以外の音では補助線を隠す。B4では符尾を下向きにして、音符の位置に合わせた表示にした。
「おぼえる」では音名に加えてC4などの表記も表示する。「前へ」「次へ」でドからシまで順番に移動できる。
ブラウザで音を作る。
実際の音には音声ファイルを用意せず、Web Audio APIを使う。
周波数は、C4を261.63Hz、D4を293.66Hz、E4を329.63Hz、F4を349.23Hz、G4を392Hz、A4を440Hz、B4を493.88Hzとした。
「音をきく」を押したときにAudioContextを作成し、以降は同じContextを再利用する。ページ表示時には音を鳴らさない。停止中のAudioContextはユーザー操作の中で resume() し、iOSなどの自動再生制限にも合わせる。
音源はシンプルなサイン波。GainNodeで最初の約0.03秒を徐々に上げ、最後も徐々に音量を下げる。突然音を開始・停止したときのクリックノイズを抑え、約0.9秒で1音を終了する。
ページを非表示にしたり離れたりした場合には再生中の音を停止し、ページを離れるときにはAudioContextも閉じる。
音符を4択で答える。
「クイズ / 10もん」では、五線譜上に1つの音符を表示して「これはなんのおと？」と4択で答える。
対象は7音なので、10問の中では同じ音が複数回出る。ただし、直前と同じ音が続かないよう出題順を調整した。
各問題には正解と3つの別の音を並べ、同じ選択肢は重複させない。回答後は選択肢を無効にし、二重採点を防ぐ。正解・不正解は文字でも表示し、正しい音名をその場で確認できる。
Music Notesではクイズ中も「音をきく」を残している。押せば答えのヒントになるが、試験ではなく学習用なので、音符を見ることと音を聞くことを組み合わせられる形を優先した。
10問を終えて、もう一度。
問題画面には現在の問題数と正解数を表示する。回答したあとに「つぎへ」で次の音符へ進み、10問目では結果画面へ切り替える。
結果には「8 / 10」のように正解数を表示し、「もういちど」で新しい10問を始める。得点と出題内容はその場で作り直す。
ColorsとMusic Notesでは同じクイズ処理を src/scripts/learn-quiz.mjs から利用する。10問の生成、4択のシャッフル、回答済み状態、得点処理をページごとに重複して持たない構成にした。
見ることと聞くことをブラウザ内で完結させる。
画面はColorsと共通の src/components/LearnCards.astro、ブラウザ処理は src/scripts/learn-cards.ts にまとめた。
外部音源や音声APIは使わない。問題、正解数、現在位置もサーバーへ送信せず、ブラウザ内のメモリだけで扱う。ページを閉じたり再読み込みしたりすると結果は消える。
テストでは7音の周波数、五線譜上のY座標、10問の出題、4つの選択肢、連続して同じ音を出さないこと、二重採点を防げることを確認した。実際の音の聞こえ方や端末ごとのAudioContextの動作は、ブラウザ上でも確認した。
Learnの6本目として公開する。
Music Notes は、Colorsと同日に追加したLEARNの6本目。
2026年9月11日の追加コミットで、Colorsと共通の画面・クイズ処理を使いながら、SVGの五線譜とWeb Audioによる音の再生を追加した。文字、計算、色に加えて、音符を見て音を聞く練習も同じLEARNから始められるようになった。