HTML5で作ったピアノ演奏ページ。iPadでも制限付きで動作する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能）

　前回の記事ではHTML5 Audioを使ってサウンドプレイヤーを作りましたが、HTML5 Audioで再生できるのは音楽だけではありません。ブラウザーだけで音声ファイルを再生できるということは、発想を変えるとおもしろい使い方ができます。

　今回は、HTML5 Audioを使ってブラウザー上で演奏できる鍵盤楽器を作ります。画面上に表示した鍵盤がクリックされたらあらかじめ用意しておいたピアノの音声ファイルを再生し、あたかもピアノ演奏の気分を味わえるようにします。ピアノだけでは少々物足りないので、おまけとしてオルガン、木琴、PSG音源の音色も用意しました。

　また、今回のサンプルはアップルのiPad/iPhone（iOS4以降）上のSafariでも動作します。Windows/Mac OS上のブラウザーでは複数の音声ファイル（和音）を再生できるのに対して、iPad/iPhoneでは仕様上、同時に1つの音声ファイルしか再生できませんが、HTML5+JavaScriptだけで楽器アプリを作れる手軽さを楽しみましょう。

ツイートする

この連載の記事

• 第65回  HTML5でiPhoneアプリ開発！PhoneGap入門
• 第64回  Canvasで作ったWebアプリをiPhoneアプリに変換
• 第63回  NimbleKitでiPhone用動画アプリを自作しよう
• 第62回  NimbleKitで自分だけのiPodアプリを作ろう
• 第61回  JavaScriptでiPhone/iPad用フォトアルバムを作ろう
• 第60回  MapKit×JavaScriptでiPhone用GPSアプリ
• 第59回  MapKitなら4行で作れるiPhone用地図アプリ
• 第58回  NimbleKitをインストールしてJSでiPhoneアプリ開発
• 第57回  JavaScriptでiPhoneアプリ開発！NimbleKit入門
• 第56回  HTML5版Dashboardウィジェットを作ってみた
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• 古籏一浩のJavaScriptラボ

• HTML5 Audioで作るiTunes風音楽プレイヤー

• HTML5 videoでニコニコ動画風プレーヤーを作ろう

• HTML5 videoで作る“動くストリートビュー”

• HTML5のCanvasで作る、Flash不要のお絵かきツール

• HTML5先取り！CanvasならFlash不要で絵が描ける

• HTML5のcanvasで作る画像フィルター

• iPhoneのGPSをJavaScriptで操ろう

• 29分でできる！ あのサイトの“技”を盗め

• Firefoxでソフトシンセも作れるAudio Data APIの使い方

• Audio Data APIでブラウザーをシーケンサーに！

• JavaScriptでEPUBビューアーを自作してみた

• iOS 4.2の新機能で作るHTML5+JSアプリ

• HTML5で注目！インラインSVGの使い方

• HTML5のInline SVGをJavaScriptで操作

• HTML5 SVGで作るシューティングゲーム

• iOS 4.2×localStorageで作るGPSレコーダー

• Web技術で作るDashboardウィジェット開発入門

• Mac用ウィジェットをHTML/CSSで自作

• HTMLとJavaScriptで作れた！Mac用ミニアプリ

• jQueryでDashboardウィジェットを作ろう

• HTML5版Dashboardウィジェットを作ってみた

• JavaScriptでiPhoneアプリ開発！NimbleKit入門

• NimbleKitをインストールしてJSでiPhoneアプリ開発

• MapKitなら4行で作れるiPhone用地図アプリ

• MapKit×JavaScriptでiPhone用GPSアプリ

• JavaScriptでiPhone/iPad用フォトアルバムを作ろう

• NimbleKitで自分だけのiPodアプリを作ろう

• NimbleKitでiPhone用動画アプリを自作しよう

• Canvasで作ったWebアプリをiPhoneアプリに変換

• HTML5でiPhoneアプリ開発！PhoneGap入門

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識728 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2208 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1496 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• デル、メモリー／BDドライブ無償アップグレードキャンペーン

  

• AntecのPLATINUM電源は、回路やファンもプラチナ級！

  

• マザーとVGAとBF3がセットになった超豪華パックが限定出荷！

  

• Micro ATXで拡張性も高いモバイルSandy Bridge用マザー

  

• 真空管似のUSBサウンドアダプターがENERMAXから