html Javascript プログラミング 楽器

ピアノの譜読み練習アプリを作った

譜読み練習

ブラウザ上で動作する、MIDI キーボード対応の譜読み練習アプリを作りました。


出題する音の範囲、調号、スケール外の音の有無、譜表の種類(ト音のみ、へ音のみ、大譜表)、加線ルール、臨時記号表記などを設定すると、ランダムに音符が表示されます。

表示された音符に対応する鍵盤を弾いて、正解すると次の音符か表示されます。

PCにMIDIできるものであれば、ピアノ以外の楽器でも使えるんじゃないかと思います。

特徴

  • MIDI キーボード入力で解答できる
  • ト音譜表、ヘ音譜表、大譜表に対応
  • 調号に応じた音名表記
  • 大譜表では、中央付近の音に,加線付き出題を行うかどうかの ON/OFF と加線の上限本数が設定できる
  • 問題譜面の表示倍率の切り替えが可能
  • 設定内容はローカルに保存されて次回も再現される

使い方

  1. PCにMIDI キーボードを接続します
  2. github pagesを開くか、ダウンロードしたindex.html をブラウザで開きます。
  3. MIDIへのアクセス権限を求められたら許可します
  4. 出題範囲、調号、譜表などを設定します
  5. 問題の音符に対応する鍵盤を弾きます
  6. 正解すると次の問題が表示されます

navigator.requestMIDIAccess() を使用しているため、ブラウザによっては動作しません。

例によって、ご利用は自己責任でお願いします。

Codexすごい

今回はChatGPTで作ったものをCodexでブラッシュアップして作りました。

やっぱりコードをAIが直接修正してくれるのは便利ですね。なにしろ仕事が速い。

ChatGPTのアカウントでそのまま使えて追加のサブスク料金とか要らないのもいいです。

-html, Javascript, プログラミング, 楽器