https://github.com/samhirtarif/react-audio-visualize
An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs.
https://github.com/samhirtarif/react-audio-visualize
audio audio-visual audio-visualization audio-visualizer audio-waveform audio-waveforms-visualization
Last synced: about 1 year ago
JSON representation
An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs.
- Host: GitHub
- URL: https://github.com/samhirtarif/react-audio-visualize
- Owner: samhirtarif
- License: mit
- Created: 2023-05-26T14:45:37.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T05:10:41.000Z (over 1 year ago)
- Last Synced: 2025-04-01T09:19:55.759Z (about 1 year ago)
- Topics: audio, audio-visual, audio-visualization, audio-visualizer, audio-waveform, audio-waveforms-visualization
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-audio-visualize
- Size: 658 KB
- Stars: 124
- Watchers: 2
- Forks: 25
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **react-audio-visualize**
An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs.
## Installation
```sh
npm install react-audio-visualize
```
## **AudioVisualizer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-kjpu5q?file=src%2FApp.tsx))
```js
import React, { useState, useRef } from 'react';
import { AudioVisualizer } from 'react-audio-visualize';
const Visualizer = () => {
const [blob, setBlob] = useState();
const visualizerRef = useRef(null)
// set blob somewhere in code
return (
{blob && (
)}
)
}
```
| Props | Description | Default | Optional |
| :------------ |:--------------- |:--------------- | :--------------- |
| **`blob`** | Audio blob to visualize | N/A | No |
| **`width`** | Width of the visualizer | N/A | No |
| **`height`** | Height of the visualizer | N/A | No |
| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |
| **`gap`** | Gap between each bar in the visualization | `1` | Yes |
| **`backgroundColor`** | BackgroundColor for the visualization | `transparent` | Yes |
| **`barColor`** | Color for the bars that have not yet been played | `"rgb(184, 184, 184)""` | Yes |
| **`barPlayedColor`** | Color for the bars that have been played | `"rgb(160, 198, 255)""` | Yes |
| **`currentTime`** | Current time stamp till which the audio blob has been played. Visualized bars that fall before the current time will have `barPlayerColor`, while that ones that fall after will have `barColor` | N/A | Yes |
| **`style`** | Custom styles that can be passed to the visualization canvas | N/A | Yes |
| **`ref`** | A `ForwardedRef` for the `HTMLCanvasElement` | N/A | Yes |
---
## **LiveAudioVisualizer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-kjpu5q?file=src%2FApp.tsx))
```js
import React, { useState } from 'react';
import { LiveAudioVisualizer } from 'react-audio-visualize';
const Visualizer = () => {
const [mediaRecorder, setMediaRecorder] = useState();
// set media recorder somewhere in code
return (
{mediaRecorder && (
)}
)
}
```
| Props | Description | Default | Optional |
| :------------ |:--------------- |:--------------- | :--------------- |
| **`mediaRecorder`** | Media recorder who's stream needs to visualized | N/A | No |
| **`width`** | Width of the visualizer | `100%` | Yes |
| **`height`** | Height of the visualizer | `100%` | Yes |
| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |
| **`gap`** | Gap between each bar in the visualization | `1` | Yes |
| **`backgroundColor`** | BackgroundColor for the visualization | `transparent` | Yes |
| **`barColor`** | Color for the bars that have not yet been played | `"rgb(160, 198, 255)"` | Yes |
| **`fftSize`** | An unsigned integer, representing the window size of the FFT, given in number of samples. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize) | `1024` | Yes |
| **`maxDecibels`** | A double, representing the maximum decibel value for scaling the FFT analysis data. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/maxDecibels) | `-10` | Yes |
| **`minDecibels`** | A double, representing the minimum decibel value for scaling the FFT analysis data, where 0 dB is the loudest possible sound. For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/minDecibels) | `-90` | Yes |
| **`smoothingTimeConstant`** | A double within the range 0 to 1 (0 meaning no time averaging). For more [details](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/smoothingTimeConstant) | `0.4` | Yes |