自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(53)
  • 收藏
  • 关注

原创 vue数组中的indexOf()方法

语法:arrayObject.indexOf(searchvalue, startIndex)因为lastIndexOf和indexof是新增的,所以存在浏览器兼容的问题。返回值:number,查找的项在数组中的位置,没有找到的情况下返-1。跟indexof语法一样,只是他是从数组最后开始往前查找。indexOf 该方法返回某个元素在数组中的位置。startIndex:可选,起点位置的索引。searchvalue:必需,要查找的项;从数组的开头(位置0)开始向后查找。还有一个lastIndexOf。

2022-11-14 17:09:23 8543

原创 vue开发过程中完成对函数的封装和调用

通过export方式导出,在导入时要加{ },export default则不需要。2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用。3、在一个文件或模块中,export、import可以有多个,export default仅有一个。4、通过export方式导出,在导入时要加{ },export default则不需要。1、export与export default均可用于导出常量、函数、文件、模块等。一:新建api.js。

2022-11-01 10:24:17 630

原创 iframe 内嵌式天气,样式颜色修改

2 ,iframe加载完毕后,使用DOM元素的contentWindow属性获取到iframe标签的window;之后就可以正常获取元素了.(网友回答,测试无效)3,还可直接引用第三方api接口就好, appId等参数可以在第三方官网中进行注册调用 , 免费版的一天可以调用300次。这次给大家带来怎样利用iframe让自己的网页可以显示天气,用iframe让自己的网页可以显示天气的注意事项有哪些,下面就是实战案例,一起来看一下。1,要改变内嵌样式的字体颜色,需要在src链接拼接color。

2022-10-19 18:20:51 1654

原创 语音识别 js单页面 降采样

asr语音识别项目为了测试不同模型的语音识别效果和上屏展示,适用于会议记录,翻译等场景。我主要负责页面设计和搭建,测试,联调和根据客户需求进行优化。asr语音识别可以对多模型进行识别,比如实时语音,非实时语音,日韩语音等。还有前端降采样的问题,之前没接触过音频数据的处理,遇到很多困难,刚开始是直接用audio-recorder库设置采样率,这种方法对音频处理造成的影响太大,会对前后音频进行切割,保留中间的一份,会切割到有用的音频,音频噪声也会很大。于是又想到用webrtc提供的音频处理方法,但是他是c语言开

2022-09-16 15:46:04 330

原创 vue搭建项目详细介绍

根据项目实际情况选择,如果要兼容ie,就选vue2,如果不兼容ie,尽量用vue3,比2好用很多,而且现在ie已经停止服务了,应该都不用考虑ie了。// 是否使用历史路由模式 (看项目实际情况,不介意路径好不好看和不做seo的话,可以不用,用的话注意后台也要配置一下)Sass/SCSS (with dart-sass) // sass(建议选择这个,比较完善,学习成本也低)Stylus // (不知道是什么,没关心过,建议sass/less二选一)

2022-09-16 14:32:03 387

原创 认识Vue.observable() 状态管理

随着组件的细化,很多时候都需要处理组件状态共享的情况, Vuex可以轻松解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,接下来介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。用于数据共享,当十几个组件同时共用一套数据时候,把数据独立抽离出来,方便维护也可以实现多个组件之间数据的共享和更新。体量比vuex小,使用维护成本相对较低。

2022-09-13 16:53:44 82

原创 textarea文本展示,定时器模仿一个一个出字的效果。

str.substring(from,to)从字符串中拿到两个下标之间的字符。

2022-09-09 17:02:28 271

原创 文字上屏展示,文本内容自动滚动下一行

关系公式:element.scrollHeight - element.scrollTop === element.clientHeight。定义:只读属性是一个元素的所含的高度的测定,包括由于溢出内容在屏幕上不可见的。定义:获取或设置元素的内容向上滚动的像素值。解释:此公式可以用于判断是否滚动到底。原生scrollbar。

2022-09-08 11:58:59 110

原创 js 函数

有的箭头函数都没有自己的this,不适合定义一个对象方法。this指向外层的this。箭头函数是不能提升的,所以需要使用之前定义。使用const要比var安全,因为函数表达式始终是一个常量。

2022-09-01 16:40:42 48

原创 append,push,pop的区别

push是向数组末尾插入一个或者多个元素,并且返回新的长度。

2022-08-30 16:23:02 1025

原创 WebAssembly 了解 与 js对比

