jiwenjiang / react-audio-analyser

基于react录音及绘制音频曲线

English | 简体中文

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

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 (
            <div>
                <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>
                <p>choose output type</p>
                <select name="" id="" onChange={(e) => this.changeScheme(e)} value={audioType}>
                    <option value="audio/webm">audio/webm（default, safari does not support ）</option>
                    <option value="audio/wav">audio/wav</option>
                    <option value="audio/mp3">audio/mp3</option>
                    <option value="audio/mp4">audio/mp4</option>
                </select>
            </div>
        );
    }
}

Properties(audioProps)

Properties	Description	Default	IsRequired
status	recording start , paused pause , inactive stop	undefined	yes
audioType	audio output type	audio/webm(audio/mp4 in safari)	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

License

MIT

TODO

• output audio/mp3 (completed)
• support safari (completed)
• Diverse audio curve display