0.应用场景

前端移动端开发,经常有播放音乐的需求。比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐。

1.audio标签播放mp3

(一)常用属性和API介绍

1.controls属性

有了它,就会显示控制条。

图1 chrome默认audio样式

图2 ie默认audio样式

图3 firefox默认audio样式

图4  ios的微信端(iphone6,系统版本11.4,微信使用内置Safari):

2.autoplay属性

autoplay指的是自动播放,chrome61、ie11 ,ie edge、firefox 60已测试,可自动播放。ios不能自动播放,那么先点一下播放按钮才行。这是什么原因呢,ios为了用户流量着想,限制了audio标签的自动播放,那么safari没有用户的交互就播放会被拦截。

PS:6月29日补充。杯具了:(,我的电脑自动更新到chrome67了,不能自动播放了。参考“Chrome禁止audio自动播放”搜索词。

autoplay的默认值是false。

(二)实现ios自动播放

我们刚才说了,除了ios,其他端都能够使用autoplay属性实现自动播放。那么ios自动播放应该如何来做呢?

首先,我们要知道音频流(audio stream)在ios上的工作方式。那么就是说只有有了用户交互后才能下载,接下来才能播放。

如下图:

参考Overcoming iOS HTML5 audio limitations

图1:Workflow to load audio in mobile Safari

第二,用Js来完成效果,ios的微信端可以监听XXX事件,safari(和ios微信端)监听touchstart事件,然后手动play。

ios微信端:

<script>
var audio = document.querySelector('#audio');
audio.play();
//既然是微信的ready事件,只能在微信端使用
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
</script>

成功播放!

ios的safari浏览器和微信端:

<audio id="audio" controls src="assets/music.mp3" autoplay>
<source src="assets/music.mp3" type="audio/mpeg">
</audio> <script>
var audio = document.querySelector('#audio');
//safari和微信
document.addEventListener("touchstart", function () {
audio.play();
}, false);
</script>

成功播放!

长时间的写博客,有些累了,完整Demo待更新!!!

audio标签的自动播放(ios)的更多相关文章

  1. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  2. 【Egret】里使用audio标签达到默认播放背景音乐

    方法一 <audio id="bgmMusic" style="position:absolute;" src="resource/assets ...

  3. H5音乐自动播放ios//禁止安卓手机图片点击

    定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...

  4. <audio>标签HTML5音乐播放器

    <audio>标签:用于在文档中表示音频内容.利用它,你可以在你的个人网站上放一首你喜欢的歌.    <audio src="music.mp3">< ...

  5. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  6. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  7. 原生js设置audio在谷歌浏览器自动播放

    https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...

  8. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  9. 100%解决ios上audio不能自动播放的问题

    由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...

随机推荐

  1. Android 音频系统得框架

    http://www.mamicode.com/info-detail-1790053.html http://blog.csdn.net/lushengchu_luis/article/detail ...

  2. BootStrap框架引入文件

    bootstrap -- 框架 引入需要的  这是外网的------************************************************************* < ...

  3. php-fpm 和 nginx 的两种通信方式

    在 linux 中,nginx 服务器和 php-fpm 可以通过 tcp socket 和 unix socket 两种方式实现. 一下内容转自:https://blog.csdn.net/qq62 ...

  4. 自定义JSON返回字段

    今天看到一篇文章,里面介绍了如何自定义返回json字段,感觉挺好用的,这里学习一下. 实现工具类: /** * @author fengzp * @date 17/2/20上午10:34 * @ema ...

  5. 【docker】docker下安装mysql

    1 拉取mysql镜像,采用网易加速地址docker pull hub.c.163.com/library/mysql:5.7 2 重命名镜像名docker tag hub.c.163.com/lib ...

  6. [CISCO] Telete/SSH 之 Port 绑定/端口安全

    [网络] Telete/SSH 之 Port 绑定/端口安全 一.前言 之前写完了网络] DHCP 之 Mac 绑定,CiSCO 交换机配置 SSH 登陆.这次我们再试试能不能挖的在深入些. (1) ...

  7. [转] LVM分区在线扩容

    [转] LVM分区在线扩容 在线扩容的这台服务器,LV分区格式为xfs,原大小1.2TB.增加了一块硬盘,大小为1.8TB. fdisk /dev/cciss/c0d1 # 创建分区,并指定分区类型为 ...

  8. Swift 函数提前返回

    简评:函数提前返回主要的好处是:将每个错误处理进行分离,审查代码时不需要考虑多种复杂异常,我们可以吧注意力集中在也业务逻辑中,调试代码时可以直接在异常中打断点. 提前返回 首先来看一下需要改进的代码示 ...

  9. Leetcode 102 二叉树的层次遍历 Python

    二叉树的层次遍历 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7],   3   / \ 9 20 ...

  10. CentOS下安装Docker

    简介:本篇文章介绍如何在CentOS系统下面安装docker系统. 官方文档:https://docs.docker.com/install/linux/docker-ce/centos/ Docke ...