HTML5のaudioを使ってみる
メモです。
ビデオやオーディオの機能をブラウザに直接組み込むのはどう考えても
オープンではなくクローズな方向だと思います。
しかも、ブラウザ毎に対応可能なコーデックが違い、HTMLを書く側で
複数種のファイルを用意しろなどと言っています。
ここでは、そんな全く意図不明で役に立ちそうな感じのしない
HTML5のaudioタグを使ってみます。
ここに載せたものはブラウザごとに、またそのバージョンごとに動いたり
動かなかったりします。
別記事HTML5のaudio要素、メソッドとイベントにJavascriptによるメソッド呼び出し、 イベント取得の例を載せました。
<audio>タグを静的に置いてみる。
単純に<audio>タグにsrc指定する形のものを置いてみました。
audioタグをサポートしないブラウザではメッセージが出ます。
なお、audioタグを<p>内に置くと、サポートしているブラウザでも
メッセージが出てしまうことに注意が必要です。多分仕様のバグだと
思われます。え?HTML5そのものがバグだって?まあ、それは言わないことに。
MP3が再生できるか?
<audio src="../../../sound/audioTagTstMp3.mp3" controls> <p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
WAVが再生できるか?
<audio src="../../../sound/audioTagTstWav.wav" controls> <p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
OGGが再生できるか?
<audio src="../../../sound/audioTagTstOgg.ogg" controls> <p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
AACが再生できるか?
<audio src="../../../sound/audioTagTstAac.aac" controls> <p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
複数コーデックのファイルを指定する
とても面倒で馬鹿げたやり方ですが、複数のコーデックのファイルを用意しておいて、色々な ブラウザに対応させることができます。この記述はaudioタグに対応しないブラウザでは <source>行分の空行がでますので、その面でも馬鹿げています。 なお、メッセージが出るのはあくまでaudioタグに対応しない場合であって、コーデックに 対応していないというメッセージはこの形では出すことはできません。コーデックに 対応していない場合にリンクを出すといったことも出来ません。 HTML5はそもそも根本的発想がバグだって?それにはここでは触れません。
<audio controls> <source src="../../../sound/audioTagTstMp3.mp3" /> <source src="../../../sound/audioTagTstWav.wav" /> <source src="../../../sound/audioTagTstOgg.ogg" /> <source src="../../../sound/audioTagTstAac.aac" /> <p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
JavascriptでAudioクラスを動かしてみる
次のようにAudioクラスを作ることでJavascriptでコントロールすることができます。
<script type="text/javascript"> function playAudio(file){ try { var audio = new Audio('../../../sound/'+file); audio.play(); } catch(e){ alert("再生できません:"+e); } } </script> <input type=button value="audioTagTstMp3.mp3" onClick="playAudio('audioTagTstMp3.mp3')" /> <input type=button value="audioTagTstWav.wav" onClick="playAudio('audioTagTstWav.wav')" /> <input type=button value="audioTagTstOgg.ogg" onClick="playAudio('audioTagTstOgg.ogg')" /> <input type=button value="audioTagTstAac.ogg" onClick="playAudio('audioTagTstAac.aac')" />
構築時に""を指定し、srcプロパティにオーディオファイルを指定することもできます。
volume属性やseek指定、loop再生指定などもあるようです。詳細はここでは述べません。
idを付けた<audio>タグでの制御も可能なはずですがブラウザが固まってしまいました。
単純リンク
HTML5と無関係ですが、念のため <a>タグによる単純リンクを置きます。
MP3が再生できるか?
<a href="../../../sound/audioTagTstMp3.mp3" class=A1>audioTagTstMp3.mp3</a>audioTagTstMp3.mp3
WAVが再生できるか?
<a href="../../../sound/audioTagTstWav.wav" class=A1>audioTagTstWav.wav</a>audioTagTstWav.wav
OGGが再生できるか?
<a href="../../../sound/audioTagTstOgg.ogg" class=A1>audioTagTstOgg.ogg</a>audioTagTstOgg.ogg
AACが再生できるか?
<a href="../../../sound/audioTagTstAac.aac" class=A1>audioTagTstAac.aac</a>audioTagTstAac.aac
embedで指定
embedタグで指定する例です。なぜかソースを相対ディレクトリで指定できませんでした。
oggは再生できないようです。
<embed src="http://k-hiura.cocolog-nifty.com/sound/audioTagTstMp3.mp3" width="180" height="30" type="audio/mpeg" autostart="false" >audioTagTstMp3.mp3</embed><br> <embed src="http://k-hiura.cocolog-nifty.com/sound/audioTagTstWav.wav" width="180" height="30" type="audio/wav" autostart="false" >audioTagTstWav.wav</embed><br> <embed src="http://k-hiura.cocolog-nifty.com/sound/audioTagTstOgg.ogg" width="180" height="30" type="audio/ogg" autostart="false" >audioTagTstOgg.ogg</embed><br> <embed src="http://k-hiura.cocolog-nifty.com/sound/audioTagTstAac.aac" width="180" height="30" type="audio/aac" autostart="false" >audioTagTstAac.aac</embed>
IEのみで動く方法(bgsound)
IEの場合bgsoundを使って音を出すことができます。
<script type="text/javascript"> function playMusic(file){ document.all.music.src='../../../sound/'+file; } </script> <bgsound src="" id="music"> <input type=button value="audioTagTstMp3.mp3" onClick="playMusic('audioTagTstMp3.mp3')" /> <input type=button value="audioTagTstWav.wav" onClick="playMusic('audioTagTstWav.wav')" /> <input type=button value="audioTagTstOgg.ogg" onClick="playMusic('audioTagTstOgg.ogg')" /> <input type=button value="audioTagTstAac.aac" onClick="playMusic('audioTagTstAac.aac')" />
###
ここで使ったオーディオファイルは ▲「ん」「な行」「ま行」と「が」音声合成試験を用いて作成し、 AdobeAuditionでmp3とoggに変換したものです。
| 固定リンク