Visicality is a music visualizer web application utilizing Web Audio API and D3.js to create real-time imagery corresponding to attributes of simultaneously playing audio. Users are able to select a local audio files from their own device to use with this application.
Visicality offers users a highly customizable experience through a diverse selection of visualizer designs and color palettes. Addtionally, users are able to adjust the colors and direction of the background color gradient.
Note: This project's UI / UX is optimized for desktop browsers.
Visicality utilizes the following technologies:
JavaScript, as the primary programing language for this projectWeb Audio API, for persistent processing of audio files, and extraction of frequency and waveform dataD3.js Library, to meticulously craft and render a collection of widely distinct visualizersVite, a modern frontend development toolFullscreen API, to seemlessly enter in-and-out of a full-screen mode while in browser
- A polished audio player stored at the bottom of the application allows users to interact with:
- A play/pause button
- A file input button to select a locally stored audio file
- Various information about the selected audio file including the file's name, how many minutes have progressed in playback, and how many minutes are left
- A progress bar to show the current position of the audio's playback, as well as allowing the adjustment of the audio's current position when clicked
- A button to enter in and out of a full-screen mode with usage of Fullscreen API
- The ablity to adjust the gain (volume) of audio through Web Audio API's GainNode interface, and see the adjustments reflected accordingly in visualizations
- A robust set of on-screen controls and keyboard shortcuts, to adjust audio playback and visualizer settings
- An intuitive, stylized, and responsive UI/UX, which automatically hides when audio is playing and no mouse movement is detected
- Wide usage of tooltips when hovering over content, to offer explainations on what actions occur when clicking specific areas
- Two modals - one offering an informational overview of the project, and another explaining the various keyboard shortcuts
- A dynamic favicon that automatically adjusts to match the currently background color gradient in the application
- Further real-time manipulation of audio through Web Audio API
- Usage of a user's microphone for real-time audio input
- Custom color palettes for visualizer
- Utilize third-party audio APIs (i.e. Spotify API, Apple's MusicKit JS API, etc.) to allow users to select audio from souces other than their local device
- Brief educational component to explore the science of sound, and how it is reflected in the visualizations