基于react的录音及音频曲线绘制的组件开发

最新推荐文章于 2024-09-08 08:14:44 发布

j_bleach

最新推荐文章于 2024-09-08 08:14:44 发布

阅读量2.8k

点赞数 1

分类专栏： react js插件 js 文章标签： react

本文链接：https://blog.csdn.net/j_bleach/article/details/82080971

版权

本文介绍了如何在React中开发一个录音组件，包括开始、暂停、停止录音功能，并将音频频谱通过canvas绘制。项目使用了MediaRecorder API和AnalyserNode进行音频处理，实现了音频的webm转wav格式转换。文章详述了组件的实现过程和关键代码，包括MediaRecorder.js和RenderCanvas.js的逻辑。

摘要由CSDN通过智能技术生成

简介

这里写图片描述
演示地址

最近由于工作需要，需要在react上用到一个录音的功能，录音主要包含开始录音，暂停录音，停止录音，并将频谱通过canvas绘制出来。起初开发时找了一个现成的包，但是这个第三方的包不支持暂停功能，也不支持音频转码，只能输出audio/webm格式，所以自己在周末决定重新写一个关于react录音的插件。

使用

目前这个包已经上传至npm，需要用的同学可以运行指令

npm install react-audio-analyser --save

下载到本地，更多详细的使用方法请看这里。欢迎大家使用，也希望多多提issue。有兴趣的同学可以继续往下看，文章接下来会详细讲述一下录音的实现及开发过程。

项目简介（react-audio-analyser）

这里写图片描述

项目本身主要在2个文件夹，component就是组件react-audio-analyser存放的位置。

component：

audioConvertWav.js audio/webm转audio/wav
index.js 外层的index.js用于暴露组件，内层index为组件的容器（组建本身）
MediaRecorder.js 组件录音主要处理逻辑。
RenderCanvas.js 音频曲线绘制处理逻辑。
index.css 暂未启用

demo:

demo主要用于对组件的演示，主要包含控制按钮（开始，暂停，结束）的渲染，及逻辑处理。

react-audio-analyser

index.js

import React, {Component} from "react";
import MediaRecorder from "./MediaRecorder";
import RenderCanvas from "./RenderCanvas";
import "./index.css";

@MediaRecorder
@RenderCanvas
class AudioAnalyser extends Component {
   

    componentDidUpdate(prevProps) { // 检测传入status的变化
        if (this.props.status !== prevProps.status) {
            const event = {
                inactive: this.stopAudio,
                recording: this.startAudio,
                paused: this.pauseAudio
            }[this.props.status];
            event && event();
        }
    }

    render() {
        const {
            children, className, audioSrc
        } = this.props;
        return (
            <div className={className}>
                <div>
                    {
  this.renderCanvas()} // canvas 渲染
                </div>
                {children} // 控制按钮
                {
                    audioSrc &&
                    <div>
                        <audio controls src={audioSrc}/>
                    </div>
                }
            </div>
        );
    }
}

AudioAnalyser.defaultProps = {
    status: "", //组件状态
    audioSrc: "", //音频资源URL
    backgroundColor: "rgba(0, 0, 0, 1)", //背景色
    strokeColor: "#ffffff", //音频曲线颜色
    className: "audioContainer", //样式类
    audioBitsPerSecond: 128000, //音频码率
    audioType: "audio/webm", //输出格式
    width: 500, //canvas宽
    height: 100 //canvas高
};

export default AudioAnalyser;