从获取浏览器录音开始,就是通过websocket实时发送音频流给后端。在这里插入代码片
handleStart() {
const uuid = require("uuid");
this.sessionId = uuid.v4();
console.log(this.sessionId);
this.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
});
this.recorder.onprocess = (params) => {
console.log(params)
const formData = new FormData();
const blob = this.recorder.getWAVBlob(); // 获取wav格式音频数据
console.log(blob);
// 此处获取到blob对象后需要设置fileName满足当前项目上传需求,可直接传把blob作为file塞入formData
const newbolb = new Blob([blob], { type: "audio/wav" });
const fileOfBlob = new File([newbolb], new Date().getTime() + ".wav");
console.log(fileOfBlob);
formData.append("file", blob);
console.log(formData);
this.websocketSend(formData)
}
console.log(this.recorder)
Recorder.getPermission().then(
() => {
console.log("开始录音");
this.recorder.start(); // 开始录音
const formData = new FormData();
const blob = this.recorder.getWAVBlob(); // 获取wav格式音频数据
console.log(blob);
},
(error) => {
this.$message({
message: "请先允许该网页使用麦克风",
type: "info",
});
console.log(`${error.name} : ${error.message}`);
}
);
},
initWebSocket(){ //初始化weosocket
const wsuri = this.config.ws_server;
//连接服务端
this.websock = new WebSocket(wsuri);
//指定事件回调
this.websock.onmessage = this.websocketOnMessage;
this.websock.onopen = this.websocketOnOpen;
this.websock.onerror = this.websocketOnError;
this.websock.onclose = this.websocketClose;
},
websocketOnOpen(){ //连接建立之后执行send方法发送数据
let actions = {'type': 100, 'msg': 'requestPermission'}
this.websocketSend(JSON.stringify(actions));
//连接后,定时发送,否则不段时间不通信会自动断连(时间长短一般是服务端指定的)
var that = this;
setInterval(function () {
that.websocketSend(JSON.stringify({'type': 0, 'msg': 'ping'}));
}, 15000);
},
websocketOnError(){//连接建立失败重连
this.initWebSocket();
},
websocketOnMessage(e){ //数据接收
const redata = JSON.parse(e.data);
// eslint-disable-next-line
console.log(redata);
// eslint-disable-next-line
},
websocketSend(Data){//数据发送
this.websock.send(Data);
},
// eslint-disable-next-line
websocketClose(e){ //关闭
// eslint-disable-next-line
console.log('断开连接',e);
},
点击开始录音把formData传到后端,初始化websocket,链接服务器,指定事件回调,调用websocketSend发送数据的方法。