html5 音频播放实战

背景

内容付费的大背景下，为了使内容可以快速传播，有效学习。
快速开发替代APP迭代慢的限制。

场景

嵌入APP，微信, 直接在浏览器中打开。

使用技术

h5 audio
jsbridge
react

功能

1. 音频播放。
2. 进度条展示。
3. 拖动播放。
4. 切换播放。
5. 音频埋点。

核心代码

全局维护一个audio标签，只是通过切换不同的src去控制切换播放
<audio src='''' preload>
<div
  className="progress-circle"
  onTouchStart={this.startTouch}
  onTouchEnd={this.endTouch}
  onTouchMove={this.handleAudioProgress}
></div>
audio.addEventListener('canplaythrough', () => {
// do something
})
audio.addEventListener('play', () => {
// do something
})
audio.addEventListener('timeupdate',()=>{
})
audio.addEventListener('ended',()=>{
})
audio.addEventListener('pause',()=>{
})
// 在iphone中嵌入app的h5 audio是可以后台播放的，
// 如果系统其它音频被启动，之前的audio会被中断。
// 这里的事件主要对这种异常做处理。
// 安卓待验证...
audio.addEventListener('abort',()=>{
})

问题

1. 播放动画会莫名其妙丢失。
2. 音频缓冲时间过长。
3. ios 不支持preload。
4. 部分机型不支持特定的音频格式。

知识点

1. 播放动画丢失的原因：css3 的animation 不支持background-image. [参考文档]（https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image）
   后续我们通过 transform:scaleY(0.5)的形式修复。
   细节可以查看这个demo: https://gist.github.com/mushang11/bbd0a6c78bd7c57934c071fa794df070
2. 流媒体格视频比较常见的HLS，苹果的标准，FLV，Adobe的标准（flash），
   音频的有m4a.这些是纯粹的流媒体协议，但是是客户端的支持兼容都要差一些，
   需要做很多兼容性的工作。特点是纯粹的分片下载，头文件也很小可以忽略不计，
   主要信息再各个分片里面，不会随着文件的大小影响播放速度，用技术的话讲就是
   支持水平扩展。常用的视频加密技术，都是采用流媒体，MP3，MP4格式并不能
   做到视频加密。
   所以我们最初的音频格式为MP3，修改到后期的m3u8.有效解决了音频缓冲时间长的问题。
3. ios需要用户交互才会触发，所以就在移动端添加一个事件监听器 touch.去完善你的
   业务逻辑。

document.body.addEventListener('touch',()=>{
   audio.play();
})

4. 这个问题的原因可以统一归类为兼容性。不支持m3u8的音频格式。

兼容性查看网址: https://caniuse.com/

音频转码

如何把一个MP3转m3u8或者m4a的格式：
1. 我们借助了腾讯云的转码接口。https://cloud.tencent.com/solution/video
2. 或者可以通过转码工具去做处理。

参考文档

1. https://www.w3.org/wiki/Html/Elements/audio
2. https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image
3. https://gist.github.com/derhuerst/c2642dee90537a2477f51497ab8894fa
   m3u8文件头信息
4. https://www.ibm.com/developerworks/cn/web/wa-ioshtml5/index.html