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

——由于苹果的ios系统的安全保护较严格，iphone手机打开微信H5的时候（针对于已对audio标签设置 autoplay为true的H5），通常要先点击屏幕，才能触发音乐播放，经过研究，有更简便的方法可以处理。

处理方法

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

<audio id="musicStar" src="source/music.mp3" 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属性为falsedocument.removeEventListener("touchstart",play, false);};audio.play();audio.pause(); document.addEventListener("touchstart",play, false);}//如需要加载完成后的某个时间播放，可在相应的状态先后执行暂停播放，设置音乐播放，无需点击屏幕，都可自动播放，并且点击屏幕后也不会暂停。//暂停播放调用function completeFun(){musicStar.pause();musicStar.play();}
</script>
</html>

综上解决了ios中微信H5打开自动播放音乐的问题,如果需要在页面预加载后再进行播放，可按照代码中的提示设置。

iphone 微信打开H5自动播放音乐问题相关推荐

解决iphone 微信H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题参考文章: (1)解决iphone 微信H5自动播放音乐问题 (2)https://www.cnblogs.com/hlhs/p/11157401.html ...
HTML打开网页自动播放音乐
网页播放音乐如果不能自动播放,用iframe放在body最下面.即可运行. <iframe src = "文件地址.MP3" allow = "autoplay&q ...
微信端网页自动播放音乐解决方案
播放器 <audio controls="controls" id="audio" autoplay="" loop="&q ...
vue实现打开网页自动播放音乐
<template><div><audio src="../assets/music/樱花草.mp3" loop autoplay ref=" ...
HTML网站微信打开自动播放音乐JS
源码简介: HTML网站微信打开自动播放音乐JS,众所周知网站里面的bgm在微信是不能自动播放的,好像是因为浏览器内核限制禁止自动播放,具体也不清楚,经过我的测试这个代码确实可以修复微信不自动播放音乐 ...
解决微信页面加载自动播放音乐
项目中突然用到了这个功能,于是记录了下来 html: <audio style="display:none; height: 0" id="bg-music&quo ...
html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
H5页面在微信浏览器中自动播放视频
H5页面在微信浏览器中自动播放视频安卓和IOS不同 h5在安卓微信浏览器上的视频不能自动播放 h5在iOS微信浏览器上的视频可以自动播放 iOS的实现方案
iOS 微信音视频自动播放原生接口WeixinJSBridge API(一些整理小技巧)
原文链接1:https://www.w3ctech.com/topic/1165 原文链接2:https://www.cnblogs.com/jasonduan/p/5635048.html 做一下整 ...

iphone 微信打开H5自动播放音乐问题

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

处理方法

综合所有

iphone 微信打开H5自动播放音乐问题相关推荐

最新文章

热门文章