自动播放音乐

有时候某些浏览器会禁用我们的网页音乐，导致播放不了，在我们的网页中添加以下代码，用户只要触碰网页就可实现自动播放音乐效果。代码如下：

<!-- 添加自动播放音乐 -->
<!-- 这里的音乐需要引入第三方链接的音乐 -->
 <bgsound src="https://hexo.51xcode.com/xiangce/yanhua02.mp3" loop="-1"/>
 <audio src="https://hexo.51xcode.com/xiangce/yanhua02.mp3" controls autoplay='autoplay' loop="loop" id="bgmusic" style="display:none"></audio>
 <script>
     (function() {
         function log(info) {
             console.log(info);
             // alert(info);
         }
         function forceSafariPlayAudio() {
             audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效
             audioEl.play(); // iOS 7/8 仅需要 play 一下
         }

         var audioEl = document.getElementById('bgmusic');

         audioEl.addEventListener('loadstart', function() {
             log('loadstart');
         }, false);
         audioEl.addEventListener('loadeddata', function() {
             log('loadeddata');
         }, false);
         audioEl.addEventListener('loadedmetadata', function() {
             log('loadedmetadata');
         }, false);
         audioEl.addEventListener('canplay', function() {
             log('canplay');
         }, false);
         audioEl.addEventListener('play', function() {
             log('play');
             // 当 audio 能够播放后, 移除这个事件
             window.removeEventListener('touchstart', forceSafariPlayAudio, false);
         }, false);
         audioEl.addEventListener('playing', function() {
             log('playing');
         }, false);
         audioEl.addEventListener('pause', function() {
             log('pause');
         }, false);

         // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
         // 因此我们通过一个用户交互事件来主动 play 一下 audio.
         window.addEventListener('touchstart', forceSafariPlayAudio, false);

         audioEl.src = "https://hexo.51xcode.com/xiangce/yanhua02.mp3";
     })();
</script>  

免责声明：

1.本站所提供的全部内容仅限于交流、学习与研究使用，请勿用于非法目的。

2.任何使用本站内容而出现的意外或损失，本站概不负责。

3.本站遵守国家法律法规，禁止制作、复制、发布、传播任何具有反动、色情、暴力、淫秽，政治等内容的信息，一经发现，立即删除，并锁定IP地址移交给公安机关处理。

4.本站的留言、评论与转载内容，仅代表原作者个人观点，与本站观点或立场无关，所有评论、留言均需经过审核后方可正常显示，本站有权删除和过滤违反法律法规的或不正当的言论。

5.本站的文章部分内容可能来源于网络或转载于其他文章，仅供大家学习与参考，如有侵权，请联系站长QQ:1823782755进行删除处理。

6.本站可能会包含第三方网站的链接，点击后或将离开本站并进入其他站点，本站不对其他站点的内容负责。

7.本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

8.根据《计算机软件保护条例》第十七条，为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬，本站所有软件资料仅用于学习研究。

9.本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

10.本站文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可，阅读后请勿用于非法用途。

点我去本站旗下导航网

更多知识，请关注微信公众号“51学代码”