关注云服务器
相关知识分享

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

之前搭建一个表白单页的时候,发现背景音乐在微信打开没办法自动播放音乐,今天这个教程就是教大家怎么让微信浏览器自动播放音乐。

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

<audio src="1.mp3" autoplay="autoplay" controls="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();
    }
}

这样微信自带浏览器就可以自动播放音乐啦,但是像chrome和safari这些浏览器,还是需要跟用户有交互以后才会播放音乐(也就是需要用户点一下播放按钮),这个暂时无法解决。

赞(1) 打赏
未经允许不得转载:云测速 » js控制ios设备在微信打开网页时,自动播放音乐

觉得文章有用就打赏一下文章作者吧~

微信扫一扫打赏