解决audio音频标签在ios系统上失效的办法

2024-04-02 21:59| 来源: 网络整理| 查看: 265

这周做了一个h5页面，其中用到了audio标签播放背景音乐，一开始皆大欢喜，在自己的安卓机测完后准备发版的时候想了想还是找个苹果看一下把，果然，一看就出现问题了，背景音乐无法播放，而且自定义的播放按钮播放音乐也没有声音，上网查了查原来是ios系统为了节省流量不会自动播放网页的音频，只能通过事件来控制，于是便找到了如下解决方案：

//设置背景音乐dom 并自动播放 var bgaudio = document.getElementById('bgAudio'); //创建一个audio播放器dom var sgaudio = document.getElementById('sgAudio'); //android ios 内部原因为了节省流量，规定不自动播放音频视频 //--创建页面监听，等待微信端页面加载完毕触发音频播放 document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { bgaudio.play(); document.addEventListener("WeixinJSBridgeReady", function () { bgaudio.play(); }, false); } audioAutoPlay(); }); //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放 document.getElementById('playIdIcon').addEventListener('touchstart', function () { audioClickPlay(); }); document.getElementById('pauseIdIcon').addEventListener('touchstart', function () { audioClickPause(); }); function audioClickPlay() { $("#pauseIdIcon").css("display","block"); $("#playIdIcon").css("display","none"); bgaudio.pause(); sgaudio.play(); } function audioClickPause() { $("#pauseIdIcon").css("display","none"); $("#playIdIcon").css("display","block"); sgaudio.pause(); bgaudio.play(); }

【本文地址】

公司简介

联系我们