@blog.justoneplanet.info

HTML5の要素の一つとして新しくaudio要素が加わった。このaudio要素を使用することでプラグインを使用することなく音源を再生することができる。(●´ω｀●)

■HTML

以下のようにしてaudio要素を使用できる。

<audio src="http://upload.wikimedia.org/wikipedia/commons/0/03/262Hz.ogg" controls></audio>

また以下のようにしてaudio要素に対応していないブラウザに対しての表示を行うことができる。

<audio src="http://upload.wikimedia.org/wikipedia/commons/0/03/262Hz.ogg" controls>
最新のブラウザを使ってくれよな
</audio>

以下のような表示となる。

ogg形式に対応していないブラウザ用にmp3の音源を使用してみた。

PCブラウザの対応状況

Chrome 9

両方再生可能だ

Firefox 3.6

MP3形式の音源が再生できない

IE 9

MP3形式のみ再生が可能

スマートフォンブラウザの対応状況

iPhone4のsafari

audio要素を理解できるが、ogg形式の音源を再生することはできず、MP3は再生することができた

android 2.1・2.2

audio要素を理解することができなかった。androidのOpera mobileでも再生することはできない

android 3.0

エミュレータ上ではあるが両方再生可能

androidのブラウザには本当に頑張ってほしい限りだ。(☍﹏⁰)

■JavaScript

以下のようにJavaScriptだけで音源を再生することもできる。

var audio = new Audio('http://upload.wikimedia.org/wikipedia/commons/0/03/262Hz.ogg');
audio.play();

再生時間の表示

以下のようにして再生時間を表示することができる。

var audio = new Audio('http://upload.wikimedia.org/wikipedia/commons/0/03/262Hz.ogg');
audio.addEventListener(
    'timeupdate',
    function(){
        document.getElementById('content').innerHTML = audio.currentTime;
    },
    false
);
audio.play();

以下のようにaudio要素をcreateElementした場合、そのオブジェクトに対して上述と同様のメソッドが使用できる。

var audio = document.createElement('audio');
audio.setAttribute('src', 'http://upload.wikimedia.org/wikipedia/commons/0/03/262Hz.ogg');
audio.setAttribute('controls', 'true');
document.getElementById('content').appendChild(audio);
audio.play();

■参考

audio – MDC Doc Center