{"repo":"AwesomeWebProjects/react-player","free":true,"listed":false,"github":"https://github.com/AwesomeWebProjects/react-player","clone":"git clone https://github.com/AwesomeWebProjects/react-player.git","description":"One audio player built with ReactJS, Web Audio API and Web Worker API","language":"TypeScript","stars":106,"topics":["reactjs","react","audio","audio-player","audio-visualizer","audio-analysis","audio-processing","javascript","stream","stream-processing"],"license":"MIT","category":"media-processing","readme_excerpt":"@awesome-web-projects/react-player A React audio player component with circular frequency visualization powered by the Web Audio API and Canvas. Listed on Awesome Audio Visualization. Layout inspired by Alex Permyakov's CodePen. Features - Circular audio frequency visualizer rendered on Canvas - Streaming audio loading via Web Workers for smooth playback - Partial loading — starts playing in seconds, preloads the full song in the background - Keyboard shortcuts (Space, N, B) - Configurable colors, volume, and visualization - Zero runtime dependencies (besides React and Lucide icons) - Full TypeScript support with exported types - CSS Modules for style isolation Installation Usage Props Prop Type Default Description ------ ------ --------- ------------- tracks Track[] required Array of tracks to play thread 'main' \\ 'worker' 'worker' Audio fetching strategy initialVolume number 0.5 Initial volume (0-1) enableKeyboard boolean true Enable keyboard shortcuts enableVisualization boolean true Enable canvas visualizer visualizerColor string 'rgba(97, 218, 251, 0.8)' Primary color for the visualizer className string — Additional CSS class onTrackChange (track, index) = void — Called when track changes onPlayStateChange (playing) = void — Called on play/pause onTimeUpdate (time, duration) = void — Called as playback progresses Track Keyboard Shortcuts Key Action ----- -------- Space Play / Pause N Next track B Previous track Development License MIT","default_branch":null,"files":null,"tree":[],"storefront":"/r/AwesomeWebProjects","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/AwesomeWebProjects/react-player/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}