H5 中的 Audio

最近这个项目中在做题的时候需要播放语音,浏览器上自动播放 audio 或者 video 一直有这样或那样的限制和兼容问题。这里记录一下实现过程。

属性 描述
src 音频 URL
muted 规定音频输出时应该被静音
autoplay 音频在就绪后马上播放
controls 向用户显示控件,如播放按钮
loop 每当音频结束时重新开始播放
preload 音频在页面加载时进行加载,并预备播放。如果同时使用了 autoplay,则忽略该属性

浏览器为了提高用户体验,减少数据消耗,audio 的 autoplay 实现需要绕弯子:

1、发生了用户行为,如:click、tap、etc
2、监听最外层 div 的鼠标移入事件,<div (mouseenter)=“play()”> 待验证

否则,在 mounted 中直接调用this.Player.play()时 Chrome 会报错Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

一、封装 js 方法

先写一个公用 js 文件:AudioPlayer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class AudioPlayer {
constructor (audioList = [], options = null) {
options = Object.assign({ speed: 1.0, onEnd: null }, options)
this.onEnd = options.onEnd
if (audioList) {
this.audio = document.createElement('audio')
this.audio.src = audioList[0] || audioList[1]
// this.audio.muted = true
// this.audio.autoplay = 'autoplay'
// 播放速度
this.audio.playbackRate = options.speed
}
}
// 开始播放
play () {
this.audio.play()
this.onEnd && this.audio.addEventListener('ended', () => {
this.onEnd()
})
}
}

export default AudioPlayer

二、使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import AudioPlayer from '../utils/media/AudioPlayer'

export default {
data () {
return {
Player: null
}
},
methods: {
// 点击播放按钮
playBtn () {
this.Player.audio.muted = false
this.Player.play()
}
},
mounted () {
this.Player = new AudioPlayer(audioList, { speed: 1.25 })
}
}

参考资料:

以上

随笔标题:H5 中的 Audio

随笔作者:刘先玉

发布时间:2019年12月23日 - 19:57:46

最后更新:2019年12月23日 - 19:57:46

原文链接:https://liuxianyu.cn/article/h5-audio.html