安裝

npm install benz-amr-recorder

引入

const BenzAMRRecorder = require('benz-amr-recorder')

使用

<template><div class="wx-voice-div" @click="playVoice(objData)"> </template>methods:{amrPlay(amr,obj){ //播放this.$set(obj, 'amrPlaying', true)amr.play()},amrStop(amr,val){// 停止（包括播放結(jié)束）this.$set(obj, 'amrPlaying', false)amr.stop()},playVoice(obj){this.getMaterialOther(obj.repMediaId , obj.repName).then(url => {this.$set(obj,'repUrl',url); //替換數(shù)據(jù)源中播放地址this.handleAudio(val)})},async getTempMaterialOther(repMediaId,fileName){ //獲取后臺(tái)返回的二進(jìn)制文件let url;await this.ajax_get({url:this.$local+'crm/wxmaterial/tempMaterialOther', params:{mediaId: repMediaId,fileName: fileName}}).then(response => {url = window.URL.createObjectURL(new Blob([response])) //下載二進(jìn)制文件到本地})return url},handleAudio(obj){this.$set(obj,'amr',new BenzAMRRecorder())let amr = obj.amrlet that = thisamr.initWithUrl(obj.repUrl).then(function() {that.amrPlay(amr, obj)that.$set(obj,'amrDuration',amr.getDuration())})amr.onEnded(function() {that.$set(obj, 'amrPlaying', false)//播放完了})} }

benz-amr-recorder詳細(xì)介紹

總結(jié)

以上是生活随笔為你收集整理的VUE使用benz-amr-recorder 实现解码、播放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。