最近做了一个移动端的微信的H5活动页面,其中有个需求是:打开页面后背景音乐就要自动开始播放,点击音乐图标按钮可以控制其播放与暂停。
移动端,音乐播放,audio标签是必须的,于是直接就开写:
<i class="icon-music-outer"> <i class="forbid icon-music"></i> <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3"> </audio> </i> <script> var $music = $('.icon-music-outer'); var $forbid = $music.find('.forbid'); var audio = document.getElementById('bgMusic'); $music.on('click', function () { if ($forbid.hasClass('icon-music')) { $forbid.removeClass('icon-music').addClass('icon-forbidMusic'); } else { $forbid.removeClass('icon-forbidMusic').addClass('icon-music'); } if (audio.paused) { audio.play(); return } audio.pause(); }); </script>
在chorme浏览器上模拟,点击小喇叭,可以同步操控audio标签进行播放与暂停,也能自动播放。
于是放到手机上实测一番,结果。。。。。
安卓手机上一切正常;
但是在苹果手机上,刚进入页面的时候是不能自动播放的
后来查了许多资料后才知道,这是因为苹果为了防止用户是在流量环境下,这样会导致流量的偷跑,所以禁止了audio的自动播放,除非用户主动触发。当然,还是有办法达到需求的,毕竟是在人家微信浏览器下跑起来的,人在屋檐下,不得不低头啊!
再一个引入微信的开发者js文件,整体写法如下:jq和原生写法
扫描二维码关注公众号,回复:
1245748 查看本文章
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/icon.css" type="text/css"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <style> .icon-music-outer{ display: inline-block; width: 25px; height: 25px; position: fixed; right: 5px; top: 10px; font-size: 25px; color: #ffda51; z-index: 100; } .forbid{ display: inline-block; font-size: 25px; width: 25px; height: 25px; } .icon-forbidMusic{ display: inline-block; font-size: 25px; width: 25px; height: 25px; color: #d0f2fc; z-index: 101; } audio{ position: absolute; left: -300px; } </style> </head> <body> <i class="icon-music-outer"> <i class="forbid icon-music"></i> <!--控制音乐图标--> <audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3"> </audio> </i> <script src="./js/jquery-3.1.0.min.js" type="text/javascript"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> var $music = $('.icon-music-outer'); var $forbid = $music.find('.forbid'); var audio = document.getElementById('bgMusic'); function audioAutoPlay(audio) { document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } audioAutoPlay(audio); $music.on('click', function () { if ($forbid.hasClass('icon-music')) { $forbid.removeClass('icon-music').addClass('icon-forbidMusic'); } else { $forbid.removeClass('icon-forbidMusic').addClass('icon-music'); } if (audio.paused) { audio.play(); return } audio.pause(); }); </script> </body> </html>
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/icon.css" type="text/css"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <style> .icon-music-outer{ display: inline-block; width: 25px; height: 25px; position: fixed; right: 5px; top: 10px; font-size: 25px; color: #ffda51; z-index: 100; } .forbid{ display: inline-block; font-size: 25px; width: 25px; height: 25px; } .icon-forbidMusic{ display: inline-block; font-size: 25px; width: 25px; height: 25px; color: #d0f2fc; z-index: 101; } audio{ position: absolute; left: -300px; } </style> </head> <body> <i class="icon-music-outer"> <i class="forbid icon-music" onclick="musicPause()"></i> <i class="forbid icon-forbidMusic" style="display: none;" onclick="musicPlay()"></i> <audio loop controls autoplay="autoplay" id="bgMusic"> <source src="./music/musicMin.mp3" type="audio/mpeg"> </audio> </i> <script src="./js/jquery-3.1.0.min.js" type="text/javascript"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> var audio = document.getElementById('bgMusic'); var iconMusic = document.getElementsByClassName('icon-music')[0]; var iconForbidMusic = document.getElementsByClassName('icon-forbidMusic')[0]; console.log(iconMusic) function audioAutoPlay(audio) { document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } audioAutoPlay(audio); function musicPause() { audio.pause(); iconMusic.style.display = 'none'; iconForbidMusic.style.display = 'block'; } function musicPlay() { audio.play(); iconMusic.style.display = 'block'; iconForbidMusic.style.display = 'none'; } </script> </body> </html>