Music Player with Three.js
Getting Started with Three.js
I wrote this a while ago, as I was trying to create a real-time visual music piece. There were two leading tools to use: Three.js and Babylon.js. After reading some reviews, I chose Three.js. That was the time I started writing this story.
Three.js has a lot of good things, though, I do not like the routing in three.js to start a new project. I think there should be easier ways to do it. For that reason, I document a project setup here. To make it slightly meaningful, I use a music player as case study.
For simplicity, I just use one way to do it without going into the discussion of many other possibilities.
Setup a three.js project.
Create a directory namedsoundspace for the project, then create an HTML file in that directory. When we publish the final project, we need to rename the file toindex.html . Get the essential three.js files here, download from threejs.org if needed.
In the HTML file, create a basic scene as follows.
Music Player
Upload the sound file, then make a music player.
So that’s how you can get started in three.js.
Three.js vs Babylon.js
I do not mean to discourage any three.js users, as three.js was also my choice then. While working in three.js for a while, I find Babylon.js has more to offer. I will write about it in a separate story.
Meanwhile, if you are interested, take a quick look at their official site. Three or Babylon, is just another choice to make.
Cheers.
