纯前端解码、播放、录音、编码 AMR 音频,无须服务器支持,基于 [amr.js]
注意:由于使用了 amr.js 做编码和解码,因此 js 文件(压缩后,未 gzip)接近 500 KB,使用前请考虑。
安装
npm i benz-amr-recorder --save
使用时引用
import BenzAMRRecorder from 'benz-amr-recorder'
html部分
<div class="dialogue-item" v-if="diagItem.msgtype === 'voice'" @click="openRecording(diagItem.url, index)"
style="cursor: pointer">
<div class="voice">
<img src="@/assets/img/voice.gif" alt="" v-if="voiceActive===index">
<img src="@/assets/img/voice.png" alt="" v-else>
<span>{{diagItem.voice.play_length}}''</span>
</div>
</div>
初始化对象
data() {
return {
playRec: null, //播放对象
voiceActive: null
}
}
/******播放语音******/
methods: {
//播放语音
openRecording(_url, index) {
let url = _url.split('.com')[1]
let vm = this
if (vm.playRec !== null) {
vm.stopPlayVoice()
}
vm.playRec = new BenzAMRRecorder()
//⚠️注意跨域问题
vm.playRec.initWithUrl('/record' + url).then(function() {
vm.voiceActive = index
vm.playRec.play()
vm.playRec.onEnded(function() {
vm.voiceActive = null
})
}).catch((e) => {
console.log(e)
vm.$message.error('播放录音失败')
})
},
//停止播放
stopPlayVoice() {
if (this.playRec.isPlaying()) {
this.playRec.stop()
}
},
}
网友评论