【jquery】jquery使用Recorder.js实现录音并上传,调用阿里云接口语音转文字

阿里一句话识别语音数据时长不能超过60s。参考文档
实现功能:
1.点击拾音按钮开始录音,点击结束按钮结束录音并调取后台语音转文字接口
2.录音时长超过60s自动结束录音并调取后台语音转文字接口

<!-- 引用recorder插件 -->
<script type="text/javascript" src="recorder.mp3.min.js"></script><button id="rec-start-btn" onclick="recStart()" >开始录音</button>
<button id="stop-recorder"  onclick="recStop()">结束录音</button>
<textarea name=like cols="30" rows="10"  id="ai-input" placeholder="语音转文字结果"></textarea>
    <script type="text/javascript">var timer = 0;//录音计时器var rec=Recorder({ type:"mp3",sampleRate:16000,bitRate:16});//开启录音rec.open(function(){//success},function(msg){alert("开启录音失败:"+msg)console.log("开启录音失败:"+msg);})/**开始录音**/function recStart(){rec.start();$("#timer").text("0s");startTimer();};/**结束录音**/function recStop(){stopTimer();rec.stop(function(blob,duration){var localUrl=(window.URL||webkitURL).createObjectURL(blob);console.log(blob,localUrl,"时长:"+duration+"ms");var form = new FormData();form.append("voice_file", blob, "<voice_file>");//结束录音成功,得到blob文件,使用FormData用multipart/form-data表单上传文件var settings = {"url": "这里是后台接口","method": "POST","timeout": 0,"processData": false,"mimeType": "multipart/form-data","contentType": false,"data": form};$.ajax(settings).done(function (response) {var res = JSON.parse(response)if(res.code == 200){let text = "";//阿里智能语音识别的文字结果;let textArr = res.result.Result.Sentences;textArr.forEach(item => {text+=item.Text});$("#ai-input").val(text);}else{console.log(res.result)}});},function(msg){console.log("录音失败:"+msg);//可以通过stop方法的第3个参数来自动调用closerec.close();// rec=null;});};//计时器var interval = null;function startTimer(){// 初始化时间变量var seconds = 0;// 设置计时器间隔为1秒interval = setInterval(function() {// 每秒增加seconds++;              // 更新计时器显示元素的内容$("#timer").text(seconds+"s");if(seconds > 59){//超过60s,结束录音。stopTimer();recStop();}}, 1000); // 1000毫秒等于1秒}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录-海思开发板的 嵌入式nginx和 php的移植(交叉编译环境配置)

嵌入式 lnmp搭建的记录 N&#xff1a;NginxP&#xff1a;php编译PHP可能遇到的问题configure阶段&#xff1a;Makefile-make阶段&#xff1a;Makefile-make install阶段&#xff1a; 文章比较水&#xff0c;并没有没解决什么实际问题&#xff0c;有点不好意思发布。但好像又记录…

Python 数据结构和算法实用指南(三)

原文&#xff1a;zh.annas-archive.org/md5/66ae3d5970b9b38c5ad770b42fec806d 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第七章&#xff1a;哈希和符号表 我们之前已经看过数组和列表&#xff0c;其中项目按顺序存储并通过索引号访问。索引号对计算机来说很有效…

安装 k8s集群的问题:默认容器运行时从 Docker 改为 Containerd

安装 k8s集群的问题&#xff1a;默认容器运行时从 Docker 改为 Containerd 1、背景2、容器运行时从 Docker 改为 Containerd2.1、安装 Containerd&#xff1a;2.2、生成 Containerd 的配置文件2.3 、创建 /etc/crictl.yaml 文件2.4 、配置 Containerd 服务开机自启 &#x1f49…

[c++][netcdf]通过c\c++读取字段的scale_factor与add_offset

函数&#xff1a;c void readScaleAndOffset(const char* FileName,const char* VarName) {NcFile dataFile(FileName, NcFile::read);NcVar Varf dataFile.getVar(VarName);//查看维度cout << "XSizef" << Varf.getDim(0).getSize() << endl;co…

安全认证Kerberos详解

文章目录 一、Kerberos入门与使用1、Kerberos概述1.1 什么是Kerberos1.2 Kerberos术语1.3 Kerberos认证原理 2、Kerberos安装2.1 安装Kerberos相关服务2.2 修改配置文件2.3 其他配置与启动 3、Kerberos使用概述3.1 Kerberos数据库操作3.2 Kerberos认证操作 二、Hadoop Kerberos…

海外仓管理系统的“实用性”讨论:没办法自由设置信息的,都是伪功能

和很多经营海外仓的企业都聊过这样一个问题&#xff1a;对于海外仓的管理系统&#xff0c;到底什么样的设计&#xff0c;什么样的功能才是真的有价值的。 那这就不得不说到一个概念&#xff1a;自由性。什么意思呢&#xff0c;海外仓看似都一样&#xff0c;大家都在经营仓储、…

亚信安慧AntDB:数据驱动的决策力量

