These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
You did it! You have (presumably) pieced together an aesthetically-tolerable design. I am going to assume that you are tremendously proud of yourself. Congratulations.
Yet our task is not yet complete. We cannot usher in the next era of music consumption with static HTML. Were we to publish the project as it stands, the only music our users would hear would be the anxious staccato of their own fruitless clickery as they attempt to find life in your dead, dead markup. And while that frantic clicking might be objectively better than about 30% of actual Royalty Free Music, our users would be too grief-stricken to appreciate that.
So now is the time to sprinkle life-giving JavaScript over your layout. This is no easy task. You will have to do some research on your own, particularly in regards to dealing with audio. It should not be too difficult to Google the relevant information (“HTML5 Audio”, “Controlling Audio with JavaScript”, “JavaScript Audio API”, etcetera). See if you can find some docs on the browser’s audio API, then experiment in the console and try to get something working. If you're having trouble, you will able to find many tutorials that walk you through it.
Researching and experimenting with a new APIs and concepts is one of the most important aspects of a programmer’s life. In programming, learning is a never-ending process. And, to that effect, always contingent on your Google-Fu. The first step to Googling well is actually Googling. Upon greeting a seemingly insurmountable problem, many people choose to simply welter in it. You must be mindful, cease your thrashing, and turn to the great search engines of the interwebs.
So now that you know that all training wheels are off, let's catalog the features you will need to implement. But first, it could be helpful to take a look at this moving mockup. While the mockup video is clearly lacking the key element of sound, it successfully demonstrates the required user interactions. So here is what we will need.
This list might not be exhaustive, but it's already making our application look more daunting than it truly is, so use your judgment to deal with any remaining ambiguities. Also, feel free to consult your favorite music player if you reach an impasse.
If you're in need of some Royalty Free Music to seed your player, check out the Free Music Archive. And pay no mind to its apparent similarities with our paradigm-transmogrifying vision. After all, it’s called the Free Music Archive, not the Royalty Free Music Archive. We shall not deign to consider its worth any longer.
On that note, it's time for you to head out in the world. Don't get yourself overwhelmed now. Remember to break down the problem into the simplest pieces. You can do this! Think with objects; think with functions. Good luck out there, kiddo!