1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML5中多页面实现背景音乐的连续播放

HTML5中多页面实现背景音乐的连续播放

时间:2020-09-02 05:37:10

相关推荐

HTML5中多页面实现背景音乐的连续播放

在单个页面中插入背景音乐,当跳转到其他页面时,背景音乐就没了,此时若在其他页面添加相同的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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。