html5 音频播放实战

最新推荐文章于 2024-03-30 00:37:10 发布

置顶

wq2011117253

最新推荐文章于 2024-03-30 00:37:10 发布

阅读量252

点赞数

分类专栏： H5 移动-web audio

本文链接：https://blog.csdn.net/wq2011117253/article/details/85014478

版权

背景

内容付费的大背景下，为了使内容可以快速传播，有效学习。
快速开发替代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的