网页背景音乐设置

一、添加背景音乐时，一般会用到两种标签：

    1、<bgsound>

    2、<embed>

 

二、一般用法  ：

    <bgsound src="音频源" autostart="true" loop="false" />

    <embed src="音频源" autostart="true" loop="false" />

 

三、标签属性  ：

    1、autostart  当为  true  时 是自动播放模式 。反之，  当为false时  为一开始不进行自动播放（默认为false）；

    2、loop  当为 true 时 是无限次重播，false为不重播，某一具体值（正整数）为重播多少次；

    3、当添加属性  hidden="true"  时  为隐藏控制面板；

 

四、兼容问题

    1、<bgsound>  标签  为  IE

    2、<embed>  为其它

    3、值得注意的是  当为IE9时 ， 两标签都为支持；

 

TIPS :

例如：给 <div class=”mp3”></div>添加音频播放文件时。

（一）、正常情况下的写法：

          if($.browser.msie){

               $(".mp3").html('<bgsound src="music/one.mp3" autostart="true" loop="true" hidden="true" />');

          }else{

               $(".mp3").html('<embed src="music/one.mp3" autostart="true" loop="true" hidden="true" />');

          }

 

          现象：IE内核的没有声音：其它的有！

          原因：<bgsound >标签在IE内核里是不会被直接读取的，所以。。。

          解决：在判断为IE内核时 把两个标签都加载进去 ，而已<embed>标签要在<bgsound>前，并且将自动播放设置为 autostart="false";

 

         如:

         if($.browser.msie){

               $(".mp3").html('<embed src="music/one.mp3" autostart="false" loop="true" hidden="true" /><bgsound src="music/one.mp3" autostart="true" loop="true" hidden="true" />');

          }else{

               $(".mp3").html('<embed src="music/one.mp3" autostart="true" loop="true" hidden="true" />');

          }

 

 

  (二)、可能会有这样的一种特殊特殊情况：

 

          现象：IE内核的出现重音（或当是启用浏览器的兼容性视图时出现）；

          原因：个人初步认为这是音频在切换的延迟问题；

                 根据：当我在给 <div class=”mp3”></div>添加音频播放文件前，来一个alert(“dd”)弹窗事件后，则音频播放正常；

          解决：为了安全起见，设置延时一秒加载的同时，前利用else再进行对其它浏览器进行判断，最终写法如下：

          if($.browser.msie){

               setTimeout(function(){

                    $(".mp3").html('<embed src="music/one.mp3" autostart="false" loop="true" hidden="true" /><bgsound src="music/one.mp3" autostart="true" loop="true" hidden="true" />');

               },1000);

          }else if($.browser.mozilla || $.browser.opera || $.browser.safari){

               $(".mp3").html('<embed src="music/one.mp3" autostart="true" loop="true" hidden="true" />');

          }