htm背景音乐播放和停止

最新推荐文章于 2023-02-28 20:57:41 发布

laputa73

最新推荐文章于 2023-02-28 20:57:41 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web编程

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/24451703

web编程专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一种在网页中实现背景音乐播放的方法，通过HTML5的audio标签与JavaScript结合使用，实现了不同浏览器环境下的兼容性处理。文章提供了具体的代码实例，包括如何根据不同浏览器选择播放格式（如OGG或MP3），以及如何控制音乐的播放和停止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最好的方法是使用ogg文件. 可以兼容手机浏览器.新版chrome,opera.(百度,猎豹内核太老,只能放1s左右)

mp3+flash插件也勉强可以接受.

<!DOCTYPE html>
<html>
 <head>
<title>背景音乐</title>
<script>
var browser;
function checkBrowser(){
 // alert(navigator.userAgent);
	if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
	browser='IE';}
	else    if (navigator.userAgent.indexOf('Firefox') >= 0){browser='FireFox';}
	else     if (navigator.userAgent.indexOf('Presto') >= 0){browser='Opera9';}
	else     if (navigator.userAgent.indexOf('OPR') >= 0){browser='Opera20';}
	else     if (navigator.userAgent.indexOf('Chrome') >= 0){browser='chrome';}
	else    {browser=navigator.userAgent;}
}
function playmusic(bg,url){
 //alert(browser);
 if(browser=="IE"){document.getElementById("i"+bg).src=url;return;};
 else{document.getElementById("c"+bg).src=url;return;}
 
}
function stopplaymusic(bg){
 document.getElementById(bg).innerHTML="";
 document.getElementById("i"+bg).src="";
 document.getElementById("c"+bg).src="";
}
</script>

</head>
<body onload="checkBrowser()">


<bgsound id="ibgsound" volume="50" src="" loop="-1" autostart="true">
<audio id="cbgsound" src="" hidden="true" autoplay="true" loop="true"></audio> 
<div id="bgsound"></div>


<input type=button value=play onclick="playmusic('bgsound','sound/chongsha1.ogg')"> 
<input type=button value=stop onclick="stopplaymusic('bgsound')"> 

<!-- flash,不支持ogg
<EMBED style="MARGIN: 5px" height=20 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=226 src=2.swf?file=bgsound/beihaidao.mp3&width=150&songVolume=100&backColor=E8E8E8&frontColor=000000&autoStart=true&repeatPlay=false&showDownload=false allowscriptaccess="never" quality="high" wmode="transparent">
-->



</body>

</html>