首先忽略引入jssdk部分岸夯，直接進(jìn)入正題
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信息驗(yàn)證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后逛漫，config是一個客戶端的異步操作垛膝，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行梗脾。對于用戶觸發(fā)時才調(diào)用的接口荸型，則可以直接調(diào)用，不需要放在ready函數(shù)中炸茧。
});
這里用到的微信接口有：
startRecord：開始錄音
stopRecord：停止錄音
uploadVoice：上傳音頻
onVoiceRecordEnd：超過一分鐘自動停止
2.方法
因?yàn)槭且苿佣巳鸶荆孕枰oinput 框注冊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 = "正在錄音，上劃取消發(fā)送";
this.audition = true;
this.start = new Date().getTime();
this.recordTimer = setTimeout(() => {
wx.startRecord({
success: () => {
// 錄音不能超過一分鐘 超過一分鐘自動停止 并觸發(fā)該事件
wx.onVoiceRecordEnd({
// 錄音時間超過一分鐘沒有停止的時候會執(zhí)行 complete 回調(diào)
complete: res => {
// // 給出提示
// layer.msg('最多只能錄制一分鐘', {icon:2, time:1000});
// 記錄錄音的臨時ID
this.localId = res.localId;
this.uploadVoice();
}
});
},
cancel: () => {
alert("用戶拒絕授權(quán)錄音");
}
});
}, 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));
}
});
}
},
為了增加用戶體驗(yàn)以及模仿微信聊天辕狰，增加了上劃取消發(fā)送，并停止錄音功能
handleTouchMove(event) {
//touchmove時觸發(fā)
var moveLenght =
event.touches[event.touches.length - 1].clientY -
this.startPoint.clientY; //移動距離
// Math.abs(moveLenght)
if (moveLenght < -50) {
this.recordText = "松開手指,取消發(fā)送";
wx.stopRecord({
success: res => {
return;
},
fail: res => {
return;
}
});
} else {
this.recordText = "正在錄音控漠，上劃取消發(fā)送";
}
},
主要是獲取移動距離蔓倍，然后取消錄音并return
錄音完畢后需要把本地錄音先上傳到微信的服務(wù)器，不過盐捷，微信只保留3天偶翅，而我們需要長期保存，我們需要把資源從微信服務(wù)器下載到自己的服務(wù)器
uploadVoice() {
wx.uploadVoice({
localId: this.localId, // 需要上傳的音頻的本地ID碉渡，由stopRecord接口獲得
isShowProgressTips: 1, // 默認(rèn)為1聚谁，顯示進(jìn)度提示
success: res => {
//把錄音在微信服務(wù)器上的id（res.serverId）發(fā)送到自己的服務(wù)器供下載。
var serverId = res.serverId;
// console.log(serverId);
//調(diào)用后臺接口滞诺，儲存音頻
CommonApi.uploadWxMediaFile(serverId, "amr").then(res => {
console.log(res);
this.msgContent = res.result.fileName;
this.duration = res.result.duration;
});
}
});
}
如果有幫到您形导，麻煩點(diǎn)個贊哦~
