MV - Music Visualizer App Documentation

Overview

MV (Music Visualizer) is a web-based application designed to transform music into visually engaging, real-time graphics. Built using the p5.js library and its sound module, the application allows users to upload music files and optional background images. It then visualizes the audio by animating particles and shapes that react to the music's frequency and amplitude.

Features

• Music Upload: Upload .mp3 audio files to generate visualizations.

• Custom Background Image: Upload custom background images (.jpg, .png).

• Real-Time Audio Analysis: Uses FFT and amplitude analysis for dynamic visualization.

• Interactive Canvas: Play/pause music by clicking on the canvas.

• Responsive Layout: Adapts to browser dimensions.

Technologies Used

1. p5.js

A JavaScript library for creative coding.

• Website: https://p5js.org

2. p5.sound

An add-on library that provides audio capabilities.

• Documentation: https://p5js.org/reference/#/libraries/p5.sound

3. HTML & JavaScript

Handles DOM manipulation and integration with external platforms (e.g., OutSystems).

How It Works

1. User Interface:

   • A container (HTML div) embeds the canvas.

   • Two file input elements allow users to upload audio and image files.

2. Initialization:

   • The sketch reads the provided container and inputs.

   • Canvas and audio context are created and configured.

3. Loading Assets:

   • loadSound() is used for the music file.

   • loadImage() for the background.

4. FFT Analysis:

   • An instance of p5.FFT() analyzes the audio signal.

   • Returns an array of frequencies used to animate visuals.

5. Drawing Loop:

   • draw() is called continuously to update the canvas.

   • Visual effects include radial shapes and particle systems that respond to audio.

6. Interaction:

   • Clicking toggles audio playback.

   • Canvas is auto-resized on window resize.

Libraries & Source Links

• p5.js: https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js

• p5.sound: https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js

• Tutorials:

  • p5.js + Audio: https://p5js.org/learn/sound.html

  • YouTube Visualizer Tutorial: YT-Link

Embedding into External Platforms (OutSystems)

• Define container ID and input element IDs.

• Pass those IDs as parameters to the visualizer script.

• Example:

  const config = {
    containerId: "VisualizerContainer",
    uploadWidId: "MusicUpload",
    imageUploadWidId: "ImageUpload"
  };
  new MVVisualizer(config);
  

File Structure

📁 MusicVisualizer
├── index.html            # HTML embedding and app entry point
├── mv-visualizer.js      # Core visualizer logic
├── mv-logo.png           # App icon/logo
├── assets/
│   ├── music.mp3         # Example music file
│   └── background.jpg    # Example image file

Future Enhancements

• Microphone input for live visualization.

• Visual customization (color, shape).

• Multiple visualization modes.

• Save visualization snapshots.

License

BSD-3 License.

Author

Developed by Vasudevan Natesan

For questions or contributions, feel free to reach out or fork the project.