未加星标

HTML5 Audio 的兼容性问题和优化

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

本人在双十一期间,做的一个移动端互动项目中,遇到一个在 App 、微信、H5页面环境切换选择音频播放的功能,在测试的时候出了不少兼容性问题,这里有很多值得探索的知识,今天我们就来看一下这个 html5-Audio。

Audio 标签用于定义声音,比如音乐或其他音频流,HTML5 的 Audio 标签在很大程度上取代了 Flash 来播放音乐。

一、默认样式

Audio 标签在浏览器中的默认样式如下图所示,需要注意的一个地方:需要配置 controls 属性(是否显示默认控制条,是 Audio 标签的控制属性),否则不展示样式效果。


HTML5 Audio 的兼容性问题和优化
二、Audio 支持的音频文件格式

1、OGG:

OGG 是一种新的音频压缩格式,类似于 MP3 等的音乐格式。OGG 是完全免费、开放和没有专利限制的。OGG 文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器。

2、MP3:

MP3 是一种音频压缩技术,其全称是 Moving Picture Experts Group Audio Layer III(动态影像专家压缩标准音频层面3),简称为 MP3 。它被设计用来大幅度地降低音频数据量。将音乐以 1:10 甚至 1:12 压缩成容量较小的文件,而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。

3、WAV:

WAV 是微软公司开发的一种声音文件格式,它用于保存 windows 平台的音频信息资源,被 Windows 平台及其应用程序所广泛支持,标准格式化的 WAV 文件和 CD 格式一样,因此在声音文件质量和 CD 相差无几。

三、兼容性问题

我们来从下面几个角度看兼容性问题:

1、音频格式的兼容性

音频格式 Chrome Firefox IE9 Opera Safari OGG 支持 支持 支持 支持 不支持 MP3 支持 不支持 支持 不支持 支持 WAV 不支持 支持 不支持 支持 不支持 说明:

Audio 标签默认支持的主流的音频文件格式有 MP3、WAV、OGG ,不同的浏览器对三种格式支持程度不一样。其中 MP3 格式支持度最好。

WAV 格式音质最好,但是文件体积较大。MP3 压缩率较高,普及率高,音质相比 WAV 要差。OGG 与 MP3 在相同位速率(Bit Rate)编码的情况下,OGG 体积更小,并且 OGG 是免费的不用交专利费(这点国人很中意)。

2、不同浏览器对于 HTML5 Audio 标签的兼容性


HTML5 Audio 的兼容性问题和优化
说明:

在版本较新的浏览器中都是可以支持 Audio 标签的,在移动端上兼容性会更好一些。

四、使用方法

我们经常会使用到的属性、方法、事件:

1、常用属性:

属性 属性值 注释 src url

播放的音乐的 url 地 址(火狐只支持 OGG 的音乐,而 IE9 只支 持 MP3 格式的音乐 。chrome 貌似全支持)

preload preload

预加载(在页面被加 载时进行加载或者说 缓冲音频),如果使用 了 autoplay 的话那么该 属性失效。

loop loop 循环播放 controls controls

是否显示默认控制 条(控制按钮)

autoplay autoplay 自动播放

2、常用方法:

函数 作用 load () 加载音频、视频软件 play () 加载并播放音频、视频文件或重新播放暂停的的音频、视频 pause () 暂停当前播放的音频

3、常用事件:

事件名称 事件作用 play play 和 autoplay 播放时 pause pause 方法触发时 ended 当前播放结束 timeupdate 当前播放时间发生改变的时候(播放中常用的时间处理) canplaythrough 歌曲已经载入完全完成 canplay 缓冲至目前可播放状态。

我们可以通过 JS 代码来控制播放:

五、问题与解决方案:

好的,我们再来看具体看一下 Audio 标签的兼容性问题:

1、如何解决预加载问题

现状:preload 在 iOS 系统上的 safari 和微信是不支持的。

解决方法: 需要用户主动触发事件(Event) 才能进行播放。

示例代码:

2、如何解决多个音频文件切换问题

现状:当时项目中有切换不同音乐播放,如果采用更改 Audio 标签的 src 的方式,iOS 下会出现不能播放音乐或者播放延迟太高问题。

解决方法:这种 bug 出现的原因是音频文件不能缓存在 iOS 系统上,每当页面访问其他音频文件时,都从网络访问音频文件,解决方法:可以在页面中 声明多个 Audio 标签,把需要引入的音频文件预先引入,播放哪个再调用相应文件,这个方案的缺点是在 iOS 系统下每一个 Audio 占一个线程,如果有多个的 Audio ,则很占资源;或者把多个音频文件 合并成为一个文件 ,播放其他音频的时候只需要调用合并之后的音频文件的相应时段,虽然比较繁琐,但是兼容性很好,可以参考下该音频合并工具(http://jsfiddle.net/aarongloege/rQv5h/light/)。

示例代码:

<audio src="" id="audio1"></audio>

<audio src="" id="audio2"></audio>

3、如何解决自动播放问题

现状:iOS 端 safari 浏览器或者部分安卓手机的浏览器不支持 autoplay 属性。

解决方法:还是 引导用户手动触发播放操作 。

比如绑定 touchstart 事件进行 audio.play() 操作,因此在和产品、测试同学沟通确认的时候就需要确认好这个点。如果在微信环境下可以 调用微信提供的插件 ( jweixin-1.0.0.js )。

示例代码:

4、如何解决播放数量问题 现状:一个 Audio 标签只能播放一个音频。

解决方法:如果要同时播放多个音频,只得使用多个 Audio 标签,但是这个情况下要注意,各浏览器是是支持在同一页面播放多个音频的,而项目场景基本只允许播放一个音频,这个得注意 控制播放当前音乐时要停止其他音乐项的播放 。

示例代码:

5、如何解决移动端下音频混合播放问题

现状:在 iOS safari 下关闭浏览器窗口(切换至后台)或者切换标签时, Audio 仍然继续循环播放音频文件,如果关闭浏览器标签才会停止播放。

解决方法:使用 循环存储时间 来检查用户是否在网页上, timeupdate 事件是在音频 Audio 的播放位置发生改变时触发。

示例代码:

var

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:HTML5 Audio 的兼容性问题和优化
本站链接:https://www.codesec.net/view/620974.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(35)