在单个页面中插入背景音乐,当跳转到其他页面时,背景音乐就没了,此时若在其他页面添加相同的audio控件,那么跳转后音乐会重新播放;因此想办法让他能够在跳转后能够继续播放此音乐:
新建一个music.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加音频播放,设置为自动播放,并隐藏播放控件的显示-->
<audio controls="controls" autoplay="autoplay" controls="controls" hidden="hidden">
<source src="file/tears.mp3" type="audio/mp3">
<source src="file/tears.mp3" type="audio/ogg">
<embed height="50px" width="100px" src="file/tears.mp3">
</audio>
</body>
</html>
将原先其他页面中的媒体播放控件都去掉
再新建一个backMusic.html页面:
<!DOCTYPE html>
<html>
<frameset cols="0%,100%">
<frame src="music.html"/>
<frame src="index.html" />
</frameset>
</html>
此时以此页面为主页运行即可达到预想的效果。
设置背景音乐音量大小:
<body>
<!--添加音频播放,设置为自动播放,并隐藏播放控件的显示-->
<audio id="bgAudio" controls="controls" autoplay="autoplay" hidden="hidden">
<source src="mp3/wangjie.mp3" type="audio/mp3">
<source src="mp3/wangjie.ogg" type="audio/ogg">
<!-- <embed height="50px" width="100px" src="mp3/wangjie.mp3"> -->
</audio>
</body>
<!-- 设置背景音乐音量为0.2,即正常音量的20% -->
<script type="text/javascript">
myVid=document.getElementById("bgAudio");
myVid.volume=0.2;
</script>