H5背景音乐解决方案

  • 前言
  • 背景音乐播放
    • 1 自动播放
      • 1 微信问题
      • 2 Safari问题
      • 3 解决方案代码
    • 2 点击播放
  • 离开页面关闭音乐
  • 缓存状态
    • 1 客户端存储数据方法
    • 2 示例
  • 完整解决方案代码

1. 前言

很多H5的项目会用到背景音乐,虽然是很小的一个模块,但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。

在进行下面内容之前,如果你并不了解Audio,可以参考之前的文章:
浅谈Audio

2. 背景音乐播放

我们用最简单的方式来播放音乐:

<!DOCTYPE html>
<html>
<body><audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' autoplay loop></audio>
</body>
</html>

或者:

<!DOCTYPE html>
<html>
<body><audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop></audio><script>var audio = document.getElementById('audio');audio.play();</script>
</body>
</html>

结果,在浏览器中可以自动播放,但是在移动端的微信和safari中都无效。

原因:为了节省流量
1、大部分iOS和少部分Android的微信
2、部分Android浏览器和所有iOS系统的Safari
不支持自动播放音频视频

那么,如何解决这样的问题呢?

(1) 自动播放

[1] 微信问题

解决方案:监听WeixinJSBridgeReadyDOMContentLoaded事件

【微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件”WeixinJSBridgeReady”。

发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;
所以,为了保险起见,可以同时监听两个事件,以增强其适用性。】
——摘自 https://www.cnblogs.com/wmhuang/p/5452259.html

[2] Safari问题

解决方案:监听touchstart事件,在用户点击屏幕的时候开始播放音乐

[3] 解决方案代码

//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.removeEventListener('touchstart',audioAutoPlay);
}
document.addEventListener('touchstart', audioAutoPlay);

(2) 点击播放

上述解决方案存在的问题是,desktop和mobile浏览器中行为不一致,也就是说,在desktop的浏览器里面音乐是自动播放的,而mobile的safari要触摸了屏幕才会播放。

之前提到,为了节省流量不会自动播放,那么就意味着有用户交互是可以播放的。

所以,这个解决方案是,诱导用户交互,从而播放音乐。最常见的是,在页面中出现按钮,需要用户去点击。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body><audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop></audio><button id='button' onclick='playBgMusic()'>点我开始播放</button><script>function playBgMusic(){var audio=document.getElementById('audio');audio.play();}</script>
</body>
</html>

3. 离开页面关闭音乐

在mobile的safari中打开页面,听到了播放的背景音乐,无意中按了home键退出,WHAT!!音乐还在放。显然,这样不合理。

解决方案: 通过document.hidden属性判断当前页面是否是激活状态
兼容性:IE10+,Firefox10+,Chrome14+,Opera12.1+,Safari7.1+

下面给出例子,这样可以判断用户是否还在这个页面。用这个方法就可以控制音乐的关闭和播放了。

