IT技术互动交流平台

HTML网页音效播放兼容性整理

作者:程式宅急便  发布日期:2013-09-27 20:33:41

客户要求千奇百怪,之前做的在线客服系统,希望收到讯息时加上音效提示,希望把它当作MSN(翻桌),基本上这样还蛮吵的,但在这吵杂声中,顺便把各种拨放音效的方式做个浏览器兼容性的整理。

 

1.Hyperlink

IE7+(会跳出下载窗口)、Chome、Firefox、Opera

<a href="msg.wav">Play Sound</a>

2.embed

IE7、Chome、Firefox、Opera

<embed src="msg.wav" autostart="false" loop="false">

3.Javascirpt(旧方法)

IE7+、Chome、Firefox、Opera(除IE外,刚进入页面的时候接会拨放一次)

<script>
    function PlaySound(soundobj) {
        var thissound = eval("document." + soundobj);
        thissound.Play();
    }
</script>

<input type="button" value="Play Sound" onClick="PlaySound('sound1')">
<embed src="msg.wav" autostart=false width=0 height=0 name="sound1" enablejavascript="true">

4.Javascript(新方法)

IE7+、Chome、Firefox、Opera(除IE外,刚进入页面的时候接会拨放一次)

<script>
function EvalSound(soundobj) {
    var thissound = document.getElementById(soundobj);
    thissound.Play();
}
</script>

<embed src="msg.wav" autostart="false" width="1" height="1" id="sound1" enablejavascript="true">
<input type="button" value="Play Sound" onClick="EvalSound('sound1')">

5.Background标签

IE Only

<bgsound id="sound">
<script>
    function PlaySound(url) {
        document.all.sound.src = url;
    }
</script>
<input type="button" value="Play Sound" onClick="PlaySound('msg.wav')">

6.Dynamic HTML

IE7+、Chome、Firefox、Opera

<script>
function DHTMLSound(surl) {
    document.getElementById("dummyspan").innerHTML =
      "<embed src='" + surl + "' hidden=true autostart=true loop=false>";
}
</script>
<span id=dummyspan></span>
<input type="button" value="Play Sound" onClick="DHTMLSound('msg.wav')">

7.HTML5

IE9+(只支援mp3)、Chome、Firefox、Opera

<script>
    function EvalSound(soundobj) {
        var thissound = document.getElementById(soundobj);
        thissound.play();
    }
</script>
<audio id="audio1" src="msg.wav" controls preload="auto" autobuffer >
</audio>
<input type="button" value="Play Sound" onClick="EvalSound('audio1')">

结论

如果要再某个事件触发(如Click)又要兼顾兼容性,方法6是比较好的做法

 

延伸阅读:

Tag标签: 网页音效  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规