react-audio-analyser - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #rust #deep-learning #docker #macos #java #windows #awesome #kubernetes #awesome-list #security #mcp #ios

react-audio-analyser

(★ 87)

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

File Explorer

Download Latest Version (.zip)

- - audioAnalyser.js
  - audioAnalyser.js.map
- - cssTransform.js
  - fileTransform.js
- env.js
- paths.js
- polyfills.js
- webpack.config.dev.js
- webpack.config.prod.js
- webpackDevServer.config.js
- - audioConvertWav.js
  - audioConvertWav.js.map
  - index.css
  - index.js
  - index.js.map
  - MediaRecorder.js
  - MediaRecorder.js.map
  - mp3worker.js
  - mp3worker.js.map
  - RenderCanvas.js
  - RenderCanvas.js.map
- index.js
- index.js.map
- favicon.ico
- index.html
- manifest.json
- build.js
- lib.js
- start.js
- test.js
- - index.js
- - index.css
  - index.js
  - mixAudio.js
- - demo.css
  - demo_fontclass.html
  - demo_symbol.html
  - demo_unicode.html
  - iconfont.css
  - iconfont.eot
  - iconfont.js
  - iconfont.svg
  - iconfont.ttf
  - iconfont.woff
- index.js
- logo.svg
- registerServiceWorker.js
.babelrc
.eslintrc.js
.gitignore
.travis.yml
LICENSE
package.json
README.md
README_zh-CN.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

English | [简体中文](./README_zh-CN.md)
# react-audio-analyser

[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](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](https://jiwenjiang.github.io/).

## 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](https://github.com/jiwenjiang/react-audio-analyser/blob/master/src/demo/mixAudio.js))

## 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 (
            <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