1参考资料

websocket参考博客  https://www.cnblogs.com/xdp-gacl/p/5193279.html

2主要的思路

将录音生成的blob对象转成base64,然后通过ajax传到后台，将base64转成文件进行上传将文件地址发回前台。前台在将音频地址发到websocket服务端，websocket服务端再将音频地址发回给客户端，

3项目示例

pom.xml中添加Jar包依赖

2 javax

3 javaee-api

4 7.0

5 provided

6

1前端代码

录音需要的js recorder.js自行百度下载

Java后端WebSocket的Tomcat实现

//兼容环境

function RandomKey(){

return "randomkey"+(RandomKey.idx++);

};

RandomKey.idx=0;

var websocket = null;

//判断当前浏览器是否支持WebSocket

if ('WebSocket' in window) {

websocket = new WebSocket("ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${cp}/websocket");

}

else {

alert('当前浏览器 Not support websocket')

}

//连接发生错误的回调方法

websocket.onerror = function () {

alert("WebSocket连接发生错误");

};

//连接成功建立的回调方法

websocket.onopen = function () {

alert("WebSocket连接成功");

recopen();//打开录音

alert("录音打开成功");

}

//接收到消息的回调方法

websocket.onmessage = function (event) {

setMessageInnerHTML(event.data);

}

//连接关闭的回调方法

websocket.onclose = function () {

alert("WebSocket连接关闭");

}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

window.onbeforeunload = function () {

closeWebSocket();

}

//将消息显示在网页上

function setMessageInnerHTML(message) {

if (message!=null) {

document.getElementById('message').innerHTML +=''+''+'';

}

}

//关闭WebSocket连接

function closeWebSocket() {

websocket.close();

recclose()//关闭录音

}

//发送消息

function send() {

var message = document.getElementById('text').value;

websocket.send(message);

}

var rec;

function recopen(){

var type="mp3";//mp3或wav

var bit=+16;//比特率

var sample=+16000;//采样率

rec=Recorder({

type:type

,bitRate:bit

,sampleRate:sample

});

rec.open()

};//打开录音设备

function recclose(){

if(rec){

rec.close();

}

};//关闭录音设备

function recstart(){

if(rec){

rec.start();//开始录音

};

$("#VoiceMessage").val("松开 结束");

};//开始录音

var recblob={};

function recstop(call){

if(rec){

rec.stop(function(blob,time){

var id=RandomKey(16);

recblob[id]={blob:blob,set:$.extend({},rec.set),time:time};//生成的录音对象

recdown64(id);

},function(s){});

};

$("#VoiceMessage").val("按住 说话");

};

//录音结束,生成base64

function recdown64(key){

var o=recblob[key];

var reader = new FileReader();

reader.readAsDataURL(o.blob);

reader.onloadend = function() {

var Object={};

Object.messageBase64=reader.result;

Object.from_id=1;

Object.to_id=2;

$.ajax({

async : false, //设置同步

type : 'POST',

url : '${cp}/uploadmp3.do',

data :Object,

dataType : 'json',

success : function(resoult) {

websocket.send(resoult.resoult);

},

error : function(resoult) {

alert("4444444444444");

}

});

};

};

2websocket代码

这里用的直接是狼哥的代码，刚兴趣的可以去看一下上文的链接

@ServerEndpoint("/websocket")

public class WebSocketTestOne {

//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

private static int onlineCount = 0;

//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识

private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();

//与某个客户端的连接会话，需要通过它来给客户端发送数据

private Session session;

/**

* 连接建立成功调用的方法

* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据

*/

@OnOpen

public void onOpen(Session session){

this.session = session;

webSocketSet.add(this); //加入set中

addOnlineCount(); //在线数加1

System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());

}

/**

* 连接关闭调用的方法

*/

@OnClose

public void onClose(){

webSocketSet.remove(this); //从set中删除

subOnlineCount(); //在线数减1

System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());

}

/**

* 收到客户端消息后调用的方法

* @param message 客户端发送过来的消息

* @param session 可选的参数

*/

@OnMessage

public void onMessage(String message, Session session) {

System.out.println("来自客户端的消息:" + message);

//群发消息

for(WebSocketTestOne item: webSocketSet){

try {

item.sendMessage(message);

} catch (IOException e) {

e.printStackTrace();

continue;

}

}

}

/**

* 发生错误时调用

* @param session

* @param error

*/

@OnError

public void onError(Session session, Throwable error){

System.out.println("发生错误");

error.printStackTrace();

}

/**

* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。

* @param message

* @throws IOException

*/

public void sendMessage(String message) throws IOException{

this.session.getAsyncRemote().sendText(message);

}

public static synchronized int getOnlineCount() {

return onlineCount;

}

public static synchronized void addOnlineCount() {

WebSocketTestOne.onlineCount++;

}

public static synchronized void subOnlineCount() {

WebSocketTestOne.onlineCount--;

}

}

3后台代码

@RequestMapping("/uploadmp3")

@ResponseBody

public Map UpLoadMp3(String messageBase64,int from_id,int to_id, HttpSession session){

String destPath=session.getServletContext().getRealPath("TapeTest/mp3");

String base64 = messageBase64.replace("data:audio/mp3;base64,","");

Date date = new Date();

SimpleDateFormat dateFormat= new SimpleDateFormat("yyyy_MM_dd_hh_mm_ss");

SimpleDateFormat dateFormat2= new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");

String date2=dateFormat2.format(date);//

String date1=dateFormat.format(date);//date转string,没空格

String fileName="aaa"+from_id+date1+to_id+"tape.mp3";

Base64Utils.base64ToFile(destPath,base64,fileName);

Map resoult = new HashMap();

String Path="TapeTest/mp3/"+fileName;

String content="##data:audio/mp3;base64,*&password:32425$#*&";//作为识别，是否是语音文件

messageService.addMessageTape(from_id,to_id,Path,date2,content);

resoult.put("resoult",Path);

return resoult;

}

3运行效果