![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5
文章平均质量分 87
高坚果兄弟
高坚果
展开
-
uniapp中实现H5录音和上传、实时语音识别(兼容App小程序)和波形可视化
在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能,uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好,用Recorder插件可避免这些问题。支持vue2、vue3、nvue,支持已有的大部分录音格式:mp3、wav、pcm、amr、ogg、g711a、g711u等原创 2024-01-10 10:52:54 · 8424 阅读 · 13 评论 -
vue3实现H5网页录音并上传(mp3、wav)兼容Android、iOS和PC端
项目使用的vue3.0版本(这个插件同时支持vue2.0、也支持uniapp,很强!),录音过程中会显示可视化波形,同时能够做到兼容PC端、Android、和iOS,一次编码 到处运行,哈哈~省了不少事。vue3项目打包后,放服务器里面,同时开启https访问(必须https才能录音,本地localhost没有这个限制),然后电脑、Android、iOS上打开这个网页就都能录音了(但有些浏览器不能录音,比如UC、夸克,不过好在手机系统自带浏览器、微信里面都能录音,效果还是很不错的)。开始录音,和结束录音。原创 2023-06-11 14:46:50 · 5482 阅读 · 18 评论 -
网页js版音频数字信号处理:H5录音+特定频率信号的特征分析和识别提取
音频数字信号处理 Audio DSP (Digital Signal Processing) 是一个复杂又专业的话题,本文介绍的是如何从音频中实时分析和识别出特定频率信号的一种方法,对应的代码为可运行在浏览器中的html5网页版(可移植);可用于识别环境中特定频率的声音、或噪声、乐器弹奏的音调。原创 2023-02-27 14:43:33 · 2167 阅读 · 1 评论 -
移动端实现HTML5 mp3录音踩坑指南:系统播放音量变小、一些机型录音断断续续 之 MediaRecorder和AudioWorklet的终极对决
Recorder H5录音开源库群里有用户反馈手机上录音有bug,前后反馈过来几段测试过程完整录像;分析后初步发现在他那个手机上表现确实是断断续续的,从而音质非常差;此版本的Recorder采用的浏览器或接口对。但用另外一个录音库录制的却没有这个问题,当时初步分析了下一,发现在手机上使用的是来录制webm格式音频,底层使用的是浏览器的接口对返回的音频流进行音频采集。......原创 2022-08-14 08:13:55 · 1700 阅读 · 1 评论 -
几行代码把Chrome搞崩溃之:HTML5 MP3录音由ScriptProcessorNode升级成AudioWorkletNode采坑记
关键词: STATUS_ACCESS_VIOLATION AudioContext AudioWorkletNode audioWorklet addModule resume suspended createScriptProcessor搞崩Chrome测试页:测试页地址文章目录事件起因现象复现填坑处理最终结果事件起因我前些年GitHub开源的前端H5录音库:https://github.com/xiangyuecn/Recorder,提供了 mp3 wav ogg webm amr 格式支持.原创 2022-03-10 09:22:42 · 2631 阅读 · 0 评论 -
24位PCM采样数据转成16位算法,已实现PCM转WAV在线工具源码支持24bits、16bits、8bits
最近收到几个24位的PCM录音源文件,Recoder库原有的PCM转WAV工具只支持8位和16位,于是就升级一下支持了24位的PCM源文件。可能是搜索方法不对,搜索了半天没有找到24位转成16位的算法,但好在运气还不错看到一篇标题不太想关的文章里面有成套的转换算法。算法来源24位PCM转成32位浮点数参考文章:https://www.codeproject.com/articles/501521/how-to-convert-between-most-audio-formats-in-net 里面.原创 2021-01-03 11:53:50 · 3118 阅读 · 3 评论 -
HTML5实现DTMF(电话拨号按键信号)解码、编码,代码简单易于移植
文章目录一、前言1.1 HTML5实现DTMF的一些动机1.2 一些有效场景(1) 10086(2) 软电话(3) 小玩具二、DTMF频率按键对照表三、DTMF信号解码 得到按键值3.1 先学会手工解码3.2 了解一些原理(1) 调整PCM采样率基本不会干扰到DTMF信号(2) 降低采样率有利于识别DTMF信号(3) 普通话音很难刚好凑成DTMF信号3.3 实现软件解码(1) 降低PCM的采样率(2) 如何找到那两条横线(3) 用FFT将时域信号转成频率信号(4) 粗暴的FFT扫荡模式:滑动窗口,不放过任何原创 2020-06-28 02:49:10 · 2247 阅读 · 2 评论 -
H5录音音频可视化-实时波形频谱绘制、频率直方图
这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些);趁热打铁写了一个音频可视化相关扩展测试代码,下面这张就是测试Gif截图,看起来还算过得去,测试地址上面这些波形、频率的计算和显示都是由纯js代码编写的,并未用到浏览器专有特性,因此可以方便的移植到其他语言实现,比如移植到Android、IO...原创 2020-01-17 23:15:46 · 6138 阅读 · 3 评论 -
HTML5实时语音通话聊天,MP3压缩传输3KB每秒
自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上传服务器这种操作支持非常良好,因此以前不太好支持的H5语音通话已经有了更好的突破空间。因此花了两晚时间打造了一个H5语音通话聊天的demo。欢迎在线把玩:https://xiangyuecn.github.io/Recorder/一、把玩方法准备局域网内两台设备(Peer A、Peer B)用最新...原创 2019-08-28 10:49:27 · 1182 阅读 · 0 评论 -
优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码
文章目录一、Recorder H5录音库的特性(1)浏览器支持(2)功能支持二、使用预览截图(1)移动端H5(2)IOS Hybrid App(3)Android Hybrid App三、应用场景四、优化过程记录(1)为什么要升级优化(2)开始使用Web Worker加速转码(3)剩下的问题五、Hybrid App存在的意义六、更多支持Recorder H5 GitHub开源库随着支持功能的增...原创 2019-08-26 08:26:43 · 1869 阅读 · 3 评论 -
设计和编写一个异步通用Picker选择器,用于时间日期、城市、商品分类的选择
回到本初,看到多年前写的一段移动端App内嵌入的H5兼容处理代码,有段专门兼容处理输入框类型的代码:针对Android 5.0.1,5.0.2 time类型的输入框统统改成text类型(当年的记忆犹新:这两个版本有些手机上的弹框居然只有重置和取消两个按钮,被客户叼了一顿);不管是IOS还是Android,datetime,datetime-local统统使用text类型,手输比默认的弹框选...原创 2019-07-07 22:48:19 · 362 阅读 · 0 评论 -
HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信
GitHub: https://github.com/xiangyuecn/Recorder在线测试: 点此测试本文介绍的是我的一个开源js库Recorder,并利用它在网页上进行在线录音和上传到服务器。录音代码本示例代码支持PC、Android、IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。看万遍代码不如行动一遍,新建一个htm...原创 2019-04-26 07:49:03 · 3069 阅读 · 6 评论 -
html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia
花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder 传送门:https://xiangyuecn.github.io/Recorder/copy之前说点什么准备做一个网页版聊天界面,表情啊、图片啊、上传文件啊都应该要有,视频就算了...原创 2018-05-16 23:17:41 · 17641 阅读 · 14 评论 -
记录一下对swiper4.x.js在H5单页中的滑动优化
应用场景仅仅应用于单页应用的滑动操作,用swiper4.x接管页面的滚动操作。用来支持顶部和尾部的回弹效果,进一步来支持常见那种下拉刷新动画效果。不适用于轮播图那种应用场景。虽然只是针对swiper4.x,但相关原理,在别的框架中也是有参考意义的。出现的问题一、惯性动画不会在触摸时停止快速滑动页面,手离开屏幕时产生的惯性动画还在运行时,此时触摸屏幕,动画不会停止。导致连续快速滑动页面,看...原创 2019-02-26 19:36:07 · 437 阅读 · 0 评论 -
干货:小微个人如何接入免费短信验证码
前几天专门为本文提前配了一段录屏,到 https://v.youku.com/v_show/id_XNDA0MTU0NzI4OA==.html 观看。第一次用爱剪辑,老厉害了,时间轴都没有,所有涉及到精确时间只能靠猜,已卸载。肤浅说到发短信验证码接口,第一印象就是好货不便宜,速度快、送达率高的通道各大短信接口厂商收费也好贵的哟,小微个人不舍得接入,也不符合大部分大厂的准入门槛(大部分怎么...原创 2019-02-03 10:14:25 · 2722 阅读 · 4 评论 -
Hybrid小程序混合开发之路 - 数据交互
HTML+CSS是历史悠久、超高自由度、控制精准、表现能力极强、编码简单、学习门槛超低、真跨平台的一种UI界面开发方式。本文介绍的是微信小程序和H5混合开发的一种数据交互方式。很多应用在原生界面中混杂着HTML界面记得xp时代的QQ,有些界面偶尔会弹出熟悉的js错误对话框,还能右键弹出熟悉的IE6的右键菜单,伪装的挺好,差点没认出来,现在的QQ就不知道了。美团、淘宝这些拥有几乎无限界面...原创 2019-01-23 08:04:00 · 583 阅读 · 0 评论