1.0.1 • Published 2 years ago

react-audio-analyser-js v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

English | 简体中文

react-audio-analyser-js

GitHub

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

Demo

Check out the demo.

Installation

npm install react-audio-analyser-js --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-js"


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)</option>
                    <option value="audio/wav">audio/wav</option>
                    <option value="audio/mp3">audio/mp3</option>
                </select>
            </div>
        );
    }
}

Properties(audioProps)

PropertiesDescriptionDefaultIsRequired
statusrecording start , paused pause , inactive stopundefinedyes
audioTypeaudio output typeaudio/webmno
timesliceThe number of milliseconds to record into each Blobundefinedno
audioSrcwindow.URL.createObjectURL of output audio blob ,when the prop set, showing the audio control listnullno
startCallbackFunction triggered after starting(resuming) recordingundefinedno
pauseCallbackFunction triggered after pausing recordingundefinedno
stopCallbackFunction triggered after stoping recordingundefinedno
onRecordCallbackFunction triggered after setting timeslice or stoping recordingundefinedno
errorCallbackFunction triggered after errorundefinedno
backgroundColoraudio canvas backgroundColorrgba(0, 0, 0, 1)no
strokeColoraudio canvas strokeColor#ffffffno
classNameaudio canvas css classnameaudioContainerno
audioBitsPerSecondaudioBitsPerSecond128000no
widthaudio canvas width500pxno
heightaudio canvas height100pxno
audioOptionsoutput audio/wav options{}no
audioOptions.sampleRateoutput audio/wav sampleRateno

License

MIT

TODO

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