このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第37回

iPad対応!HTML5 Audioで作るブラウザーピアノ

2010年06月28日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第37回です。過去の記事も合わせてご覧ください。

HTML5 piano
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だけで楽器アプリを作れる手軽さを楽しみましょう。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

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

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング