解决iphone 微信H5自动播放音乐问题

最新推荐文章于 2023-11-25 13:33:10 发布

weixin_30725315

最新推荐文章于 2023-11-25 13:33:10 发布

阅读量260

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hlhs/p/11157401.html

版权

首先，在html中定义audio 标签的 autoplay属性

<audio id="musicStar" src="文件路径" autoplay="true" preload="auto" loop="loop"></audio>

其次，在body结尾处添加重定义的audioAutoPlay方法

function audioAutoPlay(id){ var audio = document.getElementById(id); var play = function(){ audio.play(); audio.pause(); document.removeEventListener("touchstart",play, false); }; audio.play(); document.addEventListener("touchstart",play, false); }

最后，需要在页头微信浏览器准备好以后，调用 audioAutoPlay方法

document.addEventListener("WeixinJSBridgeReady", function () { audioAutoPlay('musicStar'); /**musicStar为音乐audio的 id**/ }, false);

综合所有

<!DOCTYPE html>
<html>
<head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta name="msapplication-tap-highlight" content="no"> <script> /**微信环境中**/ document.addEventListener("WeixinJSBridgeReady", function () { audioAutoPlay('musicStar'); }, false); </script> </head> <body> ... <audio id="musicStar" src="source/music.mp3" autoplay="true" preload="auto" loop="loop"></audio> </body> <script> function audioAutoPlay(id){ var audio = document.getElementById(id); var play = function(){ audio.play(); //audio.pause(); 可以在控制打开页面不播放，在没有触屏点击的过程中的一段时间后播放，如预加载完成后播放设置audio的autoplay属性为false document.removeEventListener("touchstart",play, false); }; audio.play(); audio.pause(); document.addEventListener("touchstart",play, false); } //如需要加载完成后的某个时间播放，可在相应的状态先后执行暂停播放，设置音乐播放，无需点击屏幕，都可自动播放，并且点击屏幕后也不会暂停。 //暂停播放调用 function completeFun(){ musicStar.pause(); musicStar.play(); } </script> </html>

转载于:https://www.cnblogs.com/hlhs/p/11157401.html

weixin_30725315

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决iphone 微信H5自动播放音乐问题

首先，在html中定义audio 标签的 autoplay属性<audio id="musicStar" src="文件路径" autoplay="true" preload="auto" loop="loop"></audio>其次，在body结尾处添加重定义的audioAutoPlay方法function audioAutoPla...
复制链接

扫一扫