Real-time music visualization in the browser
2021
NextJS / React
TailwindCSS
With this project I want to enable users to visualize music in real time in the browser.
This provides an interesting way to experience music in a different way and can also be used as a visual element for music performances or DJ sets.
Technologies used
I used a number of technologies to make this project work, including:
- Howler.js: A JavaScript library for controlling audio files in the browser.
- Butterchurn: A JavaScript library for creating audio visualizations.
- Next.js: A framework based on React
- Tailwind CSS: A CSS library with classes that can be quickly used for layout and design purposes.
- Vercel: A cloud-based hosting service for websites
Examples of the results
Here are a few examples of the kind of audio visualizations that can be created with my project:
Further links
To learn more about the project and try it out yourself, please visit https://music.janpoth.de.
There you will find more information and instructions on how to use the music visualizer.
- Lines of code
- 2,539
- Effects
- 472
About me
I'm a software developer from Germany. I've been working with software development for more than 12 years. I'm passionate about technology and I love to learn new things. I'm currently working as a senior software developer at a company called "Engel & Völkers Technology".