【JavaScript】移动端长按事件触发录音

努力挣钱的小鑫

已于 2024-04-29 09:54:24 修改

阅读量460

点赞数 3

分类专栏： JavaScript/TypeScript 文章标签： javascript 前端开发语言

于 2024-04-26 09:26:15 首次发布

本文链接：https://blog.csdn.net/IAIPython/article/details/138205990

版权

let timeOutEvent: any;
const touchstart = (event: any) => {
   
  // 长按事件触发
  timeOutEvent = setTimeout(function () {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力挣钱的小鑫

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html5+js实现手机录音功能，支持微信等80%的浏览器内核

12-24

支持大部分已实现getUserMedia的浏览器，包括腾讯Android X5内核(QQ、微信)。录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg(beta)、webm(beta)格式；支持任意格式扩展（前提有相应编码器）。 mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）。 mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心 wav编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。

移动端，录音之前判断是否已经获取录音权限

Smile0L0的博客

06-11

4550

项目背景：项目是用 vue 写的，最终打包为 apk ，其中涉及到录音的功能，利用 h5+ 实现的。 (在vue中集成 html5 plus，参考 https://www.cnblogs.com/luobiao/p/10552030.html) 需求：长按录音，录音之前判断是否已经获取录音权限，如果没有权限，则需要获取权限；如果有权限，则开始录音。录音功能，使用了触摸事件，触摸开始，则录音开始，触摸结束，则录音结束。并且限制录音时长最长为一分钟 <div class="record.

1 条评论您还未登录，请先登录后发表或查看评论

已解决：H5移动端网页实现录音功能，js实现录音功能，包括安卓webview接口也可以使用

Spy003的博客

04-05

1万+

需要注意的是，由于安卓设备的硬件配置和性能各异，因此录音的质量和可靠性可能会有所不同。遇到一个需求，需要做一个手机网页录音的功能，嵌入到webview中去，用安卓原生录音倒是可以，但是想着尽量去安卓化开发，就想着用纯的js前端代码去实现录音功能。需要注意的是，在使用 pause() 和 resume() 方法时，我们需要考虑到录音时长和暂停/恢复时的延迟时间，以确保正确的录音效果。-----------------------这是一条美丽的分割线-----------------------

uniapp 小程序端长按录音、保存、播放录音功能实现和问题记录

sinat_35272898的博客

03-16

5776

使用 uniapp 开发小程序，使用 Vue3 + uview-plus ，做一个长按录音的功能，分享一下实现过程示例代码可以直接复制使用

使用js实现长按监听

qq_61233877的博客

05-19

5041

使用js实现长按监听

vue项目语音录制适配安卓和苹果H5微信浏览器按住说话送开上传语音文件基于js-audio-recorder插件

weixin_56723577的博客

08-29

1069

松开按钮上传录音,代码里有两个时间一个是按住按钮的时间，一个是录音时间，在手机上还是用录音时间适配比较好。demo文件，复制拿去就能用，样式可以自己调试。1.安装js-audio-recorder。

js原生touch事件实现微信语音按住录音，上滑取消。

天下大师傅

10-31

1万+

由于在微信公众号上要开发语音聊天功能，前端需求就需要有一个类似微信的语音聊天，我看了下微信的语音，操作流程就是按住录音，滑动超出一定距离就取消发送。需求确定了，下面就是敲代码了 lee-voice *{ margin: 0; padding: 0; } html,body{ background: #fff; } .btn{ pos

javascript 调用原生app中功能：拍照，录音

qq_35500233的博客

02-21

1371

javascript 调用原生app中功能：拍照，录音写在javascript中的代码如下： /* *初始化桥接函数 */ //参数为javascript这边的回调函数，桥接时需要执行的方法 function setupWebViewJavascriptBridge(callback) { //WebViewJavascriptBridge实现互调的过程也容易理解，就是在OC环境和Jav...

springboot+react+html5 实现按住录音离开发送、语音合成

04-15

2. **React**: React是由Facebook开发的JavaScript库，用于构建用户界面。在本项目中，React被用于创建前端界面，特别是那个用户可以按住录制声音的按钮。React的组件化特性使得代码组织更加清晰，同时它的状态管理...

移动端H5，拍照，录制视频以及录音功能的调用

yuntian1995的博客

08-24

7033

什么都不说，先上代码（原创）调用手机功能 .btn { border-bottom: 2px solid #fff; display: block; text-align: center; padding: 2px 10%; margin: 2px 0; }

JavaScript实现页面中录音功能的方法

12-01

前言页面中实现录音需要使用浏览器提供的 MediaRecorder API，所以前提是需要浏览器支持 MediaStream Recording 相关的功能。以下代码默认工作在 Chrome 环境中。准备页面首先准备一个页面，其中内容很简单，一个录音按钮，一个用于播放的 <audio> 标签。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht

仿微信按住录音功能

07-18

已实现类似于微信按住录音的功能，能实现本地录音，并且能够本地播放，十分容易上手。

区分pc和h5获取录音权限