var hiddenProperty = 'hidden' in document ? 'hidden' :    'webkitHidden' in document ? 'webkitHidden' :    'mozHidden' in document ? 'mozHidden' :    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){if (!document[hiddenProperty]) {    document.title='激活状态';}else{document.title='离开页面啦';}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

注意:微信中播放状态,按home键后音乐还是会播放。

4. 缓存状态

常见的有背景音乐的项目中,通常会有一个关闭背景音乐的开关。如何能记住用户的选择,在刷新页面的时候,还能保持原来的选择状态呢?

(1) 客户端存储数据方法

HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除。

详情请查看:http://www.w3school.com.cn/html5/html_5_webstorage.asp

(2) 示例

用户第一次进入页面,会显示‘还没选’,当用户选择了播放或者暂停后,再刷新页面,会记住用户之前的选择。只有当关掉页面后,再重新进入才会再显示‘还没选’。
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body><audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop></audio><button onclick='playBgMusic()'>点我播放</button><button onclick='pauseBgMusic()'>点我暂停</button><p>用户选择:<span id='status'></span></p><script>var audio=document.getElementById('audio');//初始化判断if(sessionStorage.bgmusic=='play'){audio.play();document.getElementById('status').innerHTML='播放';}else if(sessionStorage.bgmusic=='pause'){audio.pause();document.getElementById('status').innerHTML='暂停';}else{document.getElementById('status').innerHTML='还没选';}//播放函数function playBgMusic(){audio.play();sessionStorage.bgmusic='play';document.getElementById('status').innerHTML='播放';}//暂停函数function pauseBgMusic(){audio.pause();sessionStorage.bgmusic='pause';document.getElementById('status').innerHTML='暂停';}</script>
</body>
</html>

上例中使用的是sessionStorage,如果使用localStorage方法的话,在已选之后,只有清掉缓存才能回到‘还没选’的状态。

5. 完整解决方案代码

以下是完整的背景音乐自动播放的解决方案,并且有模拟音乐开关的按钮。

说明:safari下初始化按钮显示‘正在播放’,但并没有声音,当用户触摸到屏幕时,声音才播放。若用户一次触摸屏幕就是按钮位置,则按钮显示‘停止播放了’,这时没有背景音乐;再点一次,按钮显示‘正在播放’,同时播放。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body><audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop></audio><button id='status' onclick='triggerBgMusic()'>播放按钮</button><script>//----------页面初始化------------var audio = document.getElementById('audio');if(sessionStorage.bgmusic=='pause'){playBgMusic(false);}else{playBgMusic(true);//----------处理自动播放------------//--创建页面监听,等待微信端页面加载完毕 触发音频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {playBgMusic(true);document.addEventListener("WeixinJSBridgeReady", function () {playBgMusic(true);}, false);}audioAutoPlay();});//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放function audioAutoPlay() {playBgMusic(true);document.removeEventListener('touchstart',audioAutoPlay);}document.addEventListener('touchstart', audioAutoPlay);}//----------处理页面激活------------var hiddenProperty = 'hidden' in document ? 'hidden' :    'webkitHidden' in document ? 'webkitHidden' :    'mozHidden' in document ? 'mozHidden' :    null;var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');var onVisibilityChange = function(){if (!document[hiddenProperty]) {    if(!sessionStorage.bgmusic||sessionStorage.bgmusic=='play'){audio.play();}}else{audio.pause();}}document.addEventListener(visibilityChangeEvent, onVisibilityChange);//---------背景音乐开关----------function triggerBgMusic(){if(!sessionStorage.bgmusic||sessionStorage.bgmusic=='play'){playBgMusic(false);}else{playBgMusic(true);}}//---------音乐播放和暂停----------function playBgMusic(val){if(val){audio.play();sessionStorage.bgmusic='play';document.getElementById('status').innerHTML='正在播放';}else{audio.pause();sessionStorage.bgmusic='pause';document.getElementById('status').innerHTML='停止播放了';}}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/59191.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【向生活低头】如何在Gold Wave软件中为声音添加背景音乐

很奇怪&#xff0c;百度了很久&#xff0c;找到的方法都不可以用&#xff08;都用的混响&#xff09;&#xff0c;但大家又都很统一&#xff0c;我感觉很奇怪。 最后&#xff0c;我找到了这个视频&#xff0c;&#xff08;用的混音&#xff09;这次终于可以了。 记录&#xff0…

告别枯燥,ppt背景音乐怎么设置?

大家用过ppt吗&#xff1f;在办公软件中&#xff0c;ppt最常用到的就是在于广告宣传这方面&#xff0c;因为ppt里面的各种元素都能让你的宣传更加灵动。ppt背景音乐怎么设置&#xff1f;在制作ppt的时候&#xff0c;当表面因素勾勒得差不多时&#xff0c;如果设置一个背景音乐可…

chatgpt赋能python:Python如何减慢输出速度

Python如何减慢输出速度 Python是一种高级编程语言&#xff0c;被广泛应用于数据分析、人工智能和Web开发中。在这里&#xff0c;我们将探讨一种方法&#xff0c;即如何减慢Python的输出速度&#xff0c;从而进行更有效的调试和优化。 什么是Python的输出速度&#xff1f; 在…

【观察】数据分析还能这样玩?《事业告急——月老KPI下降分析》的“制胜秘籍”...

谈起去年参加2022帆软数据分析大赛时&#xff0c;新希望集团BI项目经理林家喜仍然“记忆犹新”&#xff0c;凭借参赛作品《事业告急——月老KPI下降分析》&#xff0c;他带领的团队在193份参赛作品中“脱颖而出”&#xff0c;斩获了大赛的“最佳展现创意奖”。 事实上&#xff…

AnalyticDB(ADB)+LLM:构建AIGC时代下企业专属Chatbot

为什么Chatbot需要大语言模型向量数据库&#xff1f; 这个春天&#xff0c;最让人震感的科技产品莫过于ChatGPT的横空出世&#xff0c;通过大语言模型&#xff08;LLM&#xff09;让人们看到了生成式AI能实现到和人类语言高度相仿的语言表达能力&#xff0c;AI不再遥不可及而已…

ModaHub魔搭社区:如何基于向量数据库+LLM(大语言模型),打造更懂你的企业专属Chatbot?

目录 1、为什么Chatbot需要大语言模型+向量数据库? 2、什么是向量数据库? 3、LLM大语言模型+ADB-PG:打造企业专属Chatbot 4、ADB-PG:内置向量检索+全文检索的一站式企业知识数据库 5、总结 1、为什么Chatbot需要大语言模型+向量数据库? 这个春天,最让人震感的科技产品…

Photon AI Translator 和做产品的一些思考

近 4 个月内我一直在做 Apple 平台的产品&#xff0c;虽然从使用量来说「简体中文」用户是占多数&#xff0c;但我一直有做多语言的支持&#xff1a;英语、简体中文和繁体中文。习惯上 Google 翻译的我&#xff0c;基本上在使用 Xcode 过程中也会一直在浏览器开着 Google Trans…

大一新生调查报告——新生遇到的问题与需求

小组成员&#xff1a; 信通6班何若溪&#xff08;人际关系主题&#xff09;&#xff0c;章玉&#xff08;学习压力主题&#xff09;&#xff0c;袁博秋&#xff08;思乡主题&#xff09; 信通7班梁凌&#xff08;信息整合与报告制作&#xff09; 信通8班夏姝婷&#xff08;时间…

基于PHP的大学生问卷调查系统

一 项目介绍 基于PHP的大学生问卷调查系统 数据库mysql &#xff0c;可搭建在phpstudy下&#xff0c;实现快速部署&#xff01; 二 主要功能 用户 1 登录 2 填写问卷 管理员 1 登录 2 问卷/问题(增删改查) 3 问卷统计结果(按选择结果百分比显示) 4 问卷回收情况(参与用户和未…

大学生社团管理系统数据需求(二)

目录 前言 一、用户、管理员登录业务数据流图 二、用户、管理员修改信息业务数据流图 三、用户申请社团数据流图 四、用户报名社团活动数据流图 总结 前言 上次我写了大学生社团管理系统的数据字典&#xff0c;列出了主体及他们的内容&#xff0c;今天我想分享一下我画的…

广告行业中那些趣事系列64:低成本训练一个媲美ChatGPT效果的Vicuna模型

导读&#xff1a;本文是“数据拾光者”专栏的第六十四篇文章&#xff0c;这个系列将介绍在广告行业中自然语言处理和推荐系统实践。本篇主要从理论到实践介绍低成本训练一个媲美ChatGPT效果的Vicuna模型&#xff0c;对于希望搭建自己的大语言模型并应用到实际业务场景感兴趣的小…

618,你会入手哪些书?【文末送书】

好书分享 前沿技术人工智能半导体新一代通信与信息技术网络空间安全参与规则 一年一度的618又到啦&#xff01;今年的618就不要乱买啦&#xff0c;衣服买多了会被淘汰&#xff0c;电子产品买多了会过时&#xff0c;零食买多了会增肥&#xff0c;最后怎么看都不划算。可是如果你…

Bito AI:免费使用 AI 编写代码/修复错误/创建测试用例 Use AI智能聊天 to 10x dev work

目录 Bito AI 简介 关键是:免费的!注册就能使用!!还不赶紧用起来??!https://bito.co/

你真的懂树吗?二叉树、AVL平衡二叉树、伸展树、B-树和B+树原理和实现代码详解...

树(Tree)是一种相当灵活的数据结构(上一节已经详细讲解了基本的数据结构:线性表、栈和队列),你可能接触过二叉树,但是树的使用并不限于此,从简单的使用二叉树进行数据排序,到使用B-树或B+树设计数据库引擎,以及目前热门的人工智能机器学习都使用到树,例如决策树(De…

人工智能预测股票涨停?靠谱吗?好像行哦,那不发财了?

背景 人工智能很火&#xff0c;各种秀。股票让人欢喜让人忧。它们结合能擦出什么样的火花&#xff1f; 我从去年5月学编程&#xff0c;树立目标&#xff1a;数据分析股市&#xff0c;做快乐盈利股民。达成阶段目标&#xff1a;预测股票涨停。特写文章记录和分享&#xff0c;也…

ChatGPT: 软件开发通用性与易用性的联系

测试地址: https://chatgptmirror.com?share3T7MZ8

GAT1400协议 注册流程

本人最近工作需要对接1400协议&#xff0c;发现网上资料不多&#xff0c;于是自己摸索了一阵&#xff0c;在这给大家提供一些我的见解&#xff0c;我是用C语言写的代码&#xff0c;有需要的可以联系我 公安部制定了统一的标准即GAT1400“公安视频图像信息应用系统”&#xff0c…

免费使用chantgpt,你敢相信吗!(不要梯子)

对于chantgpt大家一点不陌生&#xff0c;对于他的功能我就不细说了&#xff08;人工ai&#xff09;&#xff0c;下面直接进入正题 需要什么 1&#xff1a; Eg 浏览器 2.WeTab新标签页 使用方法 第一步 打开eg浏览器 第二步 打开扩展 第三步搜索 下面这个 第五步 和其他的扩…

【腾讯云 Cloud Studio 实战训练营】全新的开发习惯养成方式,至——后代开发者们

一、前言介绍 什么是 IDE &#xff1f; IDE 全称“Integrated Development Environment”&#xff0c;中文意思为“集成开发环境”&#xff0c;是用于提供程序开发环境的应用程序&#xff0c;是集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。目…

AutoGPT:有手就会的安装教程

AutoGPT 是什么 Auto-GPT 是一个实验性开源应用程序&#xff0c;展示了 GPT-4 语言模型的功能。该程序由 GPT-4 驱动&#xff0c;将 LLM 的“思想”链接在一起&#xff0c;以自主实现您设定的任何目标。作为 GPT-4 完全自主运行的首批示例之一&#xff0c;Auto-GPT 突破了 AI …