今回は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がオブジェクトの扱いになっていることに違和感があるのですが、とにかく簡単に音声ファイルを再生できます。