先贴上人家造的轮子:https://github.com/Zousdie/recorderx
感谢大神
因为版本更新了
所以有必要写一下
看了下其他的发现是老版本
有些方法用不了
不多说开始:
安装
npm install recorderx -S
引入
import Recorderx, { ENCODE_TYPE } from 'recorderx';
使用
//html
<mt-popup v-model="popupVisible2" position="bottom" class="popup2">
<p>按住录制音频</p>
<img src="@/assets/img/luyin.png" alt="" @touchstart="translationStart" @touchend="translationEnd">
<span @click="popupShow2">×</span>
</mt-popup>
//methods
//我们后台是根据file的name来判断格式的,这个真的坑...(找了半天原因) 组件返回的wav,没有name,自己在append里加
//录音开始
translationStart(){
let that = this
that.rc = new Recorderx()
that.$nextTick(()=>{
that.rc.start()
.then(() => {
console.log("start recording");
}).catch(error => {
console.log("Recording failed.", error);
});
})
},
//录音结束
translationEnd(){
this.rc.pause()
var wav = this.rc.getRecord({
encodeTo: ENCODE_TYPE.WAV,
});
this.uplode(wav)
},
//生成随机数
getMath() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
},
//上传音频
uplode(wav){
var formData = new window.FormData()
var name = this.getMath()+this.getMath()+this.getMath()+'.wav'
formData.append('file',wav,name)// 'file' 这个名字要和后台获取文件的名字一样;
formData.append('user_key', this.returnUserKey())
console.log(wav)
console.log(formData)
var options = { // 设置axios的参数
url: this.returnAPI()+'Api/V1/Index/uploadFile',
data: formData,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$axios(options).then((res) => {
if(res.data.status == '1'){
this.$Toast({
message: res.data.msg,
duration: 2000
})
}else {
this.$Toast({
message: res.data.msg,
duration: 2000
})
}
})
}
其他api
//清除
clear()