jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

audio要素の使い方

今回はHTML5のaudio要素の使い方を簡単に紹介します。

ウエブ上で音声ファイルを実行したい場合、HTML5以前は何らかのプラグインを導入する必要があったようです。しかし、HTML5でaudio要素が導入されて、その必要がなくなりました。ウエブ上では、Web Audio APIの使い方もよく紹介されていますが、これから紹介するaudio要素だけでも簡単に音声ファイルを実行することができます。

HTMLにdivを作成

今回は、音声ファイルのコントローラーではなく、ウエブ標準のボタンを押したときに、あらかじめ決めておいたファイルが再生されるようにします。そこで、ボタンをHTML内に作成しておきます。

<div id = "sound">
    <button type = "button" id = "soundstart" onclick = "sound_play();">Play!</button>
</div>

JavaScriptでaudioノードを生成

いつものようにD3.jsを利用します。ポイントはaudioオブジェクトに必ずidをつけることです。音声ファイルを再生するとき、このidにplayメソッドを適用します。

function sound_play() {
    var sounds = d3.select("#sound").append("g").append("audio").attr("id","playsound").append("source").attr("src","magic1.wav");
    playsound.play();
}

これだけです。ここまでをまとめると以下のようになります。




audio要素にidを設定しておいて、idからplayメソッドを実行する。このとき、idがオブジェクトの扱いになっていることに違和感があるのですが、とにかく簡単に音声ファイルを再生できます。