# react-audio-visualize > An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs. Latest version **1.2.0** (published 2024-09-07) · MIT license · 0 weekly downloads ## Install ```sh npm install react-audio-visualize pnpm add react-audio-visualize yarn add react-audio-visualize bun add react-audio-visualize ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.0 | | Published | 2024-09-07 | | First published | 2023-06-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 54.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 185 | | Author | Samhir Tarif | | Maintainers | samhirtarif | | Keywords | audio, visualize, visualise, visualizer, visualiser, audio visualiser, audio visualizer, audio visualize, audio visualise, audio waveform, waveform, audio visualization, visualization, live visualize | ## Links - npm: https://www.npmjs.com/package/react-audio-visualize - Repository: https://github.com/samhirtarif/react-audio-visualize - Homepage: https://github.com/samhirtarif/react-audio-visualize#readme - Issues: https://github.com/samhirtarif/react-audio-visualize/issues - npm.io page: https://npm.io/package/react-audio-visualize ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.2.0 (latest) — 2024-09-07 - 1.1.3 — 2023-07-10 - 1.1.2 — 2023-07-08 - 1.1.1 — 2023-07-08 - 1.1.0 — 2023-06-17 - 1.0.0 — 2023-06-06 - 0.0.4 — 2023-06-06 - 0.0.3 — 2023-06-06 - 0.0.2 — 2023-06-06 - 0.0.1 — 2023-06-06 ## 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)) ![screenshot](./assets/AudioVisualizer.png) ```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)) ![livevisualizergif](./assets/LiveAudioVisualizer.gif) ```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 | --- _Source: https://npm.io/package/react-audio-visualize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._