HTML5音频标签的兼容性问题和优化在

的一个移动交互项目中，我遇到了一个在App、微信和H5页面上下文之间切换以选择音频播放的功能。测试过程中出现了一些兼容性问题。 ，这里有很多知识值得发现，今天我们就来看看这个HTML5-Audio。

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

1。默认样式

声音标签在浏览器中的默认样式如下所示。需要注意的一点：需要配置controls属性（这样默认的控制栏就是Audio标签控制属性），否则样式效果不会出现。

2。音频

1 支持的音频文件格式。 OGG：

OGG 是一种新的音频压缩格式，类似于 MP3 等音乐格式。 OGG是完全免费、开放且无专利的。 OGG 文件格式的大小和音质可以继续改进，而不会影响较旧的编码器或播放器。

2。 MP3：

MP3是一种音频压缩技术，其全称是Moving Picture Experts Group Audio Layer III（运动图像专家组音频层III），也称为MP3。它旨在显着减少音频数据量。以 1:10 甚至 1:12 的比例将音乐压缩成较小的文件，对于大多数用户来说，与原始未压缩音频相比，再现的音频质量不会明显下降。

3。 WAV：

WAV 是 Microsoft 开发的一种音频文件格式。用于保存Windows平台下的音频信息资源。它受到 Windows 平台及其应用程序的广泛支持。这是标准格式的 WAV 文件。格式与CD相同，因此音频文件质量几乎与CD相同。？ IE9

说明：

声音 该标签默认支持。音频文件格式包括 MP3、WAV 和 OGG。不同的浏览器对这三种格式提供不同级别的支持。其中以MP3格式支持最好。

WAV格式音质最好，但文件大小较大。 MP3压缩比较高，普及率较高，但音质比WAV差。如果OGG和MP3采用相同码率编码，OGG体积更小，而且OGG是免费的，无需缴纳专利费（很受国人欢迎）。

2。 HTML5 Audio 标签在不同浏览器中的兼容性

注：

Audio 标签在较新的浏览器中也可以支持，并且在移动端兼容性会更好。

4.使用方法注意事项 src url播放音乐的url（Firefox只支持OGG音乐，IE9只支持MP3音乐，看来chrome都支持）preloadpreload页面加载，加载或缓冲音频），如果使用自动播放，该属性将无效。循环循环循环播放控制控制❀♹❀（控制按钮）自动播放 自动播放 A 加载并播放音频、视频文件或重播 暂停的音频和视频播放 使用自动播放进行播放时 暂停暂停模式已启动 已完成当前播放结束 时间更新 当前播放时间更改时 可以播放S翁是完全加载可播放缓冲到当前可播放状态。

可以通过JS代码控制播放：

let audio = document.getElementById('audio');

audio.load();//加载

audio.play();//播放†：

1。解决预加载问题

目前情况：Safari和微信不支持iOS系统预加载。

解决方案：用户必须主动触发事件（Event）才能播放。

示例代码：

$("#btn").click(function(){

$("#audio").load();

})。解决多个音频文件之间切换的问题

目前情况：当时项目有不同音乐播放之间的切换。如果使用修改Audio标签src的方法，在iOS中会出现音乐无法播放或者播放延迟过高的问题。

解决方案：出现此错误的原因是iOS上无法缓存音频文件。当页面访问其他音频文件时，从网络访问音频文件。解决方案：可以声明多个 Audio标签，提前引入要导入的音频文件，播放完后调用对应的文件。这种方案的缺点是在iOS系统下每个Audio占用一个线程。拥有更多音频会占用大量资源。 ;或者将多个音频文件 合并为一个文件 。播放其他声音时，只需调用合并后的声音文件的相应时段即可。虽然比较麻烦，但是兼容性很好。您可以使用这个声音合并工具（http://jsfiddle.net/aarongloege/rQv5h/light/）。

示例代码：

var audio1 = 文档 I'd('audio1' ) ;

var audio2 = document.getElementById('audio2');

audio1.play();

audio2.play();

3.自动播放问题解决方案

目前情况：iOS Safari浏览器或部分Android手机浏览器不支持自动播放属性。

解决办法：或者指示用户手动启动播放操作。

例如，如果你绑定了touchstart事件来执行audio.play()动作，那么在与生产和测试同学交流时必须确认这一点。如果是微信环境，可以调用微信提供的插件（jweixin-1.0.0.js）。 ？ 一个声音标签只能播放一种声音。

解决方案：如果要同时播放多个音频，则需要使用多个音频标签。不过这种情况需要注意的是，所有浏览器都支持在同一页面播放多种声音，而项目场景基本只允许播放。音频，请注意，播放当前音乐时，控制其他音乐项目的播放。

示例代码：

。解决移动端混音播放问题

现状：iOS Safari下关闭浏览器窗口（切换到后台）或切换标签页时，声音仍然循环播放音频文件，只有浏览器关闭时才停止播放选项卡已关闭。

解决方法：使用