首先忽略引入jssdk部分，直接进入正题
1.配置
wx.config({
debug: false,
appId: wechatConfig.appId,
timestamp: wechatConfig.timestamp,
nonceStr: wechatConfig.nonceStr,
signature: wechatConfig.signature,
jsApiList: [
"checkJsApi",
"startRecord", //开始录音接口
"stopRecord", // 停止录音接口
"uploadVoice", //上传语音接口
"onVoiceRecordEnd" // 超过一分钟自动停止api
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.checkJsApi({
jsApiList: [
"startRecord",
"stopRecord",
"uploadVoice",
"onVoiceRecordEnd"
],
fail: res => {
this.$toast.fail("您的微信版本太低，请使用最新的微信客户端");
}
});
wx.ready(function() {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
这里用到的微信接口有：
startRecord：开始录音
stopRecord：停止录音
uploadVoice：上传音频
onVoiceRecordEnd：超过一分钟自动停止
2.方法
因为是移动端，所以需要给input 框注册touchstart和touchend事件
<input class="long-input" id="recrd_btn_mobile" readonly type="text" placeholder="按住说话" v-if="voice_status" @touchstart="touchstart"
@touchend="touchend" @touchmove="handleTouchMove($event)" />
touchstart(event) {
event.preventDefault();
this.startPoint = event.touches[0];
this.recordText = "正在录音，上划取消发送";
this.audition = true;
this.start = new Date().getTime();
this.recordTimer = setTimeout(() => {
wx.startRecord({
success: () => {
// 录音不能超过一分钟 超过一分钟自动停止 并触发该事件
wx.onVoiceRecordEnd({
// 录音时间超过一分钟没有停止的时候会执行 complete 回调
complete: res => {
// // 给出提示
// layer.msg('最多只能录制一分钟', {icon:2, time:1000});
// 记录录音的临时ID
this.localId = res.localId;
this.uploadVoice();
}
});
},
cancel: () => {
alert("用户拒绝授权录音");
}
});
}, 300);
},
touchend(event) {
event.preventDefault();
this.audition = false;
this.end = new Date().getTime();
if (this.end - this.start < 1000) {
this.end = 0;
this.start = 0;
//小于300ms，不录音
clearTimeout(this.recordTimer);
setTimeout(() => {
wx.stopRecord({
success: res => {
this.localId = res.localId;
},
fail: res => {
// alert(JSON.stringify(res));
}
});
}, 800);
} else {
wx.stopRecord({
success: res => {
this.localId = res.localId;
console.log(res.localId);
this.uploadVoice();
},
fail: res => {
// alert(JSON.stringify(res));
}
});
}
},
为了增加用户体验以及模仿微信聊天，增加了上划取消发送，并停止录音功能
handleTouchMove(event) {
//touchmove时触发
var moveLenght =
event.touches[event.touches.length - 1].clientY -
this.startPoint.clientY; //移动距离
// Math.abs(moveLenght)
if (moveLenght < -50) {
this.recordText = "松开手指,取消发送";
wx.stopRecord({
success: res => {
return;
},
fail: res => {
return;
}
});
} else {
this.recordText = "正在录音，上划取消发送";
}
},
主要是获取移动距离，然后取消录音并return
录音完毕后需要把本地录音先上传到微信的服务器，不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
uploadVoice() {
wx.uploadVoice({
localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: res => {
//把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
var serverId = res.serverId;
// console.log(serverId);
//调用后台接口，储存音频
CommonApi.uploadWxMediaFile(serverId, "amr").then(res => {
console.log(res);
this.msgContent = res.result.fileName;
this.duration = res.result.duration;
});
}
});
}
如果有帮到您，麻烦点个赞哦~
