MIDI/Applet/Javascript/canvas

以前のポストで、MIDI ファイルじゃなくて MIDI 信号を、MIDIデバイスに直接送る Java Applet を作って、これを JavaScript から操作する実験をした。また、Blogger で HTML5 canvas を使うやり方について、このポストで目処をつけた。

今日はこの二つの連携させて、簡単な音感訓練ツールを作ってみた。

ただし、今回は FireFox メインで、他ブラウザは度外視する事にした。というのも、IE はcanvas 未対応だから、そのかわりに excanvas.js を使うと、マウスクリックイベントの座標が、canvas の座標じゃなくて個々の図形要素内の座標で返されるらしく、この違いを吸収するためのスッキリした解決策がどうにも見当たらなかったから。

Opera も けっこう挙動が違っていて、見捨てることにした。前回は できるだけクロスブラウザ になるよう頑張ったが、今やりたいことと関係無いので、さしあたり保留。というわけで、Firefox 限定って事で割り切った。

動作は、以下のような感じにした。

• マシンが４オクターブの範囲（大譜表の真ん中のドから上下2オクターブ）からランダムに選んだ音を聞いて、それを当てる。
• 緑色の部分をクリックすると問題の音が出力される。
• 音名に対応する白黒の丸をクリックすると、その音高の音が鳴り、正解・不正解が表示される。
• 正解なら、正解数がインクリメントされ、次の問題となる音が改めて選択される。
• 不正解なら、問題となる音はそのまま留保され、誤答数がインクリメントされる
• 正答でも誤答でも、正答率が更新される。

IE お断り

var canvas=document.getElementById("canvas091206");var ctx = canvas.getContext("2d");cx = 120;cy = 120;r1 = 80;r2 = 16;noteChar = ['C','','D','','E','F','','G','','A','','B'];ctx.fillStyle = "rgb(0,0,0)";ctx.textBaseline = 'middle';for (i=0; i<12; i++) {ctx.beginPath();a1 = (i * 30) * Math.PI / 180;cx + r1 * Math.sin(a1);ctx.arc(cx + r1 * Math.sin(a1), cy - r1 * Math.cos(a1), r2, 0, Math.PI * 2, false);if (1 ==i || 3 ==i|| 6==i||8==i||10==i) {ctx.fillStyle = "rgb(0,0,0)";ctx.fill();} else {ctx.fillStyle = "rgb(255,255,255)";ctx.fill();ctx.strokeStyle = "rgb(0,0,0)";ctx.strokeText(noteChar[i], cx + r1 * Math.sin(a1) - 4 , cy - r1 * Math.cos(a1));}}

本当、IE、なんとかならんかの･･･