CyberPunk Music Player 🎶

Description

Inspired by a love for cyberpunk aesthetics and audio visualizations, this project is a CyberPunk-themed music player built with React, utilizing the Web Audio API and Canvas to deliver an engaging audio experience. The player combines style with functionality, featuring standard controls like play, pause, next, previous, shuffle, repeat, and volume control.

This project also integrates an audio visualizer, which uses the Web Audio API and Canvas to create simple animated visuals that enhance the cyberpunk vibe.

Features

• Play/Pause: Start or pause the music
• Next/Previous: Skip forward or go back to the previous track
• Shuffle: Randomly play songs from the playlist
• Repeat: Loop the current song
• Volume Control: Adjust the volume level
• Audio Visualization: Animated visual effects based on the audio

Project Overview

This project was built based on the tutorial by TropicolX.

Technologies Used

• React: Core framework for building the user interface
• Vite: A fast development server and build tool
• Web Audio API: For enhanced audio functionality and analysis
• Canvas: Used for rendering audio visualizations

Installation

To run this project locally:

1. Clone the repository:

   git clone https://github.com/adgpt/Cyberpunk-Music-Player.git

2. Navigate to the project directory:

   cd cyberpunk-music-player

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

   Your app should now be running on http://localhost:3000.

Usage

1. Open the app in your browser.
2. Load a playlist (if applicable) and click the play button to start the audio.
3. Adjust the volume and use the visualized controls to interact with the player.