js 背景音乐设置实例

发布时间:2020-02-17编辑:脚本学堂
本文介绍了js设置背景音乐的方法,通过一例js背景音乐代码,学习如何在网页中用js控制背景音乐,有需要的朋友参考下。

需求描述:
同个网站打开多张网页时只允许其中一张网页播放背景音乐,该网页关闭时另一张网页接着播放,貌似很简单的问题,实现起来并不轻松,还真无从入手,在163邮箱退出登陆时看到背投广告给了我灵感,说说原理吧。
 
第一步:当打开第一张网页时使用cookie占位,声明要在该页播放;
第二步:判断占位的是否为该页,是则插入背景音乐;
第三步:该页关闭时清除cookie,让位于其它网页;
 
还要用到setinterval()定时检测cookie占位情况,以下是实现代码,不尽之处容后完善。
 
以下代码可放到<head></head>中。

js 背景音乐设置的完整代码:
 

复制代码 代码示例:
<!--
function insertsound(){
 var obj=document.getelementbyid("soundbox");
 var str="<embed src="晚秋.mp3" width="0" height="0" border="0" loop="-1"></embed>";
 if (obj.innerhtml==""){
  obj.innerhtml=str;
 }
}
function setcookies(){
 var url=window.location.pathname;
 document.cookie="isuse=1";
 document.cookie="url="+url;
}
function getcookies(name){
 var str=document.cookie.split("; ")
 for(var i=0;i<str.length;i++){
  var tmp=str[i].split("=");
  if(tmp[0]==name){
   return unescape(tmp[1]);
  }
 }
} // js怎么设置背景音乐代码
function clearcookies(cookiename){
 var date=new date();
 date.settime(date.gettime()-10000);
 document.cookie=cookiename+"=;expire="+date.togmtstring();
}
function valcookies(){
 var use=getcookies("isuse");
 var url=getcookies("url");
 var tmpurl=window.location.pathname;
 if (use!="1"){
  setcookies();
  insertsound();
 }else{
  if (url==tmpurl){
   insertsound();
  }
 }
}
window.onunload=function(){
 clearcookies("isuse");
 clearcookies("url");
}
//-->
</script>

以下代码可放到<body></body>中:
 

复制代码 代码示例:
js背景音乐代码:
<div id="soundbox" style="width:100%;height:0px;overflow:hidden;"></div>
<script language="javascript">window.setinterval("valcookies()",1000);</script>