Activating the Controls

Giving life to the project by enabling the player's controls.

Scroll down...

Content

Resources

Comments

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.

The Challenges Ahead

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.

A More Specific Specification

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.

A list of songs with their names, artists, and sound URLs (the URLs will not be displayed, but are necessary for audio playback).
The user can start playing a track.
When the track is playing, one should actually be able to hear the track.
The currently playing track should somehow indicate that it is indeed the currently playing track.
Once a track is selected, it should appear in the status bar.
The track should remain in the status bar when it is paused.
The user can pause the currently playing track.
When the track is paused, one should not be able to hear the track—with the exception of auditory hallucinations caused by particularly catchy songs (though this is highly unlikely due to our reliance upon RFM).
The user can press the next and previous track buttons, and when they do this, the respective track should become the active track.
Any play/pause buttons should visually toggle between their play and pause states, depending upon the current state of the music player.

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.

Wrapping Up

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!

Keep Calm And