亚信安慧AntDB数据库在运营商自主可控替换项目中的成功应用&#xff0c;具有极其重要的意义。该数据库的落地&#xff0c;不仅为这一项目注入了强大的支持力量&#xff0c;还在更大程度上提升了整体的运营效能。作为一种高效可靠的数据库解决方案&#xff0c;AntDB引入了先进的…

ppt里的音乐哪里来的?

心血来潮&#xff0c;想照着大神的模板套一个类似于快闪的ppt。 ppt里是有一段音乐的&#xff0c;那段音乐就是从幻灯片第二页开始响起的。 但是我就找不到音乐在哪。 甚至我把ppt里的所有素材都删除了&#xff0c;再看动画窗格&#xff0c;仍然是空无一物&#xff0c;显然&…

研究表明,全球互联网流量竟有一半来自机器人

据Cyber News消息&#xff0c;Thales Imperva Bad Bot近期做了一份报告&#xff0c;显示在2023年有49.6%的互联网流量竟来自机器人&#xff0c;比上一年增长 2%&#xff0c;达到自2013年以来观察到的最高水平。 报告称&#xff0c;这一趋势正对企业组织产生负面影响&#xff0c…

Oracle 正则,开窗,行列转换

1.开窗函数 基本上在查询结果上添加窗口列 1.1 聚合函数开窗 基本格式: ..... 函数() over([partition by 分组列,...][order by 排序列 desc|asc][定位框架]) 1&#xff0c;partition by 字段 相当于group by 字段 起到分组作用2&#xff0c;order by 字段 即根据某个字段…

《教学管理与教育研究》简介及投稿邮箱

《教学管理与教育研究》简介及投稿邮箱 《教学管理与教育研究》是教育部主管、语文出版社主办的国家级教育类学术期刊&#xff0c;本刊面向全国学校教育的发展管理、教学研究、科研创新和师资培养等领域&#xff0c;展示我国学校教育科研领域的最新成果&#xff0c;交流教学管…

Docker安装xxl-job分布式任务调度平台

文章目录 Docker安装xxl-job分布式任务调度平台1.xxl-job介绍2. 初始化“调度数据库”3、docker挂载运行xxl-job容器3.1、在linux的opt目录下创建xxl_job文件夹&#xff0c;并在里面创建logs文件夹和application.properties文件3.2、配置application.properties文件&#xff0c…

攻防演练作为红方,绕过SQL注入防护

绕过SQL注入防护通常涉及利用Web应用程序或中间件&#xff08;如Web应用防火墙&#xff0c;简称WAF&#xff09;的缺陷或不足。这些防护机制通常依赖于识别和阻止恶意的SQL查询模式&#xff0c;但通过一定的技术和策略&#xff0c;攻击者可以改变查询的结构或表现形式&#xff…

基于springboot+vue+Mysql的校园新闻网站

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

分布式锁设计

一、为什么需要分布式锁 1.1 单体项目同步实现 在单进程&#xff08;启动一个jvm&#xff09;的系统中&#xff0c;当存在多个线程可以同时改变某个变量&#xff08;可变共享变量&#xff09;时&#xff0c;就需要对变量或代码块做同步&#xff0c;使其在修改这种变量时能够线…

关于Git的一些基础用法

关于Git的一些基础用法 1. 前言2. 使用GitHub/gitee创建项目2.1 创建账号2.2 创建项目2.3 下载仓库到本地2.4 提交代码到远端仓库2.5 查看日志2.6 同步远端仓库和本地仓库 1. 前言 首先说一个冷知识&#xff08;好像也不是很冷&#xff09;&#xff0c;Linux和git的创始人是同…

客户关系管理(CRM)是什么?CRM 客户关系管理系统完整指南

通过本文&#xff0c;你将了解&#xff1a; CRM是什么样的软件呢&#xff1f; 企业CRM普遍存在哪些难题&#xff1f;又该怎样解决呢&#xff1f; CRM软件有什么样的功能&#xff1f; 未来CRM软件将朝什么方向发展呢&#xff1f; 以我们公司正在使用的CRM系统为例—— 简道云…

最佳实践:高并发之扩容思路

系统在业务平峰期间运行稳定、性能良好&#xff0c;但在大流量时就会出现各种各样的问题&#xff0c;例如接口时延变大&#xff0c;CPU占用率升高、频繁发生Full GC、代码中出现死锁等等。大流量意味着高并发&#xff0c;高并发也是很多开发人员所期望拥有的经验&#xff0c;一…

橡胶衬板的更换与安装

橡胶衬板的更换与安装 橡胶衬板作为一种重要的工业材料&#xff0c;广泛应用于各种设备和机器中&#xff0c;以提供减震、防滑、耐磨等功能。然而&#xff0c;随着时间的推移和使用频率的增加&#xff0c;橡胶衬板可能会磨损或老化&#xff0c;需要及时更换和安装。本文将介绍…

Wireshark TS | 再谈应用传输缓慢问题

问题背景 来自于朋友分享的一个案例&#xff0c;某某客户反馈电脑应用软件使用时打开很慢&#xff0c;并提供了一个慢时所捕获的数据包文件以及服务端 IP。以前也说过&#xff0c;所谓的慢有很多种现象&#xff0c;也会有很多原因引起&#xff0c;在没有更多输入条件的情况下&…