We saw a simple text MP3 that fascinated us to a new extent we decided to take on the challenge and flood it with your creativity. We have divided the project into two parts - 3D Music player and 2D Music player. On our way we encountered Three.js which helps in 3D rendering, it was simply amazing and we decided to embrace it. For the 2D world, we have used HTML5, CSS3, Javascript.

We chose our domain to be - "" although we couldn't host the site due to complexities with three.js and time constraints.

What it does

This music player let's you listen to around 20+ music/songs from different culture and ERA. It covers Roman music from the era of 45BCE, Retro Jazz Music from the 1900s, Old classical music from 1800s to 1950s and the modern Lofi Music.

Its Just another MP3 but with an out-worldly experience

  • Play music
  • Seek music +-30s
  • Jump to previous/next Track
  • Control volume
  • Keeps you entertained with stars
  • And a disco Ball at the center

How we built it

We used the Three.js library for our space experience

  • Stars
  • Disco Planet
  • Orbital control
  • Lights and their affect

Simple java script for our controls

  • Load music
  • Play/pause
  • Reduce volume
  • Seek tracks

Challenges we ran into

  • This was the first time we tried our hands at Three.js
  • We had never played around with the music in JS
  • Styling the environment required a shit in mindset as went 3D

Accomplishments that we're proud of

  • We learnt Three.js
  • Made our first 3D website
  • Built a really cool MP3 Player

What we learned

  • We learnt Three.js
  • Controlling music
  • Improved skills of HTML5, CSS3 and javascript.

What's next for Celestial Mp3

  • An all out 3D website
  • Something along the lines of jarvis from IronMan
  • Songs from different Eras and time periods.
  • Tracks from different diversities (Indian, African, Mexican, Western, Norwegian and songs & folklores from all around the world.
Share this project: