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();
    }
}
相关文章
|
29天前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
机器学习/深度学习 PyTorch TensorFlow
是否有其他框架可以在iOS设备上进行机器学习?
是否有其他框架可以在iOS设备上进行机器学习?
21 1
|
3月前
|
存储 数据建模 iOS开发
iOS设备功能和框架: 什么是 Core Data,它在 iOS 中的作用是什么?
iOS设备功能和框架: 什么是 Core Data,它在 iOS 中的作用是什么?
32 1
|
3月前
|
定位技术 iOS开发
iOS设备功能和框架: 如何使用 Core Location 获取设备的位置信息?
iOS设备功能和框架: 如何使用 Core Location 获取设备的位置信息?
19 0
|
1月前
|
JavaScript 小程序
微信小程序 wxml 中使用 js函数
微信小程序 wxml 中使用 js函数
64 0
|
1月前
|
小程序 JavaScript 前端开发
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
|
1月前
|
数据采集 JSON JavaScript
如何处理动态网页(例如使用 JavaScript 生成的内容)?
如何处理动态网页(例如使用 JavaScript 生成的内容)?
12 0
|
1月前
|
JavaScript 前端开发 UED
JS自动跳转手机移动网页
JS自动跳转手机移动网页
454 0
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架

热门文章

最新文章