このページの本文へ

HTML5 Audioで作るiTunes風音楽プレイヤー (2/7)

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

文●古籏一浩

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

audio要素で音楽を再生する

 HTML5ではaudio要素が用意されているので、単純に音楽を再生するだけならJavaScriptを使うまでもありません。audio要素のsrc属性に再生したい音声ファイルのURLを指定するだけです。controls属性を指定すればコントローラー(再生/停止ボタン)も表示できますし、autoplay属性で自動再生、loop属性で繰り返し再生もできます(ただし、Firefox 3.6ではloopを設定しても繰り返し再生されません)。

 実際のHTMLはサンプル01です。

再生ボタンをクリックすると再生される

再生ボタンをクリックすると音楽が再生される



サンプル01[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>audioタグを使って音楽を再生する(1)</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
    </head>
    <body>
        <h1>audioタグを使って音楽を再生する(1)</h1>
        <div>
            <audio src="music/kfighter.wav" controls>
        </div>
    </body>
</html>


 サンプル01はWave形式のファイルを指定しているのでSafari、Firefox、Operaでは再生できますが、Google Chromeでは再生できません。そこでHTML5では、audio要素内にsource要素を入れ子にして記述する方法が用意されています。

 source要素のsrc属性に音声ファイルのURLを複数記述すると、ブラウザーは再生できる形式を見つけ次第再生を始めます。複数のファイル形式を指定しておけば、将来的に新しいブラウザーが登場しても再生できる可能性は高くなります。

 また、audio要素内にはsource要素だけでなく、HTML5 Audioに対応していないブラウザー(Internet Explorerなど)のためのメッセージも記述できます。object要素を記述して、非対応のブラウザー向けにFlashで音声を再生する方法もあります(この場合、Flashコンテンツ側で音声ファイルを再生させます)。

 ここまでをまとめたのがサンプル02です。


サンプル02[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>audioタグを使って音楽を再生する(2)</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
    </head>
    <body>
        <h1>audioタグを使って音楽を再生する(2)</h1>
        <div>
            <audio controls loop>
                <source src="music/kfighter.ogg">
                <source src="music/kfighter.wav">
                <source src="music/kfighter.mp3">
                <p>HTML5 Audioに対応したブラウザをご利用ください</p>
            </audio>
        </div>
    </body>
</html>


 サンプル02を実行してみると、表示されるコントローラーのデザインがブラウザーによって異なることが分かります。audio要素で音声ファイルを再生する方法は非常に手軽ですが、プレイヤーの見た目(スキン)を変更できないので、今回のサウンドプレイヤーの作成には不向きです。そこで、次ページからは今回の本題であるスクリプトを使って制御する方法を解説します。

2-1.png

Safari 4での表示

2-2.png

Firefox 3.6での表示

2-1.png

Opera 10.50での表示

2-2.png

Google Chrome 5βでの表示

2-4.png

IE6での表示

この連載の記事

一覧へ

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

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