一个关于vue播放音频的需求,对应的视频及其他的需求都是相通的.
我们这边第三方资源服务器不支持https,而我们本地是https的请求,导致请求资源拿不到
我决定转成二进制下载下来播放. 使用二进制资源直接播放,大概有下面三个方法
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//配置请求方式、请求地址以及是否同步
xhr.open('post/get', '路径', true);
//设置请求结果类型为blob
xhr.responseType = 'blob';
//请求成功回调函数
xhr.onload = function(res) {
};
xhr.send();
// 第一种 AudioContext 这个API比较冷门的方式,但是可扩展性比较高, 如果对音频播放要求比较高的话可以采用
var audioCtx = new (window.AudioContext || window.webkitAudioContext)()
audioCtx.decodeAudioData(res.data, function(buffer) { // 解码成功时的回调函数
var source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(audioCtx.destination)
source.start(0) // 立即播放
console.log(audioCtx, source)
}, function(e) { // 解码出错时的回调函数
console.log('Error decoding file', e)
})
// 第二种二进制转base64
'data:audio/wav;base64,' + Buffer.from(res.data).toString('base64')
// 第三种二进制转mp3
const blob = new Blob([res.data], {
type: 'application/mp3'
})
后两种方式我们可以拿到二进制资源直接放到src路径里面播放.
关于播放器的样式可以自由定义,我们通过js构造出一个audio实例去控制播放/暂停/切换的实现就可以.
因为我的需求比较简单只有这三种功能就可以了,但是理论是相通的.
image.png
// 因为播放是在表格中 , 有些数据是没有录音资源的,所以我们在请求完表格数据的时候先初始化一下数据
res.data.responseData.data.map(item => {
if (item.recordingLen > 0) {
if (!this.AudioType[item.id]) {
this.$set(this.AudioType, item.id, {})
this.$set(this.AudioSource, item.id, {})
this.$set(this.AudioType[item.id], 'type', 'pause')
}
}
})
// 首先判断是否有资源, 因为后台分页,所以在切换分页的时候再去判断这个资源是否被初始化过了,
// 防止重复下载.两个状态,根据id,存储了资源以及对应资源的播放状态
// 此处点击播放时候触发, 点击播放的时候可以通过上面那个方法通过路径拿二进制资源
// 也可以用axios的方法.拿资源之前先判断这个资源是否下载过了,如果下载过了则直接去播放,否则去下载播放
playAudio(index, row) {
if (this.AudioSource[row.id].src && this.AudioInstance) { // 判断是否存在播放资源 如果存在则不请求直接播放
this.getAudio(row.id)
return
}
axios({
method: 'get',
responseType: 'arraybuffer',
url: '',
data: {},
}).then(res => {
const blob = new Blob([res.data], {
type: 'application/mp3'
})
const objectUrl = window.URL.createObjectURL(blob)
// 设置初始化的状态
this.$set(this.AudioSource[row.id], 'src', objectUrl)
this.getAudio(row.id)
}
})
}
// 此处生成播放audio的实例及控制暂停切换的方法
getAudio(id) {
if (this.AudioCurrentID === id) { // 如果点击的是当前播放的 则播放暂停
if (this.AudioInstance.paused) {
this.AudioInstance.play()
this.$set(this.AudioType[id], 'type', 'play')
return
}
this.AudioInstance.pause()
this.$set(this.AudioType[this.AudioCurrentID], 'type', 'zanting')
} else {
if (this.AudioCurrentID) {
this.AudioInstance.pause()
this.AudioInstance.currentTime = 0 // 如果点击的不是当前播放的 则播放位置调整到开始位置
this.$set(this.AudioType[this.AudioCurrentID], 'type', 'pause')
}
this.AudioCurrentID = id // 设置当前播放id
if (this.AudioInstance) { // 如果存在播放资源的实例 则直接播放 否则构造新的播放器
this.AudioInstance.src = this.AudioSource[id].src
this.AudioInstance.play()
this.$set(this.AudioType[id], 'type', 'play')
return
}
const audio = new Audio()
this.AudioInstance = audio
this.AudioInstance.addEventListener('ended', (e) => {
this.onended()
})
this.$nextTick(function() {
this.AudioInstance.src = this.AudioSource[id].src
this.AudioInstance.play()
this.$set(this.AudioType[id], 'type', 'play')
})
}
}
// 最后监听播放完成事件,去改变播放状态
onended() {
this.$set(this.AudioType[this.AudioCurrentID], 'type', 'pause')
},
