Firefox 3.1のHTML 5対応を検証--audio要素によるオーディオの再生

杉山貴章（オングス）
2008/09/18 08:00

video/audio要素のサポートのサポートは、HTML 5における新機能の目玉のひとつとして注目されている。今回はオーディオを再生するためのaudio要素について解説する。

audio要素によるオーディオファイルの再生

　HTML 5におけるaudio要素はHTMLAudioElementインタフェースとして定義される。これは、video要素を定義したHTMLVideoElementインタフェースと同様にHTMLMediaElementのサブインタフェースである。したがって、audio要素もvideo要素とほぼ同様の方法で使用することができる。

　例えば、Vorbis形式のオーディオ・ファイルを再生するための<audio>タグの記述方法はリスト1のようになる。<video>タグの場合とほぼ同様だ。

リスト1 audio要素の使用例

    <audio controls src="audio.ogg" id="myAudio"></audio>

　明示的にコーデックを指定する場合は、source要素を使用してリスト2のようにする。

リスト2 source要素でコーデックを明記

    <audio controls id="myAudio">
      <source src="audio.ogg" type="audio/ogg" codecs="vorbis">
    </audio>

　リスト3は、controls属性を付加しないで再生／停止ボタンを独自に作成した例である。これもvideo要素の場合とほぼ同様に記述できることがわかる。

リスト3 再生／停止ボタンをJavaScriptで実装

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>audioタグのサンプル</title>

    <script type="text/javascript">
      // 再生
      function play(a) {
        var audio = document.getElementById(a);
        audio.play();
      }

      // 停止
      function pause(a) {
        var audio = document.getElementById(a);
        video.pause();
      }
    </script>
  </head>

  <body>

    <h1>audioタグのサンプル</h1>

    <audio src="audio.ogg" id="myAudio"></audio><br/>

    <button onclick="play('myAudio'); return false;">再生</button>
    <button onclick="pause('myAudio'); return false;">停止</button>

  </body>
</html>

　このようにHTML 5では動画やオーディオのマルチメディアコンテンツを、フォーマットやコーデックに左右されずに共通の方法で利用することができるようになる。さらにFirefox 3.1ではTheoraおよびVorbisがネイティブにサポートされるため、別途プラグインをインストールすることなくこれらのコンテンツを再生することが可能となる。

　audio要素についてはFirefox 3.1 Beta 1より有効になる予定だが、現時点のnightly buildでは未実装の部分が多く動作は極めて不安定だ。正式リリースが待ち遠しい。

  • コメント（1件）

#1 anonymous  - 2009/07/12 22:45

pause 関数の中が video.pause() になっています。
» 不適切なコメントを報告する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
アプリケーション リファレンス Ajax セキュリティ JavaScript Webデザイン Opera 仮想化 Java Apple インストール データベース Windows Vista Tips WebKit iPhone ソフトウェア開発 Linux Safari マイクロソフト Off Topic プログラミング言語 Mozilla ブラウザ オープンソース Flash Mac OS X Webサービス Microsoft Database Internet Explorer モバイル OS 小技 脆弱性 PHP Windows XP UI iPod touch CSS Chrome 開発環境 Google Windows Firefox HTML Windows 7 Firefox 3 iPhone 3G RIA
  • 話題のタグを見る »