category:
Technology
Back to Blog Index
IE8にも対応させるaudioタグ
Flashを使わないで、HTML5のaudioタグを使った音声再生をIE8以上に対応させる方法です。
上記のデザインの場合、audioタグのデフォルトのプレーヤーは使わないので、IE以外ではjsのAudioクラスを使って、audioタグを生成します。
IEでは、html5mediaやaudiojs等を使っても、Audioクラスが有効にならないので、Audioクラスを使ったjsで制御ができません。
そのため、IE8以下では、IEの独自拡張であるbgsoundを使います。
headタグ内
<head>
<script type="text/javascript" src="/js/jquery-1.8.2.min.js" charset="UTF-8"></script>
<!--[if (gt IE 8)|!(IE)]><!-->
<script type="text/javascript" src="/js/audio.js"></script>
<![endif]-->
<!--[if (lt IE 9) ]>
<bgsound src="mp3/test.wav" loop="infinite" id="audio_ie">
<script type="text/javascript" src="/js/audio_ie.js"></script>
<![endif]-->
</head>sound <span id="btn_audioOn"><a href="" onclick="return false;">on</a></span> | <span id="btn_audioOff"><a href="" onclick="return false;">off</a></span>$(function() {
var audio = new Audio();
var audio_file_list = [
{url:"mp3/test.mp3" , type:"audio/mpeg"},
{url:"mp3/test.ogg" , type:"audio/ogg"},
{url:"mp3/test.wav" , type:"audio/wav"}
];
var i;
var num = audio_file_list.length;
for(i=0;i < num;i++){
if(audio.canPlayType(audio_file_list[i].type) != ""){
audio.src = audio_file_list[i].url;
break;
}
}
audio.loop = true;
audio.autoplay = true;
audio.preload = "auto";
audio.play();
$("#btn_audioOn").click(
function () {
audio.play();
$("#btn_audioOn a").css({color: "#40a4e6"});
$("#btn_audioOff a").css({color: "#fff"});
return false;
}
);
$("#btn_audioOff").click(
function () {
audio.pause();
$("#btn_audioOn a").css({color: "#fff"});
$("#btn_audioOff a").css({color: "#40a4e6"});
return false;
}
);
});$(function() {
$("#btn_audioOn").click(
function () {
// $("#audio_ie").attr("src", "mp3/test.wav");
$("#audio_ie").attr("volume", "0");
$("#btn_audioOn a").css({color: "#40a4e6"});
$("#btn_audioOff a").css({color: "#fff"});
return false;
}
);
$("#btn_audioOff").click(
function () {
// $("#audio_ie").attr("src", "");
$("#audio_ie").attr("volume", "-10000");
$("#btn_audioOn a").css({color: "#fff"});
$("#btn_audioOff a").css({color: "#40a4e6"});
return false;
}
);
});AddType audio/ogg .ogg
AddType audio/mp4 .aac
AddType audio/mp4 .m4a
AddType audio/mpeg .mp3
AddType audio/wav .wav