使用Vue獲取微信語音需要通過微信JS-SDK提供的wx.startRecord()和wx.stopRecord()接口,在Vue組件中通過wx.config()配置微信JS-SDK,對wx.startRecord()和wx.stopRecord()進行調用,最后通過wx.uploadVoice()上傳語音,實現獲取微信語音。
// 引入微信JS-SDK
import wx from 'weixin-js-sdk'
export default{
name:'voice', // 組件名稱
data(){
return {
localId:'', // 本地音頻id
serverId:'' // 服務器音頻id
}
},
mounted(){
this.wxConfig()
},
methods:{
// 配置微信JS-SDK
wxConfig(){
axios.get('/api/getSign').then(res=>{
let signData = res.data
wx.config({
debug: false,
appId: 'yourAppId',
timestamp: signData.timestamp,
nonceStr: signData.nonceStr,
signature: signData.signature,
jsApiList: [
'startRecord',
'stopRecord',
'uploadVoice',
'downloadVoice'
]
})
})
},
// 錄音
startRecord(){
wx.startRecord()
},
// 停止錄音
stopRecord(){
let vm = this
wx.stopRecord({
success:function(res){
vm.localId = res.localId
vm.uploadVoice()
}
})
},
// 上傳音頻
uploadVoice(){
let vm = this
wx.uploadVoice({
localId:vm.localId,
success:function(res){
vm.serverId = res.serverId
}
})
}
}
}
上述代碼中,wxConfig()方法用來配置微信JS-SDK,其中需要從后臺獲取簽名信息。startRecord()方法用來開始錄音,stopRecord()方法用來停止錄音并上傳音頻。
另外,如果需要播放已經上傳到服務器的語音,可以通過wx.downloadVoice()下載語音并使用HTML5的audio標簽播放。
總之,使用Vue獲取微信語音需要先配置微信JS-SDK,再利用wx.startRecord()和wx.stopRecord()接口錄音并上傳音頻,最后可以使用wx.downloadVoice()下載并播放已上傳到服務器的語音。以上是一個簡單的獲取微信語音的實現過程。
上一篇css腳本文字不在背景上
下一篇ajax常見的前端面試題