https://github.com/jiwenjiang/react-audio-analyser
基于react录音及绘制音频曲线
https://github.com/jiwenjiang/react-audio-analyser
audio audio-analyser audio-recorder react react-audio react-recorder recorder
Last synced: 20 days ago
JSON representation
基于react录音及绘制音频曲线
- Host: GitHub
- URL: https://github.com/jiwenjiang/react-audio-analyser
- Owner: jiwenjiang
- License: mit
- Created: 2018-08-01T12:22:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T20:58:54.000Z (over 2 years ago)
- Last Synced: 2025-03-24T08:43:33.387Z (about 1 month ago)
- Topics: audio, audio-analyser, audio-recorder, react, react-audio, react-recorder, recorder
- Language: JavaScript
- Homepage: https://segmentfault.com/a/1190000016152729
- Size: 1.33 MB
- Stars: 86
- Watchers: 4
- Forks: 29
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
English | [简体中文](./README_zh-CN.md)
# react-audio-analyser
[](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
this.changeScheme(e)} value={audioType}>
audio/webm（default, safari does not support ）
audio/wav
audio/mp3
audio/mp4
);
}
}
```
## 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