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();
    }
}
相关文章
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
489 56
|
11月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
359 0
|
10月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
520 3
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1903 58
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5133 1
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
892 1
|
11月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
3430 0
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
存储 监控 算法
公司内部网络监控中的二叉搜索树算法:基于 Node.js 的实时设备状态管理
在数字化办公生态系统中,公司内部网络监控已成为企业信息安全管理体系的核心构成要素。随着局域网内终端设备数量呈指数级增长,实现设备状态的实时追踪与异常节点的快速定位,已成为亟待解决的关键技术难题。传统线性数据结构在处理动态更新的设备信息时,存在检索效率低下的固有缺陷;而树形数据结构因其天然的分层特性与高效的检索机制,逐渐成为网络监控领域的研究热点。本文以二叉搜索树(Binary Search Tree, BST)作为研究对象,系统探讨其在公司内部网络监控场景中的应用机制,并基于 Node.js 平台构建一套具备实时更新与快速查询功能的设备状态管理算法框架。
420 3