DDR爱好者之家

js实现mp3录音通过websocket实时传送+简易波形图效果
站长资源 2024/12/26 佚名
51 1538
DDR爱好者之家 Design By 杰米

波形图：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);
 }





实现效果：


js实现mp3录音通过websocket实时传送+简易波形图效果 


总结
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米