# react-audio-analyser > audio recordings and draw the curve Latest version **1.0.0** (published 2022-04-17) · MIT license · 0 weekly downloads ## Install ```sh npm install react-audio-analyser pnpm add react-audio-analyser yarn add react-audio-analyser bun add react-audio-analyser ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2022-04-17 | | First published | 2018-08-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 1.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 87 | | Author | j_bleach | | Maintainers | jbleach | | Keywords | wav, mp3, encoder, audio, recorder, react-audio, audio-analyser, audio-curve | ## Links - npm: https://www.npmjs.com/package/react-audio-analyser - Repository: https://github.com/jiwenjiang/react-audio-analyser - Issues: https://github.com/jiwenjiang/react-audio-analyser/issues - npm.io page: https://npm.io/package/react-audio-analyser ## Alternatives - [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads - [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads - [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads - [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads - [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads ## Recent versions - 1.0.0 (latest) — 2022-04-17 - 0.3.1 — 2020-01-01 - 0.3.0 — 2019-12-31 - 0.2.6 — 2019-10-31 - 0.2.5 — 2019-02-13 - 0.2.4 — 2019-01-14 - 0.2.3 — 2019-01-14 - 0.2.2 — 2019-01-01 - 0.2.1 — 2019-01-01 - 0.2.0 — 2018-12-31 - 0.1.3 — 2018-11-22 - 0.1.2 — 2018-08-27 - 0.1.1 — 2018-08-26 - 0.1.0 — 2018-08-25 ## README 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 (
{status !== "recording" && this.controlAudio("recording")}>} {status === "recording" && this.controlAudio("paused")}>} 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 ## License MIT ## TODO - output audio/mp3 (completed) - Diverse audio curve display --- _Source: https://npm.io/package/react-audio-analyser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._