微信浏览器实现音乐自动播放
Posted MauriceChans
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信浏览器实现音乐自动播放相关的知识,希望对你有一定的参考价值。
转至:http://www.ipastimes.com/post/52.html
HTML5音频播放在移动端有局限性,在移动版 Safari 中加载的页面上,不能自动播放音频文件。音频文件只能从用户触发的触摸(单击)事件加载。如果在 HTML 标记中使用了 autoplay 属性,那么移动版 Safari 将会忽略这个属性,并且不会在加载页面时播放此文件,避免移动端流量在不知不觉中浪费,很人性化的设计。但对HTML5应用开发者来说,这不是个好消息。
网上查找了很多资料,通过hack手段来实现自动播放是不可能的,幸运的是,我们大多数情况下是依赖微信浏览器的。这里有个方法貌似可行:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Audio auto play in mobile</title> <script src="jquery-1.10.2.min.js"></script> </head> <body> <audio preload="preload" id="car_audio" src="music.mp3" loop=""></audio> <script> setTimeout(function(){ $(window).scrollTop(1); },0); /*音乐*/ var audio = $(‘#car_audio‘); var isPlaying = false; function playAudio() { var audio = $(‘#car_audio‘); if (audio.attr(‘src‘) == undefined) { audio.attr(‘src‘, audio.data(‘src‘)); } audio[0].play(); isPlaying = true; } $(function(){ playAudio(); document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke(‘getNetworkType‘, {}, function (e) { network = e.err_msg.split(":")[1]; //结果在这里 playAudio(); }); }, false); }) </script> </body> </html>
强调一下,只适用于微信浏览器。
测试环境:iPhone 6 ios 8.3
测试时发现的问题:如果mp3文件过大(大于2M),有可能不会自动播放, 又换了300KB的,测试OK!
有发现更有效的方法,或者无效机型,欢迎留言!
以上是关于微信浏览器实现音乐自动播放的主要内容,如果未能解决你的问题,请参考以下文章
在android/iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式