The react component for audio recordings and draw the curve

react-audio-analyser

recording audio and drawing the curve. support for converting the audio to wav.

Installation

npm install react-audio-analyser --save

Features

• Record audio and show the curve
• Support output audio/wav
• Various state callbacks

Example

import React, {Component} from "react";
import "./index.css";
import AudioAnalyser from "react-audio-analyser"


export default class demo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            status: null
        }
    }

    controlAudio(status) {
        this.setState({
            status
        })
    }

    render() {
        const {status, audioSrc} = this.state;
        const audioProps = {
            audioType: "audio/wav", // Temporarily only supported audio/wav, default audio/webm
            status, // Triggering component updates by changing status
            audioSrc,
            startCallback: (e) => {
                console.log("succ start", e)
            },
            pauseCallback: (e) => {
                console.log("succ pause", e)
            },
            stopCallback: (e) => {
                this.setState({
                    audioSrc: window.URL.createObjectURL(e)
                })
                console.log("succ stop", e)
            }
        }
        return (
            <AudioAnalyser {...audioProps}>
                <div className="btn-box">
                    {status !== "recording" &&
                    <i className="iconfont icon-start" title="开始"
                       onClick={() => this.controlAudio("recording")}></i>}
                    {status === "recording" &&
                    <i className="iconfont icon-pause" title="暂停"
                       onClick={() => this.controlAudio("paused")}></i>}
                    <i className="iconfont icon-stop" title="停止"
                       onClick={() => this.controlAudio("inactive")}></i>
                </div>
            </AudioAnalyser>
        );
    }
}

Properties(audioProps)

Properties	Description	Default	IsRequired
status	recording start , paused pause , inactive stop	undefined	yes
audioType	audio output type	audio/webm	no
audioSrc	window.URL.createObjectURL of output audio blob ,when the prop set, showing the audio control list	null	no
startCallback	Function triggered after starting(resuming) recording	undefined	no
pauseCallback	Function triggered after pausing recording	undefined	no
stopCallback	Function triggered after stoping recording	undefined	no
errorCallback	Function triggered after error	undefined	no
backgroundColor	audio canvas backgroundColor	rgba(0, 0, 0, 1)	no
strokeColor	audio canvas strokeColor	#ffffff	no
className	audio canvas css classname	audioContainer	no
audioBitsPerSecond	audioBitsPerSecond	128000	no
width	audio canvas width	500px	no
height	audio canvas height	100px	no
audioOptions	output audio/wav options	{}	no
audioOptions.sampleRate	output audio/wav sampleRate		no

GitHub