flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

HTML5のAudioタグで対応していないブラウザをなしにする方法

HTML5と旧HTMLを混合させる無茶なやり方

おなじみ音声再生は<audio>タグが担っております。

最近jsでの音楽プログラミングについて勉強してIEの対応がない事に関して

腑に落ちず方法を考えました。

 Sample1

 <bgsound src="url">

HTML5のaudioタグが出るまで、音声だけに関しては<bgsound>だけがIEのみの展開になっていました。

それを突くのが今回の趣旨となります。

<bgsound>はJavaScriptから制御できて

Sample2

<script type="text/JavaScript">	
	function IEplay(url){

		IEaudio.src = url;

	}
</script>
<div onClick=IEplay(url)>曲名</div>

クリックする事により<bgsound>タグのsrc属性の中身が変わり音楽を流せます。

つまりsrcが変わるので、audioのJavaScriptでいうplay()とpause()の切り替えしが不必要になります。

この時の<bgsound>はsrc属性に""(空文字)か音無しのファイルを設定しておきましょう。

 

これらを組み合わせて

audio側は対応と読み込みがよく容量の軽いoggファイルが扱える

ない部分をwaveファイルで

bgsoudで

  • IE

これらの要素で全てのブラウザに音楽データを渡せます。

wave仕様は省いて、IEとfirefox郡のブラウザの対応方法ですが。

 Sample3

music_url = { //Firefox郡対応のoggファイルを格納
			"Music01" : "Sample01.ogg",
"Music02" : "Sample02.ogg",
"Music03" : "Sample03.ogg",
"Music04" : "Sampke04.ogg",
"Music05" : "Sample05.ogg"
}; IE_music_url = { //IE対応のmidファイルを格納 "Music01" : "Sample01.mid",
"Music02" : "Sample02.mid",
"Music03" : "Sample03.mid",
"Music04" : "Sampke04.mid",
"Music05" : "Sample05.mid"
}; if(navigator.userAgent.match(/msie/i)){ //ナビゲータオブジェクトでIEブラウザの判断 for( var key in IE_music_url ){ document.write("<div onClick = IEplay('" + IE_music_url[key] + "','" + key + "')>" + key + "</div>"); } } else{ //Firefox郡の処理 for( var key in music_url ){ document.write("<div onClick = play('" + music_url[key] + "','" + key + "')>" + key + "</div>"); } } click_num = 0; //音楽が再生されているか再生していないかの判定変数 function play(url,date){ if(click_num == 1){//音楽が再生されているとき audioDate.pause();//音楽を止める click_num--; } audioDate = new Audio(url);//音楽が再生されていないとき audioDate.play();//音楽を流す click_num++; } function IEplay(url){ IEaudio.src = url;//bgsoundの処理 }

分岐に関しては、ナビゲータオブジェクトでIEだけ選出して割り振ります。

IEだった場合は関数IEplayを呼び出して先の処理を行います。

IEじゃない場合はaudioのオブジェクトを生成してそちらで音楽処理を行うという形にします。

 またwaveファイルでの処理もbgsoundでは可能ですが容量が20MB以上ある場合、まずすぐに再生されないことは

覚えておきましょう。

50MBのファイルで10分後に再生されたのを確認済みです。