Skip to content

derekwolpert/Visicality

Repository files navigation

vi·si·cal·i·ty (visual + musicality)

Visualizer Options

Background & Overview

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.

vi·si·cal·i·ty is currently live at visicality.derekwolpert.com - Click Here to check it out for yourself!

Note: This project's UI / UX is optimized for desktop browsers.

Color Options

Architecture & Technologies

Visicality utilizes the following technologies:

  • JavaScript, as the primary programing language for this project
  • Web Audio API, for persistent processing of audio files, and extraction of frequency and waveform data
  • D3.js Library, to meticulously craft and render a collection of widely distinct visualizers
  • Vite, a modern frontend development tool
  • Fullscreen API, to seemlessly enter in-and-out of a full-screen mode while in browser

Background Color Examples

Additional Features:

  • 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

Wireframe Proposal vs Final Layout

Wireframe Proposal Image

Final Layout Image

Potential Features to Implement in the Future

  • 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