Case Study: Jamboree Jukebox
A music player webpage, built with Javascript, CSS, and HTML.
PROJECT DATE: October 2023
OVERVIEW
For my Advanced Web Development course, we were given a sample of code that displayed a button that would play music when clicked, along with a progress bar and the ability to download the song. We then were tasked to build a “jukebox”- a fully-functional page that, through our own creative direction, allows the user to play music. I decided to utilize my own playlists and allow people to select songs from a collection.
Tools used: Javascript, HTML, CSS, Procreate, Music API (made by professor for class)
THE CHALLENGE
Because I had no prior experience with Javascript before this class, all attempts I made to expand beyond the bare bones of class assignments were purely from trial and error. I quickly found that making a dropdown list for the songs was going to be my biggest hurdle because the starter code tied all potential songs to a single player button in the HTML sheet.
The “tune” variable sets the value of the function to songs that are labelled “tune”. But how do these songs get this label?
Because the starter code provides one function, all of the songs I would want to play from it would have to be in a single category. I wanted to do something completely different from this!
THE SOLUTION
My professor, Emuel Aldrige, helped me out because he was happy that I was thinking of utilizing dropdown lists, which he said he hadn’t witnessed before for this project. Through his guidance, I determined that each playlist would have its own function that performed the same actions.
Each of the three playlists were then tied to its own list container in HTML, which I designed to generate three evenly-spaced columns. The separation was made possible by assigning each player function to a unique id, which aligned with their <select> elements in the HTML sheet.
The functions each generated a player button using <audio>, in the #juke div. Although it appears that a single button is being activated each time a song is selected, the code actually generates a new button in the exact same space. Let’s look closer at this specific code snippet:
document.querySelector(‘#juke’).innerHTML = “<audio controls autoplay src=” + thesong + “ type = ‘audio/m4a’></audio>”
The “thesong” variable being reused is what enables the songs from other playlists to be replaced from the #juke div each time a new song is selected. In addition, the fact that I used “=” instead of “+=” ensures that only one song is played at a time when selected. If I incremented it, all of the songs from the selected playlist would play after each other.
RESULTS
I built three separate arrays for each playlist. Each array had multiple series of objects, each with song name, artist, and music file strings. Each playlist array was assigned to its own dropdown list, which generated all of its songs at once using this code snippet:
<option value=” + playlists.playlist1[i].audiofile + “>”
I then incremented the values of the songs using i++, to ensure that the list would display all of the values rather than a single song.
I used the same names of 3 of my real playlists, and added a handful of songs from each of them! If I were to ever expand on this project in the future, I would want to try having the player button have a pause, skip, and back option, as well as displaying other attributes above it, such as repeating the song title and artist, as well as the album it belongs to.
When listening to a song on Spotify, especially album singles, often times the screen will display a short animation clip or GIF that represents the artist’s work.
I used that tactic to create my own GIF :) I used Animation Assist on Procreate to create a StopMotion animation of me on the train!
Another similar example of this style is the infamous Lo-Fi Beats playlist, which is known by everyone my age because of its popularity and extremely long duration.
