音频录制(react)

录音两种实现方式

MediaDevices
js-audio-recorder

功能

录音,暂停,继续.播放录音.下载录音(wav格式),重新录音

开始录音

调用麦克风

先检查电脑麦克风配置

// 指定参数
let recorder // react刷新的时候,会把reacorder重置,暂时声明在组件外,const audioObj = {video: false,audio: true,};if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {try {const stream = await navigator.mediaDevices.getUserMedia(audioObj);if (stream.active) {recorder = new Recorder();recorder.start(); // 开始录音}} catch (err) {console.log(err);}} else {alert(没有麦克风配置);}// mediaDevices 里有开始,暂停等方法,使用过程中,麦克风录音经常没声音,暂停继续录音,最后总时长会缺失,后发现 Recorde,比较全面,录音时改用此插件,

暂停

   recorder.pause();

继续

   recorder.resume();

确认录音

使用audio标签播放录音

<audio className={css.audioWidth} controls><source src={}}></source></audio>
//  control显示播放录音控件   controlsList="nodownload"  关闭控件自带下载按钮

获取录音文件格式转换

// 使用FileReader 读取文件

const blob = recorder.getWAVBlob();
// 获取wav格式文件,属性有size,type
// 使用FileReader 读取文件
const reader: any = new FileReader();reader.readAsDataURL(blob);reader.addEventListener("load",(ev: any) => {var mp3 = ev.target.result;if (!mp3 || mp3.length < 6) {console.log("error", "提示", "暂无录音文件", 3);return;}//  ev.target.result 就是audio的src属性需要的值

下载录音

 recorder.downloadWAV("audio"); // audio是文件名

重新录制

recor 清空 audio上的src属性值清空

计时器

let timer
let totalTime = 0const startTimer = () => {timer = setInterval(function () {totalTime += 41;setTimePiece(showTime(totalTime));}, 41);};const showTime = (time: number) => {let min: number | string;let second: number | string;// var msecond;second = Math.floor((time / 1000) % 60);min = Math.floor((time / 1000 / 60) % 60);second = second % 60 < 10 ? "0" + second : second;min = min % 60 < 10 ? "0" + min : min;return min + ":" + second;};

暂停计时

  clearInterval(timer);timer = null;

清空计时

  clearInterval(timer);timer = null;totalTime = 0;

踩到的坑

因为项目是使用iframe嵌套进去的,iframe禁止了麦克风的权限,在iframe上添加此属性就可解决

allow="microphone;camera;midi;encrypted-media;"

音频录制(react)相关推荐

React Native 音频录制例子来解惑入门
React Native 音频录制例子来解惑入门 React Native 音频录制例子来解惑入门前言 React Native工程目录结构从indexandroidjs开始讲起说说怎么用开源项 ...
AVFoundation 文本转语音和音频录制播放
现在你应该对AVFoundation有了比较深入的了解,并且对数字媒体的细节也有了一定认识,下面介绍一下 AVFoundation的文本转语音功能 AVSpeechSynthesizer 开发者可以使 ...
audiorecord怎么释放_Android 开发 AudioRecord音频录制
前言 Android SDK 提供了两套音频采集的API,分别是:MediaRecorder 和 AudioRecord,前者是一个更加上层一点的API,它可以直接把手机麦克风录入的音频数据进行编码压 ...
有关于iphone 音频录制播发
有关于iphone 音频录制播发 1,音频格式相关: http://www.raywenderlich.com/204/audio-101-for-iphone-developers-file-a ...
Android多媒体学习八：调用Android自带的音频录制程序，实现录制
Android中有自带的音频录制程序,我们可以通过指定一个Action为MediaStore.Audio.Media.RECORD_SOUND_ACTION的Intent来启动它就可以了.然后在on ...
.NET NAudio音频录制方法 2021-02-13
.NET NAudio音频录制方法写在前面文章主要内容说明检测录音电平调节录音电平开始录音调整音频保存音频关于作者讨论 SomeONe Clint Nate Greenwood C ...
如何进行音频录制？实用的音频录制方法合集
音频录制是一种重要的技能,可以用于各种场合,比如我们可以使用音频录制技术录制不同乐器和声音的音频,并在后期进行处理和混音,制作出完整的音乐作品等等.但是,要想录制出高质量的音频并不容易,需要掌握一些专 ...
如何录制音频文件mp3？给你推荐好用的几款音频录制软件
其实我们生活中对于音频录制的需求是比较大的,比如开会的时候为了防止漏掉要点,又或者在上课的时候老师语速过快我们来不及记笔记,这些情况出现的时候我们都可以用录音来解决这些问题.那今天在这里我也跟 ...
android Q屏幕录制，设备音频录制无声
Android q 之后google添加了音频录制的api 在状态栏中可以开启录制功能. 使用中发现,选择音源为设备内部音频的时候,录制的视频无声. 内部音乐录制时android Q版本之后googl ...

音频录制(react)

录音两种实现方式

功能

开始录音

调用麦克风

暂停

继续

确认录音

获取录音文件格式转换

下载录音

重新录制

计时器

暂停计时

清空计时

踩到的坑

音频录制(react)相关推荐

最新文章

热门文章

音频录制(react)

录音两种实现方式

功能

开始录音

调用麦克风

暂停

继续

确认录音

获取录音文件 格式转换

下载录音

重新录制

计时器

暂停计时

清空计时

踩到的坑

音频录制(react)相关推荐

最新文章

热门文章

获取录音文件格式转换