2011/5/18

audio タグのサンプル

以下、Audio を Javascript で制御するサンプルとなります。
音声は mp4 でエンコードしています。
対応ブラウザ:chrome、safari

audio タグの設置

src
オーディオファイルのURLを指定します。
属性として指定するのではなく、<source>xxx.mp3</source> のように、audio タグの内部の要素として記述することで、複数データの指定が可能です。
(これは、あくまで再生候補という意味で、複数の音声を再生するわけではありません。記述された順に再生可能なデータを利用するという意味のものです。)
loop
オーディオの再生が完了したら、最初に戻ってループ再生を実行します。
controls
再生・停止・ボリュームの調整を行うためのパネルを表示します。
(表示はブラウザの実装に依存します。)
preload
ブラウザの挙動を制御するための属性です。
指定可能な値は none, metadata, auto のどれかです。
none
再生されるまでデータのダウンロードを行わない。
metadata
コンテンツのメタ情報が格納されている部分だけをダウンロードする。
auto
事前にできるだけダウンロードする。

audio タグを Javascript で動作させるためのサンプルコード

この関数は、ページがロードされた後に実行し、予め操作する要素を取得しておくためのものです。

再生開始位置を先頭にセットし、再生時のループをOFFにしてから play 関数を呼び出して、音声を再生させています。

再生開始位置を先頭にセットし、再生時のループをONにしてから、play 関数を呼び出して、音声を再生させています。

pause 関数を呼び出して、動画の再生を停止させています。

音量を大きくしています。
音量を大きくしたい場合、volume プロパティの値を加算します。
volume プロパティは 0.0 〜 1.0 の値が指定可能です。

音量を小さくしています。
音量を小さくしたい場合、volume プロパティの値を減算します。
volume プロパティは 0.0 〜 1.0 の値が指定可能です。

ミュートのトグルを行います。
ミュートさせたい場合、muted プロパティに true を指定します。
逆にミュート状態から音がなる状態にするには、muted プロパティに true を指定します。

この記事に関するお問い合せ

株式会社クーシー 担当:三上
TEL:019-656-0003 E-mail:mikami@coosy.co.jp

HTML5の研究活動一覧へ戻る
COOSY Inc. Head Office : F Nissei Ebisu Bldg.7F 3-16-3 Higashi Shibuya-ku,Tokyo,Japan Laboratory : IPU Innovation Center 2-7, 152-409 Sugo Takizawa-shi,Iwate,Japan

Top of Page