文章目录
前言一、js-audio-plugin简介二、安装1. npm 方式（推荐使用）2. script 标签方式
二、后端代码示例（服务端）1. 配置WebScoket2. 代码
三、前端代码示例1. WebSocket代码2. 录音代码
前言
最近有个新需求，做一个语音识别的功能，将音频文件转为文字，识别完成后把文字返回到页面展示，最后使用js-audio-plugin + WebSocket实现
一、js-audio-plugin简介
纯js实现浏览器端录音。 详细可参考API：https://recorder-api.zhuyuntao.cn/Recorder/
二、安装
1. npm 方式（推荐使用）
//安装
npm i js-audio-recorder
//引入
import Recorder from 'js-audio-recorder';
//使用
let recorder = new Recorder();
2. script 标签方式
//使用
let recorder = new Recorder();
二、后端代码示例（服务端）
1. 配置WebScoket
pom文件
@Component
public class WebSocketConfig {
/**
* 使用内部容器，需要配置一个Bean
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
2. 代码
该注解是将类定义为一个WebSocket服务端，注解值{serverId}用于监听用户连接的URL标识，每个客户端标识不一致，客户端可以通过这个地址访问服务端
@ServerEndpoint("/websocket/{serverId}")
需要用到的字段
//与客户端通信
private Session session;
//客户端标识
private String serverId;
//所有连接服务的客户端，线程安全 CommunicationWebsocket是你自己的服务类
private static ConcurrentHashMap
@OnOpen
public void OnOpen(@PathParam(value = "serverId") String serverId, Session session){
this.session = session;
this.serverId = serverId;
//存放所有的客户端连接，serverId唯一标识
webSocketSet.put(serverId,this);
System.out.println("客户端连接成功，websocket当前连接数为："+webSocketSet.size());
}
@OnMessage(maxMessageSize = 10000000)
public void OnMessage(ByteBuffer message){
//message是接收到客户端发来的消息
System.out.println("音频数据报文:："+message);
// 为空时 不处理
if (ObjectUtil.isEmpty(message)) {
return;
}
// 临时存储 如果不想存储可以自行修改
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
byte[] bytes = message.array();
try {
byteArrayOutputStream.write(bytes);
} catch (IOException e) {
try {
byteArrayOutputStream.close();
} catch (IOException ex) {
ex.printStackTrace();
}
e.printStackTrace();
}
Random random = new Random();
String fileUrl = filePath+random+".txt";
ByteArrayInputStream bais = new ByteArrayInputStream(byteArrayOutputStream.toByteArray());
File file = new File(fileUrl);
FileOutputStream fos = null;
try {
fos = new FileOutputStream(file);
byte[] buffer = new byte[1024];
int len;
while ((len = bais.read(buffer)) != -1) {
fos.write(buffer, 0, len);
}
fos.close();
bais.close();
} catch (FileNotFoundException e) {
throw new RuntimeException(e);
} catch (IOException e) {
throw new RuntimeException(e);
}
//看个人的业务，将音频文件file传过去
}
@OnClose
public void OnClose(){
webSocketSet.remove(this.serverId);
System.out.println("客户端退出成功，websocket当前连接数为："+webSocketSet.size());
}
三、前端代码示例
data() {
return {
ws: null, //定义websocket对象
recorder: null, //多媒体对象，用来处理音频
}
}
1. WebSocket代码
//建立websocket服务
initWebSocket() {
//初始化websocket userId为会话标识
const wsuri = 'ws://127.0.0.1:8080/websocket/'+this.userId;
//连接服务端
this.ws = new WebSocket(wsuri);
//指定事件回调
this.ws.onmessage = this.websocketOnMessage;
this.ws.onopen = this.websocketOnOpen;
this.ws.onerror = this.websocketOnError;
this.ws.onclose = this.websocketClose;
},
//连接建立之后的回调
websocketOnOpen() {
this.ws.send("握手成功");
console.log("--------连接已建立!---------")
},
//数据接收
websocketOnMessage(e) {
console.log("收到了服务端语音识别后的数据"+e)
},
//数据发送
websocketSend(Data) {
//将音频数据发送到后端
this.ws.send(Data);
},
//连接建立失败重连
websocketOnError() {
this.initWebSocket();
},
//关闭
websocketClose(e) {
console.log('断开连接', e);
},
2. 录音代码
//开始对讲 可以在进入页面时候调用该方法(看个人需求)
intercomBegin() {
//启动浏览器麦克风，开始录制
this.handleStart();
},
//启动录音
handleStart() {
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: true//(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
});
// 获取录音权限
Recorder.getPermission().then(
() => {
console.log("开始录音");
this.startTall=true
this.recorder.start(); // 开始录音
},
(error) => {
this.$message({
message: "请允许该网页使用麦克风",
type: "info",
});
console.log(`${error.name} : ${error.message}`);
}
);
},
//结束对讲
intercomEnd() {
let th = this;
try {
//获取录音数据
const blob = this.recorder.getWAVBlob();
//blob转为arrayBuffer
let reader = new FileReader()
reader.readAsArrayBuffer(blob)
reader.onload = function() {
console.log(this.result)
//调用webSocket发送服务端
th.websocketSend(this.result)
}
//停止录音
this.startTall=false
this.recorder.stop();
} catch (e) {
console.log(e)
}
}
如果想做成实时语音转文字，需要前端录音实时发送音频数据，需要设置compiling=true，注意的是compiling在0.x版本中生效！！！
参考文章
您阅读本篇文章共花了：
发表评论