一旦你把 SessionStack 整合进你的网络应用或网站的生产环境,它会开始记录所有的一切:所有的 DOM 变化,用户交互,JavaScript 异常,堆栈追踪,失败的网络请求和调试数据。当你在 SessionStack 中重放用户会话,我们必须渲染问题产生时你的用户的浏览器所发生的一切,而且我们必须重构整个状态,允许你在会话时间线上来回跳转。例如,如果你有一个已用C语言编写的高效数学函数,并且需要将它合并到某个Web应用程序中,那么,你就可以将它部署为一个WebAssembly模块。

2022-08-19 11:31:58 678

原创 java转js 降采样率 三采一resample

官方解释:采样频率,也称为采样速度或者采样率,定义了每秒从连续信号中提取并组成离散信号的采样个数,它用赫兹(Hz)来表示。采样频率的倒数是采样周期或者叫作采样时间,它是采样之间的时间间隔。通俗的讲采样频率是指计算机每秒钟采集多少个声音样本,是描述声音文件的音质、音调,衡量声卡、声音文件的质量标准。如果你以44.1k的采样率去播一个只有8k采样率的音频,估计很快就播完了。所以,由于并不是所有音频的采样率都是统一的,就会涉及到一个采样率转换的问题,在这里给大家介绍一个库,JSSRC。............

2022-08-18 19:45:17 328 1

原创 js ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 的内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。尝试一下语法参数length要创建的 ArrayBuffer 的大小,单位为字节。返回值一个指定大小的 ArrayBuffer 对象,其内容被初始化为 0。异常。...

2022-08-18 16:38:00 2157

原创 js实时录音 ws传输,传递后端asr识别,前端展示

3,点击开始,ws建联,sendData对获取的数据处理,分包处理每包1024.tmparr式处理过的音频。2,分为实时和非实时语音识别。(没有后端配合看不到效果展示)6,上传音频文件识别。(file音频文件做处理模拟蹦字效果)7,再次使用录音功能时,先清除file上传的内容。5,再次点击开始,刷新文本框。1,掉后端接口选择模式。4,点击关闭,链接断开。.........

2022-08-12 14:59:07 1957 2

原创 webrtc 录音

b、点击“下载pcm”标签,会依次执行audioData对象getRawData、getPcmBuffer方法,但是下载的是txt文件,并非是pcm文件,由于不知道如何在js环境将txt文件转成pcm文件,所以本人在将txt文件下载下来后直接手动修改了拓展名,当然此修改后的文件是可以播放的,操作流程如下。pcm是没有头信息的,只要增加44个字节的头信息即可转换成wav,头信息都是固定的,直接用即可,借用网上千篇一律的代码片段。pcm文件在线播放链接,因为本demo是8位的采样位数,所以选择的时候注意一下。.

2022-08-11 15:42:39 1135

原创 二进制,转换

代码】二进制,转换。

2022-08-09 10:23:08 64

原创 js blob

在Web中,Blob类型的对象表示不可变的类似文件对象的原始数据,通俗点说,就是Blob对象是二进制数据,但它是类似文件对象的二进制数据,因此可以像操作File对象一样操作Blob对象,实际上,File继承自Blob。end: 可选,代表的是 Blob 的一个下标,这个下标-1的对应的字节将会是被拷贝进新的Blob 的最后一个字节。start: 可选,代表 Blob 里的下标,表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。contentType: 可选,给新的 Blob 赋予一个新的文档类型。.

2022-08-05 14:53:56 1106

原创 input。file清除。js,jquery

因为js内部的安全机制不可以直接用js修改file的value为有效值,所以解决方法设置file的value为空,或者把file的html从新初始化。

2022-08-04 14:19:57 5732

原创 jquery,ajax

ajax只提交form以文本方式,如果异步提交包含上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit。请求成功时执行的回调函数。.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()data 可选。规定连同请求发送到服务器的数据。默认执行智能判断(xml、json、script 或 html)。规定预期的服务器响应的数据类型。四、$.ajax我的实际应用例子。一、$.ajax的一般格式。二、$.ajax的参数描述。指定,不指定智能判断。..

2022-08-03 17:26:49 36

原创 URL.createObjectURL()方法

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。语法1参数用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​返回值一个DOMString包含了一个对象URL,该URL可用于指定源 object的内容。...

2022-08-03 17:21:04 1522

原创 input 输入框,属性含义

