Music Player with Three.js

Getting Started with Three.js

Image for post
Image for post

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.

Image for post
Image for post

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


Written by

{ coding for something beautiful } algorithmic art, data visualization, aesthetic computing & digital poetry.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store