1.因为object只能在IE中使用audio在ie中不兼容，object和audio搭配使用基本可以 解决兼容问题
2.简单的html+css代码
<div class="right-audio"> <div class="audio_btn" id="audio_btn"><span id="time-s">10"</span></div> <object style="display:none " classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" class="oO" id="radios"> <param name="AutoStart" value="0" /> <param name="FileName" value="http://www.fuguojian.cn/music/Big%20Big%20World.mp3" /> <audio controls id="photo_audio" style="display:none " onended="audio_btn.click()" src="http://www.fuguojian.cn/music/Big%20Big%20World.mp3"></audio> </object> </div>实际样式：
其中object 和audio使用样式display:none进行隐藏
3.在.audio_btn绑定click事件触发音频播放
$(function(){ $(document).delegate('.audio_btn','click',playRadio) }); //playRadio的实现 function playRadio(){ //toggle事件处理 $(this).toggle(function(i){ playVoice(this); }, function(i){ pauseVoice(this); }); $(this).trigger('click'); } //playVoice和pauseVoice实现 //播放 function playVoice(_this){ $(".audio_btn").addClass("audio_btn_on"); var rd=document.getElementById("radios"); if(document.all) rd.play(); else document.getElementById("photo_audio").play(); } //暂停 function pauseVoice(_this){ $(".audio_btn").removeClass("audio_btn_on"); var rd=document.getElementById("radios"); if(document.all) rd.stop(); else document.getElementById("photo_audio").pause(); }其中document.all是判断是否是IE浏览器
4.这样基本就完成了音频的播放，如果你想在音频播放完的时候触发事件在audio上有onended可以调用
5.object监听播放完毕事件比较麻烦
在object里添加：<param name=”SendPlayStateChangeEvents” value=”true”>
使用JavaScript监听器，监听MediaPlayer的PlayStateChange()事件，MediaPlayer在
状态改变的时候发生该事件。该事件的添加方法如下：
<script language="JavaScript" for="player" type="text/javascript" event="PlayStateChange(newstate)">
//JavaScript代码 </script>
newstate即为MediaPlayer的播放状态。
6.object更换音频文件
document.getElementById(“radios”).Filename=url;
转载请注明：cooljun小窝 » html+css 中object标签和audio标签兼容使用
如果你觉得这篇文章对你有帮助，请支持我继续更新网站 ！捐赠本站