不同type下input的含义和用途type类型input用途value值的含义text单行文本框文本框中默认初始内容password用来输入密码的单行文本框(文本框中的内容将被显示为*)文本框中默认初始内容button普通按钮定义按钮文本submit提交按钮(提交表单时使用)定义按钮上的文本radio单选按钮单击时的结果(必须有)checkbox复选按钮单击时的结果(必须有)file上传文件元素不是同时使用。...

2022-07-26 18:12:36 917

原创 js中使用uuid唯一标识符

在开发过程中,有时候需要js生成全局唯一标识符,在java中可以使用uuid,但是JS中没有现成的函数。

2022-07-25 10:48:42 825

原创 asr语音识别,js页面demo,websocket实时语音

前端和后端合作,前端录制音频,后端调用第三方asr实现实时语音的转换。

2022-07-21 16:24:52 911

原创 js后端返回结果在文本框展示后,再次点击清空文本框内容

代码】js后端返回结果在文本框展示后,再次点击清空文本框内容。

2022-07-21 11:36:07 1207

原创 input的value属性值

当type的取值为text、password、hidden中的其中一个时,此时value属性的值表示的是输入框中显示的初始值,此初始值可以更改,并且在提交表单时,value属性的值会发送给服务器(既是初始值,也是提交给服务器的值)当type的取值为button、reset、submit中的其中一个时,此时value属性的值表示的是按钮上显示的文本。当type的取值为checkbox、radio中的其中一个时,此时value属性的值表示的是提交给服务器的值。...

2022-07-19 15:52:45 4118

原创 原生ajax

综合以上,在状态改变的处理函数一般针对readyState==4且status==200的情况才处理,再根据后台返回的数据类型决定从responseText或者responseXML获取服务器响应回去来的数据。响应处理,即对服务响应回浏览器的数据根据状态码和AJAX对象的状态信息进行不同的处理,在绑定状态改变的处理函数中写对应的逻辑代码即可。//3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;//2、设置请求路径,请求方式等;ajax.open(请求方式,路径)...

2022-07-19 11:59:09 174

原创 在vue中使用setTimeout()和setInterval()

上面的例子就是页面初始化的时候创建了一个定时器setInterval,时间间隔为1秒,每一秒都会调用一次函数get,从而使value的值加一。第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔。定时执行setTimeout是设置一个时间,等待时间到达的时候只执行一次,但是执行完以后定时器还在,只是没有运行。js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout。参数1为方法名或者方法(注意为方法名的时候不要加括号),参数2为时间间隔。...

2022-07-15 10:21:56 1722

原创 innerHTML()和innerText(),实现文本框换行

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。同时,innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。其实,innerHTML 是W3C 组织规定的属性;而innerText 属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。...

2022-07-14 16:37:43 2106

原创 js中的alert样式修改

浏览器自带的alert样式通常不是想要的,可以自定义样式进行修改,代码如下:效果如下:

2022-07-13 11:27:41 4133

原创 前端用wss部署到nginx

nginx里配置的两个server,可以看作两个虚拟电脑,第一个server匹配的第一个location,root 可以看作部署上的js文件夹,study.js就是文件,这是专门访问前端页面的。ws监听第二个ip后端,匹配asr,cong98行拿过劳,协议http,表遍是ws其实是http,upgrate上升到https访问后端ws...

2022-07-13 09:41:25 837

原创 vue项目中使用md5加密

在vue项目中使用md5加密的方法npm安装:1.在需要使用的项目文件中引入:使用:2.或者在main.js文件中将md5转换成vue原型:import md5 from ‘js-md5’;Vue.prototype.$md5 = md5;使用:

2022-07-11 17:31:04 1030

原创 vue中使用uuid,唯一标识

一、什么是 uuid ?uuid 指 通用唯一识别码二、为什么要用 uuid ?三、uuid 怎么在 vue 中引入并使用安装:npm install uuid引入:import uuid from ‘uuid’(不过最近好像更新了 如果这样报警告用下面的)import { v4 as uuidv4 } from ‘uuid’  uuidv4()使用:...

2022-07-11 17:12:48 11937

原创 前段项目用wss,部署到nginx上,连接不通报错failed

通讯原理及流程是:wss是不能写ip加端口的,就跟https一样不能接ip跟端口。wss相当于https,只作用于域名身上因为只能写域名,但是socket监听的是服务器一个端口,所以我们这边就需要配置nginx的反向代理了匹配内容部分:监听端口(listen)域名( server_name)匹配关键词(location)代理访问资源:匹配到关键词后,通过{……}中的内容确定代理方式。root:表示代理访问资源的根目录,在根目录下访问用户输入地址的资源。index对应的是默认资源页面,通常是网站首页。代

