Elmで書いた楽譜(音つき)サイト

1.はじめに

ソースとデモはこちら。[https://ellie-app.com/7JpgqVnGk5Va1]
「ランダム」ボタンで楽譜を選んで、音を鳴らすためのコントロールを押すと、楽譜に対応するMIDIが鳴ります。

2.使い方

童謡がたくさん入っていますので、音に合わせてドレミで歌うことによって、楽譜が読めるようになるし、音程の練習になります。
また、習い始めの楽器などあればたくさんの曲の練習をすることができます。

3.プログラムについて

楽譜はlilypondで作りました。1曲入れるのに15分ほどですが、200曲ほどありますので、それなりに時間がかかっています。このプログラムのためでなく、楽譜の勉強用に過去に作ったものを使いました。自動でpdfとmidiができますので、ubuntu上のツールを使ってpdfをトリミングしてjpegに変換しました。midiもubuntu上のツールを使って、midi -> wav -> mp3にしました。jpegとmp3をgoogle driveでElmからdirect linkしています。

音はElm(JavaScript)のaudioタグを使っています。midiは鳴りませんが、wav, mp3, base64を鳴らすことができます。base64に変換してプログラムに埋め込むのをやりたかったけど、今回はmp3で鳴らしています。

4.感想

楽譜を見ながらドレミで歌いたい、というニーズはあると思うのですが、カラオケソフトを含めてそういうアプリはないと思う。見つけてないだけかもしれませんが。
今回はランダムボタンだけですが、曲の検索とか、キーの上下とか、スピードコントロールとかできると嬉しいけどまだやりかたが思いつきません。

5.追記

曲の検索ですが、例えば、「花は咲く」の楽譜が欲しいとか、あるかないか知りたい場合、左側のソースを全部コピー(C-a, C-c)して、自分のエディターにペースト(C-v)して、「花は咲く」を検索すると

 , { jpgUrl = "https://drive.google.com/uc?id=1rHwKYFxld4fdO0tfBcfJRSjQgznWBxil"
 , mp3Url = "https://drive.google.com/uc?id=1lW7x2No_cMDxZgZz8eoh03SZ7NvBF2Au"
, title = "花は咲く(まっしろなゆきみちにはるかぜかおる)"
, filename = "hanawasaku_crop.pdf"
 }

とかの部分のjpgUrlが楽譜のjpeg、mp3Urlが音のmp3です。

以上