react-audio-analyser

![GitHub](https://github.com/jiwenjiang/react-audio-analyser)

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

Demo

Check out the demo.

Installation

npm install react-audio-analyser --save

Features

- Record audio and show the curve
- Support output audio/wav,audio/mp3,audio/webm
- Various state callbacks
- Support the introduction of multiple components(reference)

Example

``js

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: "" } }

componentDidMount() { }

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

changeScheme(e) { this.setState({ audioType: e.target.value }) }

render() { const {status, audioSrc, audioType} = this.state; const audioProps = { audioType, // audioOptions: {sampleRate: 30000}, // 设置输出音频采样率 status, audioSrc, timeslice: 1000, // timeslice（https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#Parameters） 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) }, onRecordCallback: (e) => { console.log("recording", e) }, errorCallback: (err) => { console.log("error", err) } } return (


                
                    
                        {status !== "recording" &&
                                                   onClick={() => this.controlAudio("recording")}>}
                        {status === "recording" &&
                                                   onClick={() => this.controlAudio("paused")}>}
                                                   onClick={() => this.controlAudio("inactive")}>
                    

                
                choose output type


        );
    }
}

`Properties(audioProps)`

Properties | Description | Default |IsRequired -------------|------------------------------------------------------|-------------------------|------------status | recording start , paused pause , inactivestop | undefined | yesaudioType| audio output type | audio/webm | notimeslice| The number of milliseconds to record into each Blob | undefined | noaudioSrc| 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 | nopauseCallback| Function triggered after pausing recording | undefined | nostopCallback| Function triggered after stoping recording | undefined | noonRecordCallback| Function triggered after setting timeslice or stoping recording | undefined | noerrorCallback| Function triggered after error | undefined | nobackgroundColor| audio canvas backgroundColor | rgba(0, 0, 0, 1) | nostrokeColor| audio canvas strokeColor | #ffffff | noclassName| audio canvas css classname | audioContainer | noaudioBitsPerSecond| audioBitsPerSecond | 128000 | nowidth| audio canvas width | 500px | noheight| audio canvas height | 100px | noaudioOptions| output audio/wav options | {} | noaudioOptions.sampleRate` | output audio/wav sampleRate | | no

License

MIT

TODO

- output audio/mp3 (completed)
- Diverse audio curve display

Example

``js

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: ""
        }
    }

    componentDidMount() {
    }

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

    changeScheme(e) {
        this.setState({
            audioType: e.target.value
        })
    }

    render() {
        const {status, audioSrc, audioType} = this.state;
        const audioProps = {
            audioType,
            // audioOptions: {sampleRate: 30000}, // 设置输出音频采样率
            status,
            audioSrc,
            timeslice: 1000, // timeslice（https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#Parameters）
            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)
            },
            onRecordCallback: (e) => {
                console.log("recording", e)
            },
            errorCallback: (err) => {
                console.log("error", err)
            }
        }
        return (


                
                    
                        {status !== "recording" &&
                                                   onClick={() => this.controlAudio("recording")}>}
                        {status === "recording" &&
                                                   onClick={() => this.controlAudio("paused")}>}
                                                   onClick={() => this.controlAudio("inactive")}>
                    

                
                choose output type

);
}
}

Properties(audioProps)

Properties   | Description                                          | Default               |IsRequired
-------------|------------------------------------------------------|-------------------------|------------

status | recording start , paused pause , inactive

 stop | undefined               | yes

audioType

       | audio output type      | audio/webm | no

timeslice

       | The number of milliseconds to record into each Blob      | undefined | 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

onRecordCallback

     | Function triggered after setting timeslice or 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