|
| 1 | +# **react-audio-visualize** |
| 2 | +An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs. |
| 3 | + |
| 4 | +## Installation |
| 5 | +```sh |
| 6 | +npm install react-audio-visualize |
| 7 | +``` |
| 8 | + |
| 9 | +## **AudioVisualizer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-kjpu5q?file=src%2FApp.tsx)) |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +```js |
| 14 | +import React, { useState } from 'react'; |
| 15 | +import { AudioVisualizer } from 'react-audio-visualize'; |
| 16 | + |
| 17 | +const Visualizer = () => { |
| 18 | + const [blob, setBlob] = useState<Blob>(); |
| 19 | + |
| 20 | + // set blob somewhere in code |
| 21 | + |
| 22 | + return ( |
| 23 | + <div> |
| 24 | + {blob && ( |
| 25 | + <AudioVisualizer |
| 26 | + blob={blob} |
| 27 | + width={500} |
| 28 | + height={75} |
| 29 | + barWidth={1} |
| 30 | + gap={0} |
| 31 | + barColor={'#f76565'} |
| 32 | + /> |
| 33 | + )} |
| 34 | + </div> |
| 35 | + ) |
| 36 | +} |
| 37 | + |
| 38 | +``` |
| 39 | + |
| 40 | +| Props | Description | Default | Optional | |
| 41 | +| :------------ |:--------------- |:--------------- | :--------------- | |
| 42 | +| **`blob`** | Audio blob to visualize | N/A | No | |
| 43 | +| **`width`** | Width of the visualizer | N/A | No | |
| 44 | +| **`height`** | Height of the visualizer | N/A | No | |
| 45 | +| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes | |
| 46 | +| **`gap`** | Gap between each bar in the visualization | `1` | Yes | |
| 47 | +| **`backgroundColor`** | BackgroundColor for the visualization | `transparent` | Yes | |
| 48 | +| **`barColor`** | Color for the bars that have not yet been played | `"rgb(184, 184, 184)""` | Yes | |
| 49 | +| **`barPlayedColor`** | Color for the bars that have been played | `"rgb(160, 198, 255)""` | Yes | |
| 50 | +| **`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 | |
| 51 | +| **`style`** | Custom styles that can be passed to the visualization canvas | N/A | Yes | |
| 52 | + |
| 53 | +--- |
| 54 | + |
| 55 | +## **LiveAudioVisualizer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-kjpu5q?file=src%2FApp.tsx)) |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +```js |
| 60 | +import React, { useState } from 'react'; |
| 61 | +import { LiveAudioVisualizer } from 'react-audio-visualize'; |
| 62 | + |
| 63 | +const Visualizer = () => { |
| 64 | + const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(); |
| 65 | + |
| 66 | + // set media recorder somewhere in code |
| 67 | + |
| 68 | + return ( |
| 69 | + <div> |
| 70 | + {mediaRecorder && ( |
| 71 | + <LiveAudioVisualizer |
| 72 | + mediaRecorder={mediaRecorder} |
| 73 | + width={200} |
| 74 | + height={75} |
| 75 | + /> |
| 76 | + )} |
| 77 | + </div> |
| 78 | + ) |
| 79 | +} |
| 80 | + |
| 81 | +``` |
| 82 | + |
| 83 | +| Props | Description | Default | Optional | |
| 84 | +| :------------ |:--------------- |:--------------- | :--------------- | |
| 85 | +| **`mediaRecorder`** | Media recorder who's stream needs to visualized | N/A | No | |
| 86 | +| **`width`** | Width of the visualizer | `100%` | Yes | |
| 87 | +| **`height`** | Height of the visualizer | `100%` | Yes | |
| 88 | +| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes | |
| 89 | +| **`gap`** | Gap between each bar in the visualization | `1` | Yes | |
| 90 | +| **`backgroundColor`** | BackgroundColor for the visualization | `transparent` | Yes | |
| 91 | +| **`barColor`** | Color for the bars that have not yet been played | `"rgb(160, 198, 255)"` | Yes | |
| 92 | +| **`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 | |
| 93 | +| **`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 | |
| 94 | +| **`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 | |
| 95 | +| **`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 | |
| 96 | + |
| 97 | + |
| 98 | + |
0 commit comments