h5手机版网页如何添加网页背景音乐？
如何实现手机版自动播放网页背景音乐？
代码如下：
<!DOCTYPE html>
<html><head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<title>背景音乐</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1″>
<style>
html, body {position: relative;height: 100%;}
body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}
</style>
</head>
<body>
<audio id=”audio” preload=”auto” autoplay loop>
<source src=”yuzhouchangwan.mp3″ type=”audio/mpeg”>
</audio>
<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
<script type=”text/javascript”>
$().ready(function(){
$(document).one(‘touchstart’,function(e){
var music=document.getElementById(“audio”);
if(music.paused){music.play();}
});
document.addEventListener(“WeixinJSBridgeReady”,function onBridgeReady(){document.getElementById(“audio”).play();});
});
</script>
</body>
</html>
但是这个代码，在微信中打开的时候，会自动播放，普通手机浏览器打开不会自动播放，因为：
移动端浏览器大部分是禁用video和audio的autoplay功能
并且，很多移动浏览器也不支持首次js调用play方法进行播放
这样做主要是为了防止不必要的自动播放浪费流量
近期评论