{"id":16317415,"url":"https://github.com/samhirtarif/react-audio-visualize","last_synced_at":"2025-04-09T05:11:11.415Z","repository":{"id":172913718,"uuid":"645835880","full_name":"samhirtarif/react-audio-visualize","owner":"samhirtarif","description":"An audio visualizer for React. Provides separate components to visualize both live audio and audio blobs.","archived":false,"fork":false,"pushed_at":"2024-09-27T05:10:41.000Z","size":674,"stargazers_count":124,"open_issues_count":8,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T09:19:55.759Z","etag":null,"topics":["audio","audio-visual","audio-visualization","audio-visualizer","audio-waveform","audio-waveforms-visualization"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-audio-visualize","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samhirtarif.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-26T14:45:37.000Z","updated_at":"2025-03-27T15:10:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"84d21fcc-e1c7-4ae2-a68f-4654001ac4b9","html_url":"https://github.com/samhirtarif/react-audio-visualize","commit_stats":{"total_commits":18,"total_committers":6,"mean_commits":3.0,"dds":0.5555555555555556,"last_synced_commit":"e284411a8ffb304ef53802caea6f52db171524ef"},"previous_names":["samhirtarif/react-audio-visualize"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-visualize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-visualize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-visualize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-visualize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samhirtarif","download_url":"https://codeload.github.com/samhirtarif/react-audio-visualize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-visual","audio-visualization","audio-visualizer","audio-waveform","audio-waveforms-visualization"],"created_at":"2024-10-10T22:08:22.727Z","updated_at":"2025-04-09T05:11:11.397Z","avatar_url":"https://github.com/samhirtarif.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **react-audio-visualize**\nAn audio visualizer for React. Provides separate components to visualize both live audio and audio blobs.\n\n## Installation\n```sh\nnpm install react-audio-visualize\n```\n\n## **AudioVisualizer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-kjpu5q?file=src%2FApp.tsx))\n\n![screenshot](./assets/AudioVisualizer.png)\n\n```js\nimport React, { useState, useRef } from 'react';\nimport { AudioVisualizer } from 'react-audio-visualize';\n\nconst Visualizer = () =\u003e {\n  const [blob, setBlob] = useState\u003cBlob\u003e();\n  const visualizerRef = useRef\u003cHTMLCanvasElement\u003e(null)\n\n  // set blob somewhere in code\n\n  return (\n    \u003cdiv\u003e\n      {blob \u0026\u0026 (\n        \u003cAudioVisualizer\n          ref={visualizerRef}\n          blob={blob}\n          width={500}\n          height={75}\n          barWidth={1}\n          gap={0}\n          barColor={'#f76565'}\n        /\u003e\n      )}\n    \u003c/div\u003e\n  )\n}\n\n```\n\n| Props  | Description | Default | Optional |\n| :------------ |:--------------- |:--------------- | :--------------- |\n| **`blob`**  | Audio blob to visualize | N/A | No |\n| **`width`** | Width of the visualizer | N/A | No |\n| **`height`** | Height of the visualizer | N/A | No |\n| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |\n| **`gap`** |  Gap between each bar in the visualization | `1` | Yes |\n| **`backgroundColor`** |  BackgroundColor for the visualization | `transparent` | Yes |\n| **`barColor`** |  Color for the bars that have not yet been played | `\"rgb(184, 184, 184)\"\"` | Yes |\n| **`barPlayedColor`** |  Color for the bars that have been played | `\"rgb(160, 198, 255)\"\"` | Yes |\n| **`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 |\n| **`style`** |  Custom styles that can be passed to the visualization canvas | N/A | Yes |\n| **`ref`** |  A `ForwardedRef` for the `HTMLCanvasElement` | N/A | Yes |\n\n---\n\n## **LiveAudioVisualizer** Component ([Example](https://stackblitz.com/edit/stackblitz-starters-kjpu5q?file=src%2FApp.tsx))\n\n![livevisualizergif](./assets/LiveAudioVisualizer.gif)\n\n```js\nimport React, { useState } from 'react';\nimport { LiveAudioVisualizer } from 'react-audio-visualize';\n\nconst Visualizer = () =\u003e {\n  const [mediaRecorder, setMediaRecorder] = useState\u003cMediaRecorder\u003e();\n\n  // set media recorder somewhere in code\n\n  return (\n    \u003cdiv\u003e\n      {mediaRecorder \u0026\u0026 (\n        \u003cLiveAudioVisualizer\n          mediaRecorder={mediaRecorder}\n          width={200}\n          height={75}\n        /\u003e\n      )}\n    \u003c/div\u003e\n  )\n}\n\n```\n\n| Props  | Description | Default | Optional |\n| :------------ |:--------------- |:--------------- | :--------------- |\n| **`mediaRecorder`**  | Media recorder who's stream needs to visualized | N/A | No |\n| **`width`** | Width of the visualizer | `100%` | Yes |\n| **`height`** | Height of the visualizer | `100%` | Yes |\n| **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |\n| **`gap`** |  Gap between each bar in the visualization | `1` | Yes |\n| **`backgroundColor`** |  BackgroundColor for the visualization | `transparent` | Yes |\n| **`barColor`** |  Color for the bars that have not yet been played | `\"rgb(160, 198, 255)\"` | Yes |\n| **`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 |\n| **`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 |\n| **`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 |\n| **`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 |\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamhirtarif%2Freact-audio-visualize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamhirtarif%2Freact-audio-visualize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamhirtarif%2Freact-audio-visualize/lists"}