The MeloDisc component is a highly customizable music visualizer built with functional React components and TypeScript. It leverages the WebAudio API for audio analysis and the HTML Canvas API for audio visualization, offering a rich set of input props to tailor the component according to individual requirements. This makes it the first NPM music visualizer of its kind.
The MeloDisc component accepts a wide range of input props, including audio source, center image, rotation, and various parameters related to bar and circle visualization. These props enable users to modify the visualizer's appearance, such as the number of bars, bar width, bar height multiplier, bar color, and more.
Upon initialization, the component sets up the audio context and audio source using the provided audio reference. It also sets up an audio analyzer with the desired FFT size and smoothing time constant. The component utilizes useEffect hooks to manage side effects like setting up the audio context, connecting the audio source to the analyzer, and updating color interpolation arrays based on the provided bar color prop.
The drawSpectrum function is responsible for drawing the audio visualization on the canvas. It calculates bar heights using the frequency data obtained from the analyzer and renders them around a circle with optional rotation and bounce effects. The component supports color interpolation for bars, as well as custom colors and images for the center of the visualization.
In summary, the MeloDisc component is an innovative and versatile music visualizer built using React and TypeScript. It provides extensive customization options to users while leveraging powerful web APIs for audio analysis and visualization. This makes it an excellent addition to any portfolio website, showcasing both technical prowess and a creative approach to web development.
The MeloDisc component is a highly customizable music visualizer built with functional React components and TypeScript. It leverages the WebAudio API for audio analysis and the HTML Canvas API for audio visualization, offering a rich set of input props to tailor the component according to individual requirements. This makes it the first NPM music visualizer of its kind.
The MeloDisc component accepts a wide range of input props, including audio source, center image, rotation, and various parameters related to bar and circle visualization. These props enable users to modify the visualizer's appearance, such as the number of bars, bar width, bar height multiplier, bar color, and more.
Upon initialization, the component sets up the audio context and audio source using the provided audio reference. It also sets up an audio analyzer with the desired FFT size and smoothing time constant. The component utilizes useEffect hooks to manage side effects like setting up the audio context, connecting the audio source to the analyzer, and updating color interpolation arrays based on the provided bar color prop.
The drawSpectrum function is responsible for drawing the audio visualization on the canvas. It calculates bar heights using the frequency data obtained from the analyzer and renders them around a circle with optional rotation and bounce effects. The component supports color interpolation for bars, as well as custom colors and images for the center of the visualization.
In summary, the MeloDisc component is an innovative and versatile music visualizer built using React and TypeScript. It provides extensive customization options to users while leveraging powerful web APIs for audio analysis and visualization. This makes it an excellent addition to any portfolio website, showcasing both technical prowess and a creative approach to web development.