このページの本文へ

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

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

2010年06月03日 10時00分更新

古籏一浩

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

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

HTML5 canvas
HTML5サウンドプレイヤーのサンプル。マウスで選択した曲(音声ファイル)が再生される。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能)

 本連載でもこれまでHTML5 Videoを使って動画を再生する方法を紹介しましたが、今回は音声を再生してみましょう。HTML5ではプラグインを使用しなくても動画や音声を再生できます。

 今回はHTML5 Audioのサンプルとして、選択した音楽(音声ファイル)を再生するサウンドプレイヤーを作ります。単に音楽を再生するだけでは面白くないので、Canvasを使ってビジュアルを表示する機能も付けます。さしずめ、iTunesやWindows Media Playerのブラウザー版、といったところでしょうか。


ブラウザーによって違うサポート形式

 HTML5 AudioはVideoと同じメディア要素として扱われているため、Videoとほぼ同じプロパティとメソッドが使えます。すでにHTML5 Videoをスクリプトで制御していれば、Audioもほぼ同じ手法で処理できます。

 HTML5 Videoはブラウザーによって対応する再生フォーマット(コーデック)がバラバラなのが厄介でしたが、残念ながらAudioの場合も状況は同じです。現状では、Safari、Firefox、Opera、Google Chromeのすべてに対応しているフォーマットはありません。


各ブラウザーの音声ファイルの対応状況
wave ogg aiff mp3 au
Firefox 3.6 × × ×
Google Chrome 5 × × ×
Safari 4 ×
Opera 10.5 × × ×
△:データサイズによって再生までに時間がかかることがある

 すべてのブラウザーに対応させるには、Wave形式かOgg形式を基本にして未対応のブラウザーだけ処理を振り分けるのが簡単です。今回はWave形式を基本にして、Wave形式が再生できない場合だけOgg形式を利用します。

書影

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

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

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

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

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

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

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

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

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

ランキング