java 网页 录音_Java+FlashWavRecorder实现网页录音并上传【新】

article/2025/7/22 6:01:42

【注意】

【说明】

1.在线录音并直接上传到服务器中

【使用】

1.运行

1.请下载本项目,并导入myeclipse中

2.跑起项目,访问http://localhost:8080/recorder-online-upload查看效果

2.定制

1.打开WEB-INF/view/index.html

2.只有两段html注释中的代码是需要的

3.将上面代码中的${base}替换成自己项目的路径

4.将上面代码中form的action替换成自己的上传文件处理action

5.将main.js中一些base路径替换为自己对应的路径

【详细说明】

1.项目结构,详见下图:

3f3d01479b3efc779d9e3a84d3a701a5.png

2.IndexController

作用:

处理上传文件的后台代码,本例使用jfinal上传,如果使用其他框架请自行修改

核心代码:/**

* 在线上传音频示例

* @throws Exception

*/

public void upload() throws Exception{

Iterator iter = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(getRequest()).iterator();

while (iter.hasNext()) {

FileItem item = iter.next();

if(!item.isFormField()){

// 保存文件,简单的保存到本地,可以自行修改

item.write(new File("d://" + item.getName()));

}

}

// 返回值,1是成功

renderJson("{\"saved\": 1}");

}

返回值:

如果上传成功,一定要返回一个saved为1的json,其他可以自定义。

3.index.html

作用:

上传的html页面

核心代码:

显示声波

隐藏声波

麦克风权限

最后的录音事件:ready
录音时长:
上传状态:

注意:

需要将上面的${base}替换为自己的项目路径

需要将form中的action修改为对应的controller路径

4.main.js

作用:

相当于是一个js,一些路径需要修改

需要修改的代码:

a89b4336df72473011d7b9a9fea9d496.png

请将base替换为自己项目地址,或者使用相对路径

【录音上传】

1.部署到tomcat后,访问地址打开页面,如下:

63fcfd293f2f623b6c54a62b34d2904f.png

中间灰色部分是录音上传部分

2.点击录音按钮,允许录音权限,这个时候切记确保录音设备畅通(耳麦或麦克风)

081ae5a2ee2be95f6448fb86fa7b1f3a.png

3.再次点击录音按钮进行录音,此时可以点击显示声波,查看是否有声波改变

5dd094939a1c5cca14e9c6e6326b9570.png

4.录音完毕后,点击停止按钮,并点击上传按钮

93ef4579d5ade587af733b44f738b5bb.png

ok,提示saved就表示成功

5.查看上传音频,本例直接上传到d:

33dde465e1716614f2d39e3372047ca9.png

27981db43bafd77ef1555384155bfc64.png

【一些问题】

1.上传代码

本例使用jfinal上传,如果使用其他框架,那请修改上传代码,

不会写上传代码请百度之,不要再问上传代码怎么写了,这是基础。

2.java示例

本例是java写的,其实也就上传部分不同,如果使用其他语言,

进需要修改html页面中form的action路径和对应的上传代码。

3.切记录音设备开通

如果使用耳麦切记使用耳麦。。不要只用耳机,耳机不具备录音功能,

如果使用笔记本,切记保证可以正常录音。

阅读:15888次


http://chatgpt.dhexx.cn/article/s9GMIelU.shtml

相关文章

java 网页 录音_Java+FlashWavRecorder实现网页录音并上传

【注意】 【前言】 肯定有需求要网页录音,并且要上传。这奇葩需求。 然后找到了FlashWavRecorder, 【原始版本号】 1.下载 在上面的地址下载zip解压之后,目录里面有个index.html。打开之后这效果: 2.录音权限 必须保证你的电脑有麦…

10.WebRTC实现网页录音功能

