« ◇ビートルズ赤盤・青盤・緑盤:音楽の並びの記憶 | トップページ | ◆単純明快な光子の存在証明試験を »

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>

audioTagTstMp3.mp3
audioTagTstWav.wav
audioTagTstOgg.ogg
audioTagTstAac.aac


 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に変換したものです。

|

« ◇ビートルズ赤盤・青盤・緑盤:音楽の並びの記憶 | トップページ | ◆単純明快な光子の存在証明試験を »

トラックバック


この記事へのトラックバック一覧です: HTML5のaudioを使ってみる:

« ◇ビートルズ赤盤・青盤・緑盤:音楽の並びの記憶 | トップページ | ◆単純明快な光子の存在証明試験を »