2022-07-11 11:36:39 2380

原创 Javascript Promise用法,详解

首先我们来了解 Promise 到底是怎么一回事Promise 是抽象的异步处理对象,以及对其进行各种操作的组件。我知道这样解释你肯定还是不明白 Promise 是什么东西,你可以把 Promise 理解成一个 容器,里面装着将来才会结束的一个事件的结果,这个事件通常是一个异步操作。Promise最初被提出是在 E语言中, 它是基于并列/并行处理设计的一种编程语言。Javascript 在 ES6 之后也开始支持 Promise 特性了,用来解决异步操 的问题。这里顺便解释一下什么是 ES6, ECMASc

2022-07-08 16:57:13 335

原创 nginx反向代理wss websocket出现的问题

参考文章https://www.cnblogs.com/Miss-mickey/p/6734831.html1、下载nginx下载地址:http://nginx.org/en/download.html (建议下载稳定版的)下载之后解压到某个文件夹,然后shift+右键——在此处打开控制台,输入start nginx启动服务器在浏览器输入localhost,如果有出来nginx页面就代表成功了。具体命令行操作可以参考这篇博客:https://www.cnblogs.com/saysmy/p/6609796

2022-07-08 14:21:47 1543

原创 前端调用麦克风获取实时音频流和录音并上传至后台

index.htmlrecordermp3.jsworker-reallame.jslame.min.js一个是实时获取音频流的文件,另一个是录音并上传至后台的文件,建议都在服务器环境下打开,这两天从网上整理的,希望对大家有所启发。

2022-07-07 16:33:17 5373 3

原创 JS浏览器录音并通过WebSocket实时传递到后端

实现效果:PC端通过麦克风录音,通过 WebSocket实时传递到后台原始每包数据过于大,后台不能接收,需要分包处理,每包最大1024原始采样率为48000;通过合并压缩为自己所需采样率,demo中最终采样率为16000`...

2022-07-06 19:31:43 4011 2

原创 websocket和http的区别

一、WebSocket 是什么?WebSocket是HTML5规范提出的一种协议;目前除了完犊子的IE浏览器,其他浏览器都基本支持。他是一种协议,万变不离其宗,也是基于TCP协议的;和HTTP协议是并存的两种协议。WebSocket是HTML5中的协议。HTML5 Web Sockets规范定义了Web Sockets API,支持页面使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道,通过一个单一的套接字在Web上进行操作。HTML5 We

2022-07-03 17:44:39 3488 1

原创 Vue使用formData格式类型上传文件的示例

在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作。其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。使用FormData即可:let formData = new FormData();在axios异步请求时。params的值就是formData,传formData过去即可...

2022-07-03 17:00:20 2098

原创 vue中js-audio-recorder,使用websocket进行音频流传输

从获取浏览器录音开始,就是通过websocket实时发送音频流给后端。在这里插入代码片点击开始录音把formData传到后端,初始化websocket,链接服务器,指定事件回调,调用websocketSend发送数据的方法。...

2022-07-03 16:17:21 4631 3

ASR语音识别技术,vue开发,websocket连接。

asr语音识别项目是基于华为ai字幕为原型的pc端内部开发项目,主要是为了测试不同模型的语音识别效果和上屏展示,适用于会议记录,翻译等场景。我主要负责页面设计和搭建,测试,联调和根据客户需求进行优化。asr语音识别可以对多模型进行识别,比如实时语音,非实时语音,日韩语音等。在项目开发过程中也遇到了很多困难,比如传输协议测试时用http,因为蓝区和绿区的原因要用安全的https传输,我们就通过ngnix做一个中转,再去访问后台。还有前端降采样的问题,之前没接触过音频数据的处理,遇到很多困难,刚开始是直接用audio-recorder库设置采样率,这种方法对音频处理造成的影响太大,会对前后音频进行切割,保留中间的一份,会切割到有用的音频,音频噪声也会很大。

2022-09-16

jquery+js wenet开源 asr实时语音识别

WeNet是全球首个面向工业级产品的、全栈式的、开源的端到端语音识别解决方案,其提供模型训练、模型推理、云侧和端侧模型部署的一站式服务。 wenet ASR语音识别技术。设计音频采集,音频转换,websocket前后端交互。 适合pc端开发语音识别项目。 用到canvas模拟实时音频的动态图表。 textarea文本框的展示文本信息,可以参考。 采样率,采样位数,声道设置。

2022-09-16

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除