https://github.com/greathayat/audio-wave-visualisation

This is a repository to show you, how to visualise the audio wave when user speak in mic.
https://github.com/greathayat/audio-wave-visualisation

audio-visualizer audio-wave wave-visualisation

Last synced: about 7 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/greathayat/audio-wave-visualisation
• Owner: GreatHayat
• Created: 2024-07-17T09:22:00.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-18T14:17:24.000Z (4 months ago)
• Last Synced: 2024-07-18T17:59:34.715Z (4 months ago)
• Topics: audio-visualizer, audio-wave, wave-visualisation
• Language: HTML
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![demo](https://github.com/user-attachments/assets/9f14a577-11fe-47a5-9277-4d77aa123c53)

---

# 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.