首页 > html总结 > h5手机版网页如何添加网页背景音乐?

h5手机版网页如何添加网页背景音乐?

2017年9月7日 发表评论 阅读评论

如何实现手机版自动播放网页背景音乐?

代码如下:

<!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方法进行播放

这样做主要是为了防止不必要的自动播放浪费流量

分类: html总结 标签: , ,
  1. 本文目前尚无任何评论.
您必须在 登录 后才能发布评论.
css.php