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();
    }
}
相关文章
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
24天前
|
Web App开发 JavaScript 前端开发
使用Python调用JavaScript进行网页自动化操作
使用Python调用JavaScript进行网页自动化操作
|
30天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
41 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
20天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
28 0
|
30天前
|
JavaScript 前端开发
动态背景,视觉盛宴:JavaScript动画让网页活起来!
动态背景,视觉盛宴:JavaScript动画让网页活起来!
|
30天前
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
|
30天前
|
JavaScript 前端开发
JavaScript引入全攻略:提升网页加载速度的秘诀!
JavaScript引入全攻略:提升网页加载速度的秘诀!
|
30天前
|
存储 JavaScript 前端开发
JavaScript:揭秘网页背后的魔法,一探究竟JS的神奇力量!
【8月更文挑战第22天】JavaScript(JS)始于1995年,以网页动态效果闻名。随Node.js等技术发展,JS现广泛用于服务器端、桌面及移动应用开发。JS是解释型语言,在浏览器中直接运行。基本语法涵盖变量声明、数据类型、运算符及控制结构。变量可用`var`、`let`或`const`声明,支持多种数据类型如`Number`、`String`。函数是代码的基本单元,支持匿名及箭头函数。对象用于表示复杂数据结构。ES6引入了类、模块等新特性。异步编程通过回调、Promises及async/await实现。掌握这些基础知识,有助于开发者构建高质量的Web应用。
32 0
|
1月前
|
小程序 JavaScript
|
1月前
|
移动开发 前端开发 JavaScript
学习Particles.js 给网页来点粒子特效
学习Particles.js 给网页来点粒子特效
76 0