相思资源网 Design By www.200059.com
波形图：https://www.jb51.net/article/188545.htm
废话：想不到我的第一篇博客是关于前端，作为一名后端的小菜，前端方面肯定还有很多不足之处，如果文章有任何问题欢迎指正。感谢大家。好了！废话不多说下面讲一下需求。
需求：公司要求实现web端的录音并通过websocket实时上传至java后台，而且能通过vlc实时播放，简单一点讲就是我用网页在那一边讲话，一个大喇叭就能实时把我的话播出去，这样是不是通俗易懂呀，而且呢公司要求用mp3格式。当然啦！为了知道自己在讲话需要一个波形图，这里主要实现前半部分功能，后半部分臣妾也做不到呀！后半部分的vlc播放呢如果大家想知道，可以留言，届时可以给大家指条明路
前端实现：
引入：
<script type="text/javascript" src="/UploadFiles/2021-04-02/recordmp3.js">这个跟大佬的js有点不一样，我在里面加了一点东西，而且在这个js里面引入了两个另外的js，lame.min.js和worker-realtime.js，这俩在大佬的代码里有
页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>测试</title> </head> <body> <button id="intercomBegin">开始对讲</button> <button id="intercomEnd">关闭对讲</button> <canvas id="casvased" style="width: 400px;height: 100px"></canvas> </body> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-3.3.1.js">后端websocket：
这里实现的是保存为mp3文件package com.jetosend.common.socket; import com.jetosend.common.utils.Utils; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.*; import java.nio.ByteBuffer; import java.util.Hashtable; import java.util.Map; @ServerEndpoint("/send/{key}") @Component public class ServerSocket { private static final Map<String, Session> connections = new Hashtable<>(); ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); /*** * @Description:打开连接 * @Param: [id, 保存对方平台的资源编码 * session] * @Return: void * @Author: Liting * @Date: 2019-10-10 09:22 */ @OnOpen public void onOpen(@PathParam("key") String id, Session session) { System.out.println(id + "连上了"); connections.put(id, session); } /** * 接收消息 */ @OnMessage public void onMessage(@PathParam("key") String id, InputStream inputStream) { System.out.println("来自" + id); try { int rc = 0; byte[] buff = new byte[100]; while ((rc = inputStream.read(buff, 0, 100)) > 0) { byteArrayOutputStream.write(buff, 0, rc); } } catch (Exception e) { e.printStackTrace(); } } /** * 异常处理 * * @param throwable */ @OnError public void onError(Throwable throwable) { throwable.printStackTrace(); //TODO 日志打印异常 } /** * 关闭连接 */ @OnClose public void onClose(@PathParam("key") String id) { System.out.println(id + "断开"); BufferedOutputStream bos = null; FileOutputStream fos = null; File file = null; try { file = new File("D:\\testtest.mp3"); //输出流 fos = new FileOutputStream(file); //缓冲流 bos = new BufferedOutputStream(fos); //将字节数组写出 bos.write(byteArrayOutputStream.toByteArray()); } catch (Exception e) { e.printStackTrace(); } finally { if (bos != null) { try { bos.close(); } catch (IOException e) { e.printStackTrace(); } } if (fos != null) { try { fos.close(); } catch (IOException e) { e.printStackTrace(); } } } connections.remove(id); }实现效果：
总结
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无js实现mp3录音通过websocket实时传送+简易波形图效果的评论...