I am a person who loves watching anime during the weekends. Since they are not many anime online music players (like spotify is for the general songs), I thought about making my own anime music player. Since I registered for the ICHack 2019, I decided to actually create it and develop it under my social network "KukaAcademy" (a different story) It has been a thing I wanted to do for a long time.

What it does

In Anime Ongaku, as the name suggest (Ongaku == "Music" in japanese) , people can listen to songs they like any time they prefer. There certainly isn't a wide range of songs they can choose, however, the most famous songs (or so I think...) are available. In order to make it more unique, I also added Lyrics as a feature. However, not every song has a lyrics built in with it, since it is really time consuming to get the timing right. Lastly, which might not be that important, people who are registered with KukaAcademy can actually login to the Anime Ongaku website. However, currently here is not actual difference whether you are registered with KukaAcademy or not.

How I built it

Firstly, I started off with some sketching related to the page layout and design. Then once I settled that down, I started coding the frontend, particularly html and css. Then after that, I had a brief idea how the page will look like once everything is done. Then, I started using photoshop and getting anime images from google. I make each image with a ratio of 1x1 in order to keep the consistency. Then I downloaded the appropriate anime songs from the internet which would be associated with its own image. Once that was done, I thought of uploading the anime images and songs at Dropbox since, in that way, I can manage things easier and have more free memory as well :) After I sorted out DropBox, I started working on the mysql database. I initially had to experiment a bit in order to achieve a very "dynamic" database in which new songs could be added easy without having to change every table. Once the database was done, I then started to on JavaScript. I wrote simple JavaScript code before just to see how things work on when a button is clicked or how a modal would open, but this time I tried to make use of functions and classes and also use the live2D library. I also create a Lyrics class that reads the .lrc file, which holds the lyrics and the time duration of that particular sentence the singer will sing. And once I was done with that, the debugging began... >_< And finally I was finally done!

Challenges I ran into

There were actually some quite intense challenges I had to come across. One of them was using making use of JavaScript classes. Even though it was not necessary to use classes for such a project, I still felt the need to do it in order to overcome my weaknesses and improve further. I gotta admit, it was quite hard, especially when using the modules. Furthermore, It was a demanding project to do, since I was working alone. Also, the lyrics part was difficult too! I had to find a way to synchronise the song with the lyrics. Maybe it's hard because I had to listen every time the singer stop singing and record that timing (using javascript Audio.currentTime). And lastly, I didn't even have time to take a nap!

Accomplishments that I'm proud of

I am proud of everything I have done, from the top to the bottom. I am proud and at the same time excited about the fact that anything I can thing of creating, can become true. That also acts as a motivation influencer. I am proud that I can use multiple programming language together. And lastly, I am proud that I can now manage my code in a better manner by using classes in a more appropriate way!

What I learned

I learned a lot about how audio's actually work. Furthermore, I was able to implement some simple algorithm about sorting the playlists out, i.e when the user clicks a playlist, it will shuffle its songs. I also learned a lot about database relationships and about how a database can be normalised. In this case, I had to figure out how to make the database close to a 3nf database. It terms of CSS, I learned a bit more about the flexbox system. Lastly, but not least, I am using live2D library to make some 2D models interact with the user's actions. This was a pretty awesome journey that one does not usually experience.

What's next for Anime Ongaku

There will definitely need to be more songs. That's the primary thing! In addition, I have to add arrange lyric files for each song individually. I will also put a lot of work on the 2D models and add more features to it. Probably making them talk or adding more movement sprites or face expressions. And of course, as every music app out there, there should definitely be added features that allow the user to create their own playlists.

Share this project: