This is a simple Next.js audio visualizer that allows users to input music from their PC and change the background image. It also includes a music controller to manage the audio.
This project is not yet optimized for mobile devices.
https://adaptbit-audio.netlify.app/
- Input music from PC
- Change background image
- Music controller
Clone the repository. Install the dependencies:
npm installStart the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen the application in a web browser:
http://localhost:3000Click the "Browse File" to input music/drop it from your PC.
You can drop image to all area beside music drop zone on the left to change the background image.
Use the music controller to play, pause, stop, skip, shuffle and rewind the audio.
If you want to contribute to this project, please read the contributing guidelines.
This project is licensed under the MIT license.
The audio visualizer is built with Web Audio API.
The default background image is defaultBackground.jpg, which is located in the /public directory.
If the audio visualization is not working, make sure that the music file is in a supported format (MP3, WAV, FLAC, AAC, OGG).
If the background image is not showing up, make sure that the image file is in a valid format (PNG, JPG, JPEG).
I hope this README.md file is helpful. Please let me know if you have any questions or feedback.