{"id":23388316,"url":"https://github.com/sujalxplores/react-audio-visualizer-pro","last_synced_at":"2025-04-11T06:28:30.864Z","repository":{"id":267146057,"uuid":"900384352","full_name":"SujalXplores/react-audio-visualizer-pro","owner":"SujalXplores","description":"React Audio Visualizer Pro is a powerful and customizable React library designed for real-time audio visualization. It supports multiple visualization types and audio sources, including audio files and microphone input.","archived":false,"fork":false,"pushed_at":"2024-12-13T16:17:30.000Z","size":174,"stargazers_count":4,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T09:44:53.050Z","etag":null,"topics":["canvas","npm-package","react","react-audio"],"latest_commit_sha":null,"homepage":"","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/SujalXplores.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}},"created_at":"2024-12-08T16:35:06.000Z","updated_at":"2025-03-07T13:00:34.000Z","dependencies_parsed_at":"2024-12-08T17:40:47.986Z","dependency_job_id":null,"html_url":"https://github.com/SujalXplores/react-audio-visualizer-pro","commit_stats":null,"previous_names":["sujalxplores/react-audio-visualizer","sujalxplores/react-audio-visualizer-pro"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SujalXplores%2Freact-audio-visualizer-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SujalXplores%2Freact-audio-visualizer-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SujalXplores%2Freact-audio-visualizer-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SujalXplores%2Freact-audio-visualizer-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SujalXplores","download_url":"https://codeload.github.com/SujalXplores/react-audio-visualizer-pro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248354057,"owners_count":21089748,"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":["canvas","npm-package","react","react-audio"],"created_at":"2024-12-22T02:18:48.115Z","updated_at":"2025-04-11T06:28:30.841Z","avatar_url":"https://github.com/SujalXplores.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"  \u003ch1\u003e🎧 React Audio Visualizer\u003c/h1\u003e\n  \n  \u003cp\u003e\n    \u003cstrong\u003eA customizable React package for real-time audio visualization, supporting multiple visualization types and audio sources\u003c/strong\u003e\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n    \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n    \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e •\n    \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e •\n    \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n  \u003c/p\u003e\n  \n  \u003c!-- Add badges here --\u003e\n  \u003cp\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/SujalXplores/react-audio-visualizer-pro?style=social\"/\u003e\n    \u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/SujalXplores/react-audio-visualizer-pro?style=social\"/\u003e\n    \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/SujalXplores/react-audio-visualizer-pro\"/\u003e\n    \u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/SujalXplores/react-audio-visualizer-pro\"/\u003e\n  \u003c/p\u003e\n\n## ✨ Features\n\n- 🎨 Multiple visualization types (waveform, frequency bars, circular)\n- 🎤 Support for both audio file playback and microphone input\n- ⚡️ Smooth animations with efficient canvas rendering\n- 📱 Fully responsive design\n- 📝 TypeScript support with complete type definitions\n- 🎨 Customizable styles, colors, and animations\n- 🔊 Built with Web Audio API for high-performance audio processing\n\n## 🛠️ Installation\n\n```bash\nnpm install react-audio-visualizer-pro\n# or\nyarn add react-audio-visualizer-pro\n```\n\n## Usage Examples\n\n### Basic Audio File Visualization\n\n```tsx\nimport { WaveformVisualizer } from 'react-audio-visualizer-pro';\n\nfunction App() {\n  return (\n    \u003cWaveformVisualizer\n      audioUrl=\"/path/to/audio.mp3\"\n      width={800}\n      height={200}\n      backgroundColor=\"#000000\"\n    /\u003e\n  );\n}\n```\n\n### Microphone Input with Frequency Bars\n\n```tsx\nimport { FrequencyVisualizer } from 'react-audio-visualizer-pro';\n\nfunction App() {\n  return (\n    \u003cFrequencyVisualizer\n      useMicrophone={true}\n      width={800}\n      height={200}\n      backgroundColor=\"#000\"\n      gradientColors={['#ff0000', '#00ff00', '#0000ff']}\n      barWidth={4}\n      barSpacing={1}\n      barRadius={2}\n    /\u003e\n  );\n}\n```\n\n### Circular Visualization with Custom Animation\n\n```tsx\nimport { CircularVisualizer } from 'react-audio-visualizer-pro';\n\nfunction App() {\n  return (\n    \u003cCircularVisualizer\n      audioUrl=\"/path/to/audio.mp3\"\n      width={800}\n      height={800}\n      backgroundColor=\"#000\"\n      animationSpeed={1.5}\n      barWidth={2}\n    /\u003e\n  );\n}\n```\n\n## API Reference\n\n### Common Props\n\nAll visualizer components accept these common props:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| audioUrl | string | undefined | URL to the audio file to visualize |\n| useMicrophone | boolean | false | Use microphone input instead of audio file |\n| width | number | 800 | Canvas width in pixels |\n| height | number | 200 | Canvas height in pixels |\n| backgroundColor | string | '#1a1a2e' | Background color of the visualizer |\n| gradientColors | string[] | ['#00bcd4', '#4CAF50', '#8BC34A'] | Array of colors for gradient effect |\n| barWidth | number | 3 | Width of visualization bars |\n| barSpacing | number | 2 | Spacing between bars (frequency only) |\n| barRadius | number | 0 | Border radius of bars (frequency only) |\n| smoothingTimeConstant | number | 0.8 | Audio analysis smoothing (0-1) |\n| fftSize | number | 2048 | FFT size for frequency analysis |\n| minDecibels | number | -90 | Minimum decibel value |\n| maxDecibels | number | -10 | Maximum decibel value |\n| animationSpeed | number | 1 | Animation speed multiplier (circular only) |\n\n### Component-Specific Features\n\n#### WaveformVisualizer\n- Displays audio waveform in real-time\n- Best for viewing audio amplitude over time\n- Smooth line rendering with customizable thickness\n\n#### FrequencyVisualizer\n- Shows frequency spectrum as vertical bars\n- Support for gradient colors\n- Customizable bar width, spacing, and radius\n\n#### CircularVisualizer\n- Circular frequency visualization\n- Rotating animation with adjustable speed\n- Radial gradient support\n\n## Development\n\n1. Clone the repository\n2. Install dependencies: `npm install`\n3. Build the package: `npm run build`\n4. Run tests: `npm test`\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsujalxplores%2Freact-audio-visualizer-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsujalxplores%2Freact-audio-visualizer-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsujalxplores%2Freact-audio-visualizer-pro/lists"}