录音功能总结

最新推荐文章于 2022-05-26 15:00:31 发布
最新推荐文章于 2022-05-26 15:00:31 发布
阅读量414 收藏
点赞数 1
分类专栏： 积累经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmwmdtt/article/details/86715965
版权
录音功能总结
功能/设备pcappwechat
评论列表
录音也是一个数组，利用art-template进行ui渲染
1,需要两个辅助函数，其一是一元一次方程计算录音的宽度：
最小75px,每秒增加3px,最大不超250px，即：y=3X+72
2,其二是时间显示：90秒转化为1`30``,本质就是除以60和取余
播放分MP3和amr以区别播放器，所有资源均在阿里云oss
1,需要两个变量分别是：目前是否正在播放|下次是否播放,条件略复杂
2,amr使用第三方插件播放：https://github.com/BenzLeung/benz-amr-recorder
react渲染录音数组
其余类似pc端
react渲染录音数组
其余类似pc端
新增/编辑无法录语音根据**app**给予前端接口去录制|结束录制|**通知客户端上传**等操作，成功回调后添加录音数组,播放和显示与评论列表类似根据**微信sdk**给予前端接口去录制|结束录制|**通过后端接口上传**等操作，成功回调后添加录音数组,播放和显示与评论列表类似
比较耗时的任务点有

  • 微信录制语音，录制完后的与后端调试上传的过程漫长

  • 由于播放在三端的交互一致，所用的方法一致，条件太多（涉及上一次播放结束与否，后缀不同等），所以播放方法有点复杂

也不是什么极客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react如何请求amr文件流接口-优化版
Yanxiaona111的博客
05-06 479
import React, { PureComponent } from 'react'; import BenzAMRRecorder from 'benz-amr-recorder'; import { Col, Row } from 'antd'; import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons'; import amrCeshi from "../../../../assets/audio/amrC
vue项目中，amr格式的音频播放
a_grain_of_wheat的博客
08-18 2675
amr格式的音频在pc端播放
VUE使用benz-amr-recorder 实现解码、播放
qq_32900003的博客
09-08 3114
安装 npm install benz-amr-recorder 引入 const BenzAMRRecorder = require('benz-amr-recorder') 使用 <template> <div class="wx-voice-div" @click="playVoice(objData)"> </template> methods:{ amrPlay(amr,obj){ //播放 this.$se
vue.js用benz-amr-recorder实现播放amr格式音频 AMR 录音机
coldriversnow的专栏
05-26 2706
vue.js实现播放amr格式 benz-amr-recorder - npm 安装 npm i benz-amr-recorder --save 引用 import BenzAMRRecorder from 'benz-amr-recorder' html部分 <el-descriptions-item label="上报音频"> <template v-if="ruleForm.AJYP == null"> 暂无音频 </templat
vue 播放amr音频
web_hj的博客
01-10 7260
https://www.npmjs.com/package/benz-amr-recorder 1. 使用 npm npm install benz-amr-recorder var BenzAMRRecorder = require('benz-amr-recorder'); let BenzAMRRecorder = require('benz-amr-recorder')...
js实现录音上传功能
10-15
JavaScript录音上传功能是Web开发中一个实用且有趣的特性，它允许用户通过浏览器直接录制音频并将其上传到服务器。本文将详细介绍如何使用JavaScript实现这一功能，包括HTML页面布局、Recorder.js库的使用以及后端...
Android实现语音播放与录音功能
08-27
总结来说，实现Android的语音播放与录音功能涉及以下步骤： 1. 引入支持MP3格式录音的第三方库。 2. 封装录音功能，包括初始化、开始、停止、回调准备完成事件等。 3. 封装播放功能，处理单个和列表播放，管理多个`...
Android 实现电话来去自动录音的功能
09-01
总结起来，Android 实现电话自动录音功能需要监听电话状态变化，通过 `PhoneStateListener` 处理来电和去电状态，并结合 `BroadcastReceiver` 监听去电拨号。在适当的状态下，利用 `MediaRecorder` 进行录音操作。在...
类似微信说话功能的录音处理代码分享
09-04
这个代码示例展示了如何在Android应用中实现类似微信的录音功能，通过`MediaRecorder`进行录音，`MediaPlayer`进行播放，并结合触摸事件监听和UI更新机制来控制整个流程。为了使应用完整，还需要添加UI设计（布局...
详解HTML5 录音的踩坑之旅
09-27
在HTML5中，录音功能的实现主要依赖于Audio API，这是一个强大的工具，允许开发者在网页上录制、播放和处理音频内容。本文将详细讲解在实现HTML5录音过程中可能遇到的问题和解决方案。 首先，我们来谈谈调用Audio ...
AudioRecorder：一个ReactNative应用，可用于录制和播放音频
02-18
AudioRecorder：一个ReactNative应用，可用于录制和播放音频
react-voice-recorder:这个（react-voice-recorder）是用于React ApplicaitonJavaScript库，该库将用于将语音记录为音频并下载相同的
04-30
React声音记录器 这个（react-voice-recorder）是用于React ApplicaitonJavaScript库，该库将用于将语音记录为音频并下载。 演示版 签出 安装 npm i react-voice-recorder //这将下载模块的最新版本。 导入您的项目文件 import {Recorder} from 'react-voice-recorder' import 'react-voice-recorder/dist/index.css' 在渲染方法中声明 this.state = { audioDetails: { url: null, blob: null, chunks: null, duration: { h: 0, m: 0,
vue实现录音功能及播放amr文件（pc端）
weixin_34417814的博客
06-04 7108
录音功能一般来说在移动端比较常见，但是在pc端也要实现按住说话的功能呢？项目需求：按住说话，时长不超过60秒，生成语音文件并上传，我这里用的是recorder.js 1.项目中新建一个recorder.js文件，内容如下，也可在百度上直接搜一个 //兼容window.URL=window.URL||window.webkitURLnavigator.getUserMedia=...
web页面播放arm格式音频
jxyang95的博客
04-29 4270
web页面播放.arm格式音频，arm-js语音插件 AMR 录音机 (README in English) 纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于amr.js和RecorderJs。 注意：由于使用了 amr.js 做编码和解码，因此 js 文件（压缩后，未 gzip）接近 500 KB，使用前请考虑。 特性 方便的 API 实现解码、播放、录音...
获取AMR格式音频的当前播放位置
process_的专栏
04-18 484
<br />int gst_rec_get_play_position()<br />{<br />   GstQuery *query;<br />   GstFormat format;<br />   gint64 position;<br />   gint64 ret_value;<br /> <br />   if((APP_STATE_PLAY != app.state) || (NULL == app.play_pipeline))<br />   {<br />      return -
无法录音原因总结
syh63053767的专栏
05-04 2万+
原因七：MIC硬件坏掉，导致无法录音 原因六：找不到编码库的时候，MediaRecord：error(1,,-2147483648), 05-07 22:23:18.924 E/OMXCodec(  251): ---hd%--- componentName=OMX.google.aac.decoder, matchComponentName=(null), index=20, matchIn
wx.getRecorderManager实现把用户的录音记录并上传到服务器，然后调用接口来实现播放功能
前端之路的博客
12-03 7765
闲话少说，直接上代码！ 首先wxml 开始录音 停止录音 播放录音 然后js 首先使用方法获取对象 const recorderManager = wx.getRecorderManager() const innerAudioContext = wx.createInnerAudioContext() 然后写一个button来调用开始录音的方法。 //开始录音的时候 start: functio...
laravel+vue2.0终于搞定了!
热门推荐
wmwmdtt的博客
12-29 4万+
开文废话: laravel是一个php框架,vue是一个前端MVVM轻量级开源框架. 为啥要组合它俩一起开发呢,除了好玩就是有挑战了?并不是的: 1:起手在慕课网看了laravel基础入门的就会发现,laravel解决了很多后台开发起来老大难的问题,模板引擎和路由机制还有很多开发服务:登录/注册验证,验证码,分页等等.. 2:起手也在慕课网看了vue基础也有很多先进的概念如:数据绑定+组件
uniapp录音功能
最新发布
09-06
总结起来，要实现uni-app中的录音功能，可以使用RecorderManager进行录音操作，使用InnerAudioContext进行录音文件的播放。通过这些API，可以方便地实现录音功能并进行录音文件的上传和播放。<span class="em">1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值