解决微信和苹果端不能自动播放音乐
ios 为了节省用户流量,对于 audio标签的 preload 和 autopaly 标签会自动拦截,除非用户手动点击交互才会执行 。同时audio标签在苹果端或微信端不能设置声音大小和是否静音,而通常我们需要设置网页背景音乐或者设置定时播放语言(订单提醒系统),这时我们就需要解决在苹果端和微信端出现的声音问题?
在网页中插入audio标签,设置src属性(为音乐的播放地址)
<audio controls id="bgmusic">
<source src="music/order.mp3" type="audio/mpeg">
</audio>
controls为audio控制条(默认都需要显示),pc和移动端一般都支持。
pc端设置autoplay="autoplay"(自动播放)和loop="loop"(循环播放)可以正常实现功能,但是在部分移动端(苹果端和微信端)这两个属性失效,所以在移动端需要利用JS来实现自动播放!同时也有很多属性在苹果端和微信端也是不能使用的!
一、解决IOS和微信端不能自动播放的问题?
产生原因:ios 和微信端为了节省用户流量,对于 audio标签的 preload 和 autopaly 标签会自动拦截,需用户手动点击交互才会执行 。
(1)苹果端不能播放解决办法?
加载时默认触摸实现自动播放代码如下:
audio.load();
audio.play();
$(document).on("touchstart",function() {audio.play()})
(2)微信端因为本身浏览器限制,导致不能自动播放!
需要先引入 http://res.wx.qq.com/open/js/jweixin-1.0.0.js脚本
document.addEventListener("WeixinJSBridgeReady", function () {
audio.load();
audio.play();
}, false);
二、解决不能放在定时器中出现的问题?[订单提醒中应用]
有些时候需要放在定时器自动播放音乐,比如每隔1分钟播放一个订单状态。
如果将上面代码直接放到定时器时,同样也不能自动播放音乐!
解决思路:开始是自动先触发自动播放后,然后在定时器中播放音乐,最初想用声音控制,加载时默认静音,然后后续如果有订单时,设置声音。但是在Ios中对audio声音大小限制不起作用。
最终解决方法:
如果有订单时,加载后自动播放。
如果没有订单先播放,然后将播放器暂停。
这样就解决了播放器加载时触发了播放按钮!
课件下载:https://pan.baidu.com/s/1jpARsG08wbKFZVBW_HiVTA【百度网盘】
1001浏览量 · 0评论 · 2018-11-04 06:47:14
热门专题
-
01
前端 / HTML超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分
13 篇文章
-
02
前端 / JS/JQjQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
31 篇文章
-
03
前端 / CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
15 篇文章
-
04
前端 / VUE Vue是一套构建用户界面的渐进式框架。 Vue只关注视图层,采用自底向上增量开发的设计。
41 篇文章
-
05
设计 / PhotoshopPhotoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
0 篇文章
-
06
后端 / PHPPHP,一个嵌套的缩写名称,是英文超级文本预处理语言(PHP:Hypertext Preprocessor)的缩写。PHP 是一种 HTML 内嵌式的语言
0 篇文章
-
07
设计 / aihtml是超文本标记语言
0 篇文章
-
08
后端 / ThinkPhpThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。遵循Apache2开源协议发布。简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。
5 篇文章
-
09
前端 / 微信小程序微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
3 篇文章
-
10
办公 / WordWord 提供了许多易于使用的文档创建工具,同时也提供了丰富的功能集供创建复杂的文档使用。
2 篇文章
全部评论 0