项目优化之iOS的自动播放bug问题

Posted 2023-05-07

参考技术A 原因：ios系统限制音频和视频的自动播放

解决：设置手动播放就OK了

1. 监听数据的变化

2. 设定延时

3. 手动启动

例子：

watch:

  currentSong(newValue,oldValue)

    setTimeout(()=>

      console.log(this.$refs.audio)

      this.$refs.audio.play()

    ,500)

 

微信的audio无法自动播放的问题

 

一、问题

     最近做了一个html5的项目，里面涉及到音乐播放，项目要求音乐进入页面就自动播放，于是我就想到了html5的audio标签，将mp3引入进去。

     1.在audio标签里引入了autoplay属性；

       经过测试发现Android上可以自动播放，ios上无法自动播放。

　　　　

  <audio id="audio" src="1.mp3" autoplay="autoplay"></audio>

　　

     2.在js文件中执行audio.play();

        经过测试发现Android上可以自动播放，ios上无法自动播放。

　　var audio=document.querySelector("#audio");
　　audio.play();

　　

二、解决办法

     1.方法一

　　ps:此方法转载自(http://www.cnblogs.com/xiezhonglong/p/5780942.html)

//使用微信现在提供过的微信js-sdk 在ready中进行播放便可。

//首先引用js ： 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

//然后写方法 ： 

function autoPlayAudio1(){
　　wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
　　　　debug: false,
　　　　appId: ‘‘,
　　　　timestamp: 1,
　　　　nonceStr: ‘‘,
　　　　signature: ‘‘,
　　　　jsApiList: []
　　});
　　wx.ready(function() {
　　　　document.getElementById(‘audio‘).play();
　　});
}

autoPlayAudio1();

　　

　　2、方法二

　　var audio=document.querySelector("#audio");
    document.addEventListener("WeixinJSBridgeReady",function(){
	audio.play();
    },false);