需求描述

制作一个H5页面，打开之后可以录音，并将录音文件提交至后台

微信录音最长时长为1min

代码如下

// isVoice： 0-未录音 1-录音中 2-录完音

// 点击录音/录音中 按钮展示

// isListen // 0-未试听/试听结束 1-试听中 2-暂停试听

// 录完音 按钮展示

data() {

return {

id: '',

startTime: 0,

recordTimer: null,

localId: '', // 录音本地id

serverId: '', // 录音微信服务id

showMask: false,

tip: 1, //提交 0- 重录

isVoice: 0, // 0-未录音 1-录音中 2-录完音

isListen: 0, // 0-未试听/试听结束 1-试听中 2-暂停试听

data1: 0,

work: {},

isPlay: false, // 是否播放

isSubmit: false, // 是否已提交

}

}

// 微信配置

getConfig() {

let _url = encodeURIComponent(window.location.href)

// 后台提供接口，传入当前url(返回基础配置信息)

voiceApi.wechatConfig(_url)

.then(res => {

if (res.data.code == 200) {

wx.config({

debug: false,

appId: res.data.content.appid,

timestamp: res.data.content.timestamp, // 必填，生成签名的时间戳

nonceStr: res.data.content.nonceStr, // 必填，生成签名的随机串

signature: res.data.content.signature, // 必填，签名

// 需要授权的api接口

jsApiList: [

'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice', 'downloadVoice', 'playVoice', 'pauseVoice', 'onVoicePlayEnd'

]

})

wx.ready( () => {

wx.onVoiceRecordEnd({

// 录音时间超过一分钟没有停止的时候会执行 complete 回调

complete: function (res) {

_this.isVoice = 2

_this.localId = res.localId;

}

})

})

}

})

},

// 开始录音

voiceStart(event) {

let _this = this

event.preventDefault()

// 延时后录音，避免误操作

this.recordTimer = setTimeout(function() {

wx.startRecord({

success: function() {

_this.startTime = new Date().getTime()

_this.isVoice = 1

},

cancel: function() {

_this.isVoice = 0

}

})

}, 300)

},

// 停止录音

voiceEnd(event) {

this.isVoice = 2

let _this = this

event.preventDefault()

// 间隔太短

if (new Date().getTime() - this.startTime < 300) {

this.startTime = 0

// 不录音

clearTimeout(this.recordTimer)

} else {

wx.stopRecord({

success: function(res) {

// 微信生成的localId，此时语音还未上传至微信服务器

_this.localId = res.localId

},

fail: function(res) {

console.log(JSON.stringify(res))

}

})

}

},

// 试听

tryListen() {

let _this = this

wx.playVoice({

localId: _this.localId // 需要播放的音频的本地ID，由stopRecord接口获得

})

console.log('试听。。。')

wx.onVoicePlayEnd({ // 监听播放结束

success: function (res) {

console.log('试听监听结束')

_this.isListen = 0

}

});

},

// 试听停止

tryStop() {

let _this = this

wx.pauseVoice({

localId: _this.localId // 需要停止的音频的本地ID，由stopRecord接口获得

})

},

// 处理录音数据

voiceHandle() {

let _this = this

wx.uploadVoice({

localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得

isShowProgressTips: 1, // 默认为1，显示进度提示

success: function (res) {

// 微信语音已上传至 微信服务器并返回一个服务器id

_this.serverId = res.serverId; // 返回音频的服务器端ID

_this.upVoice()

}

})

},

// 自己后台上传接口

upVoice() {

let data = {

id: this.id,

serviceId: this.serverId

}

voiceApi.upVoice(data)

.then(res => {

if(res.data.code == 200) {

// ！！ todo 隐藏loading

this.isSubmit = true

this.$Message.message('提交成功')

this.closeMask()

} else {

this.$Message.message(res.data.message)

}

})

.catch(err => {

console.log(err)

})

},

1. 微信jsdk配置

2. 调取微信录音开始方法  wx.startRecord

3. 调取微信录音结束方法  wx.stopRecord

成功后返回一个本地音频id  localId

⚠️ 如果不调用录音结束方法，待录音1min后自动结束，需要wx.onVoiceRecordEnd 监听录音结束

4. 上传录音至微信服务器  wx.uploadVoice

返回serverId

⚠️ 微信存储时间有限，有效期3天

⚠️ 目前多媒体文件下载接口的频率限制为10000次/天，如需要调高频率，请登录微信公众平台，在开发 - 接口权限的列表中，申请提高临时上限。

5. 调取自己后台上传至自己服务器

这部可以看做，将 serverId 传给自己的服务器，然后自己服务器调微信提供的接口去下载(serverId)至自己服务器存储

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。