{"id":17499821,"url":"https://github.com/ej-shafran/react-sound-visualizer","last_synced_at":"2025-10-31T05:32:05.790Z","repository":{"id":65958411,"uuid":"603090935","full_name":"ej-shafran/react-sound-visualizer","owner":"ej-shafran","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-02T15:52:38.000Z","size":224,"stargazers_count":17,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T05:02:28.128Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ej-shafran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2023-02-17T15:45:38.000Z","updated_at":"2025-04-26T09:40:53.000Z","dependencies_parsed_at":"2023-10-03T02:57:53.230Z","dependency_job_id":"1690ed58-9b48-4b12-ba8f-2e5b27b85f2a","html_url":"https://github.com/ej-shafran/react-sound-visualizer","commit_stats":{"total_commits":96,"total_committers":4,"mean_commits":24.0,"dds":"0.22916666666666663","last_synced_commit":"2733cfba146e502fb1040ca19b6b1420a5c4b2b8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ej-shafran/react-sound-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ej-shafran%2Freact-sound-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ej-shafran%2Freact-sound-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ej-shafran%2Freact-sound-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ej-shafran%2Freact-sound-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ej-shafran","download_url":"https://codeload.github.com/ej-shafran/react-sound-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ej-shafran%2Freact-sound-visualizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262010800,"owners_count":23244409,"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":[],"created_at":"2024-10-19T18:00:40.388Z","updated_at":"2025-10-31T05:32:00.757Z","avatar_url":"https://github.com/ej-shafran.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-sound-visualizer\n\n## Description\n\nThis library acts as a lightweight React wrapper for [sound-visualizer](https://github.com/ej-shafran/sound-visualizer).\n\nYou can check it out by visiting [the codesandbox](https://codesandbox.io/s/react-sound-visualizer-demo-gi8uhd).\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install react-sound-visualizer\n```\n\n### Usage\n\nYou'll mainly want to use the `Visualizer` component (you can see more documentation for it below):\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { Visualizer } from 'react-sound-visualizer';\n\nfunction App() {\n  const [audio, setAudio] = useState\u003cMediaStream | null\u003e(null);\n\n  useEffect(() =\u003e {\n    navigator.mediaDevices\n      .getUserMedia({\n        audio: true,\n        video: false,\n      })\n      .then(setAudio);\n  }, []);\n\n  return (\n      \u003cVisualizer audio={audio}\u003e\n        {({ canvasRef, stop, start, reset }) =\u003e (\n          \u003c\u003e\n            \u003ccanvas ref={canvasRef} width={500} height={100} /\u003e\n\n            \u003cdiv\u003e\n              \u003cbutton onClick={start}\u003eStart\u003c/button\u003e\n              \u003cbutton onClick={stop}\u003eStop\u003c/button\u003e\n              \u003cbutton onClick={reset}\u003eReset\u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/\u003e\n        )}\n      \u003c/Visualizer\u003e\n  );\n}\n\nexport default App;\n```\n\nIf you need even more control over the visualization, the `useVisualizer` hook (used by `Visualizer` behind the scenes) is also exported.\n\n## Documentation\n\n### Components\n\n#### Visualizer\n\n##### Props\n\n| **Prop**        | **Type**                                   | **Default**    | **Explanation**                                                                                                                                                                                                                                                                |   |\n|-----------------|--------------------------------------------|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---|\n| **audio**       | `MediaStream \\| null`                      |                | The audio to visualize. Can be `null` since usually that's how your state will be initialized, but note that the functions will not be defined while it is `null`.                                                                                                             |   |\n| **children**    | `React.FC`                                 |                | See **Types** section below.                                                                                                                                                                                                                                                   |   |\n| **mode**        | `\"current\" \\| \"continuous\"`                | `\"continuous\"` | The visualizer version to use. You can check out the [sound-visualizer](https://github.com/ej-shafran/sound-visualizer) docs to learn more about what each version means.                                                                                                      |   |\n| **lineWidth**   | `number \\| \"thin\" \\| \"thick\" \\| \"default\"` | `\"default\"`    | The width of each line drawn onto the canvas for the visualization.    If a thickness string is provided, it will be translated into a percentage of the canvas's width; if a number is provided it will be used a `px` value.                                                 |   |\n| **strokeColor** | `string`                                   | `\"#000\"`       | The color of each line drawn onto the canvas for the visualization.                                                                                                                                                                                                            |   |\n| **autoStart**   | `boolean`                                  | `false`        | When set to `true`, the `start` function will be called as soon as the `audio` is available.                                                                                                                                                                                   |   |\n| **slices**      | `number`                                   | `100`          | The number of slices drawn onto the canvas to make up the wave.    *Only available as a prop when `mode` is `\"continuous\"`*                                                                                                                                                    |   |\n| **heightNorm**  | `number`                                   | `1`            | A number used to normalize the height of the wave; the wave function is multiplied by this number, so a number larger than 1 will exaggerate the height of the wave, while a number between 0 and 1 will minimize it.    *Only available as a prop when `mode` is `\"current\"`* |   |\n\n\n### Hooks\n\n#### useVisualizer\n\n```typescript\nexport function useVisualizer(\n    audio: MediaStream | null,\n    canvas: HTMLCanvasElement | null,\n    options?: UseVisualizerOptions\n): Partial\u003cVisualizerFunctions\u003e;\n```\n\nThe `useVisualizer` hook acts as a simple wrapper for both the `currentVisualizer` and `continuousVisualizer` functions from\n`sound-visualizer`, which allows the user to pass `null` for the `audio` and `canvas` parameters\nand returns an empty object if `null` is passed for either.\nIt also wraps the `VisualizerFunctions` that are returned in a `useMemo` hook.\n(*Note:* if you would rather not use a memo, you can directly use the `visualizerWrapper` function)\n\n### Types\n\n#### VisualizerChildrenProps\n\n```typescript\nexport interface VisualizerChildrenProps {\n  canvasRef: (canvas: HTMLCanvasElement) =\u003e void;\n  start?: () =\u003e void;\n  stop?: () =\u003e void;\n  reset?: () =\u003e void;\n}\n```\n\nThe `Visualizer`'s `children` prop must be a function that returns a `ReactNode`.\nThe `canvasRef` must be passed as the `ref` prop to an HTML `canvas` element,\n*or else the visualizer will not draw anything!*\n\n#### UseVisualizerOptions\n\n```typescript\nexport type UseVisualizerOptions =\n    | { mode: \"current\" } \u0026 DrawCurrentOptions\n    | { mode?: \"continuous\" \u0026 DrawContinuousOptions\n```\n\nWhere `DrawCurrentOptions` and `DrawContinuousOptions` are the types from `sound-visualizer`.\n\n## Notes\n\nThe `visualizerWrapper` function, used internally by `useVisualizer`, is exposed for convenience.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fej-shafran%2Freact-sound-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fej-shafran%2Freact-sound-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fej-shafran%2Freact-sound-visualizer/lists"}