【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…

安全认证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;大家都在经营仓储、…

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…

基于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;一…

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

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

浅入浅出之nginx

目录 工作流程正向代理概念 反向代理概念 nginx反向代理配置文件介绍解释作用 参考文章Nginx 常用指令和操作启动 Nginx测试配置文件快速关闭 Nginx优雅关闭 Nginx重载配置文件查看版本查看编译时的参数查看进程配置用户访问日志配置错误日志设置 web 根目录配置 server 块配置…

LeetCode_1304.和为零的 N 个不同整数

题目&#xff1a; 题解&#xff1a; 题目说让我们返回一个由n个各不相同的整数组成的数组&#xff0c;相加为0。 这里的比较好的办法就是类似于 1 2 3 0 -3 -2 -1这样对称的数组。既满足要求&#xff0c;又好实现。 先calloc出一个容量为n的整型数组&#xff0c;定义两个变量…

解决java.lang.NoClassDefFoundError 问题

解决java.lang.NoClassDefFoundError 问题 一、背景二、分析三、解决 一、背景 项目运行成功之后&#xff0c;调用某个接口时报错,信息如下: 2024-04-17 14:59:23 [ERROR] --- [nio-8070-exec-1] c.c.c.e.LogExceptionHandleFilter : Handler dispatch failed; nest…

如何使用Git-Secrets防止将敏感信息意外上传至Git库

关于Git-Secrets Git-secrets是一款功能强大的开发安全工具&#xff0c;该工具可以防止开发人员意外将密码和其他敏感信息上传到Git库中。 Git-secrets首先会扫描提交的代码和说明&#xff0c;当与用户预先配置的正则表达式模式匹配时&#xff0c;便会阻止此次提交。该工具的优…