一、概述 通过WebRTC,实现在页面上进行录音,并将录音结果转换为.wav格式进行播放 二、录音实现 检测是否有麦克风权限 navigator.mediaDevices.enumerateDevices().then(function(devices) {// 检测视频输入let video devices.find((device) > {…

uniapp中使用网页录音并上传声音文件(发语音)——js-audio-recorder的使用【伸手党福利】

uniapp中上传音频只能在app或小程序当中实现,如何使用网页完成语音的录制和上传则成为了困扰前端童鞋的重点。 本文着重解决: js-audio-recorder报 error:浏览器不支持getUserMedia ! 的问题。 js-audio-recorder报 NotFoundError : Requested device no…

前端实现在浏览器网页中录音

一、整体实现的思想 页面中实现录音需要使用浏览器提供的MediaRecorder API,所以要实现页面录音就需要浏览器支持MediaStream Recording相关的功能,即浏览器能够获取浏览器的录音权限。 页面内容,需要一个记录录音开始和结束的按钮,以及一个用…

基于神经网络的自适应最优控制

《 N e u r a l n e t w o r k a p p r o a c h t o c o n t i n u o u s − t i m e d i r e c t a d a p t i v e o p t i m a l c o n t r o l f o r p a r t i a l l y u n k n o w n n o n l i n e a r s y s t e m s 》 D r a g u n a V r a b i e ∗ , F r a n k L e w …

堆排序(排升序为啥建大堆,排降序为啥建小堆)

简介: 之前对堆排序认识的不是很透彻,今天回过头来再把堆排序的知识整理整理!以及排升序为什么要建大堆,排降序要建小堆。 正文: 首先我们要知道:   ①堆的逻辑是一颗完全二叉树;   ②它使…

残差网络Residual Networks-残差网络的创建、训练、测试、调参

残差网络的创建、训练、测试、调参加粗样式 在Keras中实现残差网络模型的创建,并通过模型来实现对图片的分类。 残差网络的预备知识 网络越深越好? 随着网络层级的不断增加,模型精度不断得到提升,而当网络层级增加到一定的数目…

堆排序,为什么升序排列要建大堆,降序排列要建小堆

堆排序中用到了建立大小堆和向下调整的内容,对这些内容有些不了解的同学可以去补一补专门写堆的博客,方便更好的理解堆排序数据结构之堆(Heap),堆的相关操作,用堆模拟优先级队列。 如果把待排序序列分为未排…

操作系统——动态分配算法(首次适应算法,最佳适应算法,最坏适应算法及回收)

操作系统——动态分配 写的时间早了,有些许漏洞和不足,请大家不要介意 分配方式可分为四类:单一连续分配、固定分区分配、动态分区分配以及动态可重定位分区分配算法四种方式,其中动态分区分配算法就是此实验的实验对象。动态分区分配又称为…

pandas中对列进行排序(单列/多列)/(升序/降序)/(多列升序,降序控制)

前言 我想把数据分析刻进DNA里 如下面的数据,对price,要进行最简单的升序操作: 这个好整: import pandas as pdshop pd.read_csv("data/shop.csv", index_colid)shop.sort_values(byprice, inplaceTrue)结果: 如果你想整活(被迫)要把数据进行降序排列: 按照降序,传…

最先适应法、最佳适应法、下次适配法、最差适配法

题: 分析: 1. 首先分析是不是最差适配法,最差适配法意思是首先找到最大的内存空间进行分配, 对于请求的5K存储空间,首先找到地址200K容量为56K的地方进行分配,然后剩余51K。 再对请求的15K进行分配&…

自适应滤波器更新算法-EP1

自适应滤波器更新算法-EP1 自适应滤波器是回声消除系统中非常重要的一个功能模块,而对于自适应滤波器来说,如果更新滤波器系数则是关键所在。本文将介绍几种现有的滤波器更新算法,并附上Matlab测试代码。 1、LMS算法 1.1算法原理 LMS算法即…

自适应神经网络算法原理,单神经元自适应控制

关于神经网络自适应控制求助 这句话你可以直接用,不用加引用。因为这句话是很容易验证的。在网络层数、隐含层节点数逐渐增加,训练次数增加之后,他的拟合能力也是不断增加的,所以说,他可以以任意精度逼近任何非线性连…

【转载】梯度下降算法的参数更新公式

NN这块的公式,前馈网络是矩阵乘法。损失函数的定义也是一定的。 但是如何更新参数看了不少描述,下面的叙述比较易懂的: 1、在吴恩达的CS229的讲义的第四页直接给出参数迭代公式 在UFLDL中反向传导算法一节也是直接给出的公式 2、例子&#x…

Java中Comparator的个人简单理解(升序降序)与使用

目录 Java自定义排序返回值简单记忆理解实践LInkedList升序(默认情况)降序 PriorityQueue升序下的小顶堆(默认情况)降序下的大顶堆 总结补充数组类型自定义排序降序排序 数组 Java自定义排序返回值简单记忆理解 默认情况下&#…

深度残差收缩网络(从信号降噪的角度进行理解)

本文探讨了深度残差收缩网络的另一种理解方式。 传统信号降噪算法的常见步骤是: ① 采用某种信号变换方法(例如小波、经验模态分解),将含噪信号变换到另外一种形态(例如小波系数、本征模态分量等)。在这些…

NIPS 2016 深度学习 迁移学习 ---残差转移网络用于无监督领域自适应

深度学习的成功得益于大量的标注数据,而数据标注是非常消耗资源的。当一个问题中缺少标注数据时,可以从另一个源中所学知识迁移过来,并且用于新问题中。 清华大学的学者提出了一种新的方法(https://arxiv.org/pdf/1602.04433.pdf&…

深度残差网络+自适应参数化ReLU激活函数(调参记录21)Cifar10~95.12%

本文在调参记录20的基础上,将残差模块的个数,从27个增加到60个,继续测试深度残差网络ResNet+自适应参数化ReLU激活函数在Cifar10数据集上的表现。 自适应参数化ReLU函数被放在了残差模块的第二个卷积层之后,这与Squeeze-and-Excitation Networks或者深度残差收缩网络是相似…

已知两个长度分别为m 和 n 的升序链表,合并降序链表,求时间复杂度

王道数据结构上一道题: 之前我看到一个电子版的书,上边答案解析写的有点错误, 听说有些同学买的实体书上,答案解析也是这样写的 这个是刊印错误,很显然2Max( m , n )大于等于 m n 而且这个解析也不够清晰。 解析&a…

波束形成 常见自适应波束形成算法信(干)噪比增益影响因素

0、其他补充 均匀线阵波束形成器的信噪比增益上确界可由下式表示: 其中为阵元数,所以为了方便起见,一般的稳健自适应波束形成算法在仿真过程中的阵元数量均设置为10。 阵列的导向矢量可由下式表示: 以首个阵元为参考阵元&#xff…