HTML5で作ったピアノ演奏ページ。iPadでも制限付きで動作する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 前回の記事ではHTML5 Audioを使ってサウンドプレイヤーを作りましたが、HTML5 Audioで再生できるのは音楽だけではありません。ブラウザーだけで音声ファイルを再生できるということは、発想を変えるとおもしろい使い方ができます。 今回は、HTML5 Audioを使ってブラウザー上で演奏できる鍵盤楽器を作ります。画面上に表示した鍵盤がクリックされたらあらかじめ用意しておいたピアノの音声ファイルを再生し、あたかもピアノ演奏の気分を味わえるようにします。ピアノだけでは少々物足りないので、おまけとしてオルガン、木琴、PSG音源の音色も用意しました。 また、今回のサンプルはアップルのiPad/iPhone（iOS4以

たとえば「ミ」であれば「E3」のID名を割り当てます。このようにファイル名と同様の規則でID名を設定すると、鍵盤がクリックされた時にID名から演奏すべきファイル名を簡単に求められます。 次に、スクリプトでそれぞれの鍵盤に対してクリックイベントを割り当てます。クリックされたらthis.idとして鍵盤のIDを求めます。鍵盤IDとフォルダのパスと音声ファイルの拡張子を連結すると、再生すべきファイルのURLになります。 var url = "music/Piano/"+this.id+".wav"; この音声ファイルのURLを以下のようにnew Audio()の引数へ渡した後にplay()メソッドを呼び出します。 var audioObj = new Audio(url); audioObj.play(); 以上で、鍵盤をクリックすると対応する音が出るようになります。実際のプログラムはサンプル01

Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, features powerful privacy protections, and optimizes battery life — so you can browse how you like, when you like. And when it comes to speed, it’s the world’s fastest browser.1 Learn how to make Safari your default browser Safari comes with industry-leading privacy protection techn