原生js——控制ios设备在微信打开网页时，自动播放音乐

2023年11月26日 274次阅读 来源: 振礼硕晨

实际情形：

  • 今天在公司做一个微页的项目，涉及到在微信里面点击链接或者是扫描二维码，打开链接的时候，自动播放音乐。

  • 这个功能是非常简单的，直接在HTML页面插入如下代码即可。

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

  • 如果使用安卓手机进行访问页面的话，是没有什么错误的，音乐能正常自动播放。但是如果是使用ios设备访问页面的话，音乐是不能自动播放的。

  • 原来是苹果公司考虑到用户可能是用手机流量访问的情况，为了用户流量着想，所以需要用户交互后才能播放。

  • 但是我的这个项目要求网页，必须自动进行播放音乐，于是便有了下面的解决办法。

解决办法：

  • 首先，我们要给页面中的<audio>标签添加一个id="bg-music"。因为我们要在后面的js代码中，使用这个id="bg-music"获取到<audio>标签
<audio id="bg-music" src="1.mp3" autoplay="autoplay" controls></audio>
  • 然后，我们将下面这些代码复制到自己的js代码中，就可以实现ios设备自动播放音乐。或者是赋值下面这些代码，粘贴到新创建的js脚本文件，然后在HTML页面引入该脚本文件即可。
// DOM中的内容加载完毕之后，调用函数
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);

function musicInWeixinHandler() {
    musicPlay(true);
    document.addEventListener("WeixinJSBridgeReady", function () {
        musicPlay(true);
    }, false);
    document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}

function musicPlay(isPlay) {
    var media = document.querySelector('#bg-music');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}
    原文作者：振礼硕晨
    原文地址: https://www.jianshu.com/p/2bb23e60149b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