网上查了半天，全是复制粘贴的博客，实在忍不住，自己开章！
教程vue移动端语音输入！
1、首先你得有https协议的网站域名
因为语音输入需要已经安全验证的网站，才可以获取手机的语音权限！
如果你拥有，就把项目放在这个https域名下。
2、安装vue录音插件
cnpm i js-audio-recorder --s
输入上面命令进行安装插件，安装完成后，在你需要使用录音的页面引入：
3、代码部分：
import Recorder from "js-audio-recorder";
const lamejs = require("lamejs");
const recorder = new Recorder({
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
numChannels: 1, // 声道，支持 1 或 2， 默认是1
// compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
});
methods:{}里录音函数，根据你的需要进行事件点击监听：
// 录音
startMp3() {
this.showSound = true;
recorder.start().then(
(res) => {},
(error) => {
// 出错了
console.log(`${error.name} : ${error.message}`);
}
);
},
// 结束录音
stopRecorder() {
this.showSound = false;
recorder.stop();
recorder.destroy().then(function () {});
},
// 录音播放
playRecorder() {
// recorder.play();
let wav = recorder.getWAVBlob(); //获取 WAV 数据
this.showSound = false;
const mp3Blob = this.convertToMp3(recorder.getWAV());
console.log("录音", mp3Blob);
this.uploadVoice(mp3Blob);
},
//转wav为MP3格式
convertToMp3(wavDataView) {
// 获取wav头信息
const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置
const { channels, sampleRate } = wav;
const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
// 获取左右通道数据
const result = recorder.getChannelData();
const buffer = [];
const leftData =
result.left &&
new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
const rightData =
result.right &&
new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
const remaining = leftData.length + (rightData ? rightData.length : 0);
const maxSamples = 1152;
for (let i = 0; i < remaining; i += maxSamples) {
const left = leftData.subarray(i, i + maxSamples);
let right = null;
let mp3buf = null;
if (channels === 2) {
right = rightData.subarray(i, i + maxSamples);
mp3buf = mp3enc.encodeBuffer(left, right);
} else {
mp3buf = mp3enc.encodeBuffer(left);
}
if (mp3buf.length > 0) {
buffer.push(mp3buf);
}
}
const enc = mp3enc.flush();
if (enc.length > 0) {
buffer.push(enc);
}
return new Blob(buffer, { type: "audio/mp3" });
},
4、语音上传到服务器：
//上传音频
uploadVoice(params) {
let that = this;
let url = api.apiUrl.uploadFile + "?token=" + localStorage.token;
var param = new FormData();
param.append("file", params);
upload(this.ROOT + url, param).then((res) => {
console.log("上传", res.data.data);
if (res.data.code == "0") {
let data = {
voice: res.data.data,
userId: that.$route.query.userId,
anchorId: localStorage.anchorId,
};
ajaxReq("POST", that.ROOT + api.apiUrl.sengMsg, data).then((res) => {
if (res.code == "0") {
that.records.push(res.data);
that.content = "";
that.scrollToBottom();
that.showMoreOpratin = false;
} else {
that.$toast(res.msg);
}
});
} else {
that.$toast(res.msg);
}
});
},
重点是这个，方便后台以表单的形式接收文件数据：
提示：如果你是复制粘贴的，很多函数都没有的哦，没有的可以删掉，核心是录音教程，比如你得自己封装upload()上传文件的函数哦！
