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();