Skip to content

This is a repository to show you, how to visualise the audio wave when user speak in mic.

Notifications You must be signed in to change notification settings

GreatHayat/audio-wave-visualisation

Repository files navigation

demo

Audio Visualization

This project utilizes HTML5 canvas and JavaScript to create a real-time audio visualization that reacts to microphone input. The visualization consists of vertical bars that dynamically change height based on the audio signal's frequency data.

Features

  • Real-time Visualization: Bars react instantly to audio input from the microphone.
  • Dynamic Bar Height: Each bar's height is determined by the frequency data of the audio signal.
  • Animation: Includes animation effects when the microphone is active but the user is not speaking.
  • Responsive Design: The visualization adapts to different screen sizes.

Installation

No installation is required for this project. Simply open the any html file i.e. index.html file in a web browser that supports HTML5 and audio input from the microphone.

Usage

  1. Ensure your device has a microphone.
  2. Open index.html in your web browser.
  3. Grant permission for the browser to access your microphone.
  4. Speak into the microphone and observe the bars react to your voice.

Contributing

Contributions are welcome! For major changes, please open an issue first to discuss what you would like to change.

About

This is a repository to show you, how to visualise the audio wave when user speak in mic.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages