vue使用js-audio-recorder实现一句话识别功能

<template> <div class="recordPlagin"> <!-- 录音提示 --> <div class="mask" v-if="yingPingDisPlay"> <img src="../assets/help/yuYin/yingPingBo.gif" /> <span>正在听，松开进行搜索!</span> </div> <!-- 按钮 --> <!-- <div @touchstart="gtouchstart()" @touchend="gtouchend()" style="background-image: linear-gradient(#FE4C6B, #FE4C6B); font-weight: bold; border-radius: 20px; display: flex;align-items: center;color: #fff; center;padding: 5px 2%;width: 30%;margin: 10px 33%;justify-content: space-evenly;"> <img style="width: 20px;height: 20px;" src="../assets/help/lu_yin.png" /> <div>{{viodeText}}</div> </div> --> <div class="buttonImg" @touchstart="gtouchstart()" @touchend="gtouchend()" :style="{backgroundImage:'url('+buttonImg+')'}"> </div> </div> </template> <script> import Recorder from 'js-audio-recorder' var recorder = new Recorder({ sampleBits: 16, // 采样位数，支持 8 或 16，默认是16 sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000 numChannels: 1, // 声道，支持 1 或 2， 默认是1 // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false }) // 绑定事件-打印的是当前录音数据 recorder.onprogress = function(params) { // alert('--------------START---------------') // alert('录音时长(秒)', params.duration); // alert('录音大小(字节)', params.fileSize); // alert('录音音量百分比(%)', params.vol); // alert('当前录音的总数据([DataView, DataView...])', params.data); // alert('--------------END---------------') } export default { data() { return { viodeText: '长按说话', search: '', yingPingDisPlay:false, buttonImg:require('../assets/help/yuyin_sh.png'), }; }, mounted() { //获取录音权限 Recorder.getPermission().then(() => { // this.$vux.toast.text('获取权限成功', 'top'); }, (error) => { alert(`${error.name} : ${error.message}`); }); }, methods: { gtouchstart() { // this.viodeText = '松开搜索' this.buttonImg = require('../assets/help/yuyin_ss.png'); this.startRecorder(); this.yingPingDisPlay = true; }, gtouchend(event) { this.yingPingDisPlay = false; // this.viodeText = '长按说话' this.buttonImg = require('../assets/help/yuyin_sh.png'); this.stopRecorder(); this.getRecorder(); }, //开始录音 startRecorder() { recorder.start().then(() => { }, (error) => { // 出错了 alert(`${error.name} : ${error.message}`); }); }, // 结束录音 stopRecorder() { recorder.stop() }, //获取onload里面的录音信息 getRecordInfo(e) { var that = this; let wavValue = e.split("base64,")[1]; var data = { ProjectId: 0, //腾讯云项目 ID SubServiceType: 2, //一句话识别 SourceType: 1, //语音数据 EngSerViceType: "16k_zh", VoiceFormat: "wav", //识别音频的音频格式。 Data: wavValue, UsrAudioKey: "snimay", FilterDirty:1,//是否过滤脏词 FilterPunc:2,//是否过滤标点符号 FilterModal:2//是否过语气词 }; console.log(data) that.$vux.loading.show({text: '语音识别中！'}); that.$axios .post( "/common.do", that.$qs.stringify({ method: this.$method.METHOD_API_CATEGORYMODULE, data: JSON.stringify(data), }) ) .then((res) => { setTimeout(() => { that.$vux.loading.hide(); }, 10); if (res.data.data.Result == '' || res.data.data.Result == undefined) { that.$vux.toast.text('抱歉，没有听清楚！', 'middle'); } else { const { Result } = res.data.data; that.$emit('abc', Result); // alert(this.key_word) // this.getProblemusercollect(); } }); }, //获取录音wav getRecorder() { let toltime = recorder.duration; //录音总时长 let fileSize = recorder.fileSize; //录音总大小 // alert(`时间:${toltime},大小:${toltime}`) // let PCMBlob = recorder.getPCMBlob(); //获取 PCM 数据 var wav = recorder.getWAVBlob(); //获取 WAV 数据 var reader = new FileReader(); reader.readAsDataURL(wav); this.search = ''; reader.onload = () => { this.search = reader.result; //调用其他方法 this.getRecordInfo(this.search, '', ) } } } }; </script> <style scoped lang="less"> .recordPlagin{ position: fixed; bottom: 50px; width: 100%; .mask{ background: #fff; margin-bottom: 35px; img{ width: 100%; } span{ display: flex; justify-content: center; opacity: 0.5; } } .buttonImg{ width: 135px; height: 37.44px; background-size: 100% 100%; margin: auto; } } </style>