一個關(guān)于vue播放音頻的需求,對應(yīng)的視頻及其他的需求都是相通的.
我們這邊第三方資源服務(wù)器不支持https,而我們本地是https的請求,導(dǎo)致請求資源拿不到
我決定轉(zhuǎn)成二進(jìn)制下載下來播放. 使用二進(jìn)制資源直接播放,大概有下面三個方法
//創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
//配置請求方式火的、請求地址以及是否同步
xhr.open('post/get', '路徑', true);
//設(shè)置請求結(jié)果類型為blob
xhr.responseType = 'blob';
//請求成功回調(diào)函數(shù)
xhr.onload = function(res) {
};
xhr.send();
// 第一種 AudioContext 這個API比較冷門的方式,但是可擴(kuò)展性比較高, 如果對音頻播放要求比較高的話可以采用
var audioCtx = new (window.AudioContext || window.webkitAudioContext)()
audioCtx.decodeAudioData(res.data, function(buffer) { // 解碼成功時的回調(diào)函數(shù)
var source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(audioCtx.destination)
source.start(0) // 立即播放
console.log(audioCtx, source)
}, function(e) { // 解碼出錯時的回調(diào)函數(shù)
console.log('Error decoding file', e)
})
// 第二種二進(jìn)制轉(zhuǎn)base64
'data:audio/wav;base64,' + Buffer.from(res.data).toString('base64')
// 第三種二進(jìn)制轉(zhuǎn)mp3
const blob = new Blob([res.data], {
type: 'application/mp3'
})
后兩種方式我們可以拿到二進(jìn)制資源直接放到src路徑里面播放.
關(guān)于播放器的樣式可以自由定義,我們通過js構(gòu)造出一個audio實例去控制播放/暫停/切換的實現(xiàn)就可以.
因為我的需求比較簡單只有這三種功能就可以了,但是理論是相通的.
image.png
// 因為播放是在表格中 , 有些數(shù)據(jù)是沒有錄音資源的,所以我們在請求完表格數(shù)據(jù)的時候先初始化一下數(shù)據(jù)
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')
}
}
})
// 首先判斷是否有資源, 因為后臺分頁,所以在切換分頁的時候再去判斷這個資源是否被初始化過了,
// 防止重復(fù)下載.兩個狀態(tài),根據(jù)id,存儲了資源以及對應(yīng)資源的播放狀態(tài)
// 此處點擊播放時候觸發(fā), 點擊播放的時候可以通過上面那個方法通過路徑拿二進(jìn)制資源
// 也可以用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)
// 設(shè)置初始化的狀態(tài)
this.$set(this.AudioSource[row.id], 'src', objectUrl)
this.getAudio(row.id)
}
})
}
// 此處生成播放audio的實例及控制暫停切換的方法
getAudio(id) {
if (this.AudioCurrentID === id) { // 如果點擊的是當(dāng)前播放的 則播放暫停
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 // 如果點擊的不是當(dāng)前播放的 則播放位置調(diào)整到開始位置
this.$set(this.AudioType[this.AudioCurrentID], 'type', 'pause')
}
this.AudioCurrentID = id // 設(shè)置當(dāng)前播放id
if (this.AudioInstance) { // 如果存在播放資源的實例 則直接播放 否則構(gòu)造新的播放器
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')
})
}
}
// 最后監(jiān)聽播放完成事件,去改變播放狀態(tài)
onended() {
this.$set(this.AudioType[this.AudioCurrentID], 'type', 'pause')
},
