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

简介: 实际情形:今天在公司做一个微页的项目,涉及到在微信里面点击链接或者是扫描二维码,打开链接的时候,自动播放音乐。这个功能是非常简单的,直接在HTML页面插入如下代码即可。

实际情形:

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

  • 这个功能是非常简单的,直接在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();
    }
}
相关文章
|
2月前
|
Android开发 iOS开发 UED
探索未来:Android与iOS在智能穿戴设备上的较量
随着科技的飞速进步,智能穿戴设备已经成为我们日常生活中不可或缺的一部分。本文将深入探讨两大操作系统——Android和iOS——在智能穿戴领域的竞争与发展,分析它们各自的优势与挑战,并预测未来的发展趋势。通过比较两者在设计哲学、生态系统、用户体验及创新技术的应用等方面的差异,揭示这场较量对消费者选择和市场格局的影响。 【7月更文挑战第31天】
30 0
|
26天前
|
运维 网络安全 iOS开发
厉害!外国网络工程师用Ansible给思科IOS设备升级!
厉害!外国网络工程师用Ansible给思科IOS设备升级!
|
28天前
|
小程序 JavaScript
|
1月前
|
BI Linux 数据安全/隐私保护
忘了 iOS(iPad、IPhone) 设备上的「屏幕使用时间」密码怎么办?找回屏幕密码
忘了 iOS(iPad、IPhone) 设备上的「屏幕使用时间」密码怎么办?找回屏幕密码
37 0
|
1月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
2月前
|
Android开发 数据安全/隐私保护 iOS开发
探索未来:安卓与iOS在智能穿戴设备领域的较量
随着科技的飞速发展,智能穿戴设备已逐渐成为我们日常生活的一部分。从健康监测到通讯交流,它们正以惊人的速度改变着我们的生活方式。本文将深入探讨安卓和iOS这两大操作系统在智能穿戴领域的现状、竞争以及未来发展趋势,揭示它们如何通过创新技术满足用户需求,并预测未来可能的发展方向。
27 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
27 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
50 0
|
iOS开发
iOS设备类型
通常App都会采集用户的设备信息,比如设备类型、网络类型、内存大小等,而拿到的数据比如:iPhone 8,1是什么意思?代表iOS 8.1吗,非也。这里放二个网站大家可以上去查一查,在统计分析的系统里可以将设备类型再‘翻译’过来   https://support.
761 0
|
iOS开发
iOS 设备类型和版本判断
<div class="dp-highlighter bg_objc" style="font-family:Consolas,'Courier New',Courier,mono,serif; background-color:rgb(231,229,220); width:653.390625px; overflow:auto; padding-top:1px; line-height
1878 0