JukeBox
Using JavaScript and the iTunes API to create a music player
Spring 2023
Project Overview
For this project, the goal was to create a website that allowed the user to access some preview clips from the songs in the iTunes API. I used HTML, CSS, and JavaScript to make this possible. The resulting project was a music player which could search for preview clips from any of the songs in the iTunes API and display them alongside some other information.
The Challenge
My goal for this project was to create a jukebox that had a distinctive aesthetic in addition to a fully functional music player that pulled from the iTunes Library. This project allowed me to spend more time working with JavaScript. I had only used API calls with Java in a previous course, so implementing the same process in JavaScript was the main challenge. Furthermore, I wanted there to be several stages to the website rather than having all of the functionality available on the page right as the user entered.
The Solution
I began by selecting my components and a color palette. I wanted a summery and bright palette, so I chose one that I used Canva to edit the components and help the elements of my page come together. Then I began structuring the page using HTML and CSS. Some of the challenges that arose here included the animation of the clouds at the top of the screen, as well as adjusting the position of the button component as it increased and decreased on a hover.
Furthermore, I wanted to make the button deactivate as the user progressed to the next screen which contained the search bar. This involved a significant amount of work figuring out how the z-index values of the components interacted with each other on the page. Moreover, I wanted each of these items to work flawlessly despite any window resizing that the user may do, which proved to be more challenging than simply adding flex to my components.
Adding the button and changing the z-indexes of the various components helped me accomplish what I had initially wanted with the feel of multiple “stages” to the website. I also wanted the user to be able to return to their previous search results after hitting the “back” button, which I was able to accomplish by changing when the results array cleared.
The main challenges in the JavaScript portion were the animation of the clouds and the API call. I was able to figure out the clouds by referencing a previous project and doing some math to adjust the intervals to the size of the new image. For the API call, I referenced the official iTunes API documentation and followed their instructions. After the query results had been put into JSON format, it was simple to display the results in the format that I wanted.
Results
The project was really successful overall, as it ended up with all the intended functionality. It taught me that structuring a website, the way that I specifically wanted, was much more difficult than I thought. I wanted to play full songs instead of preview clips, but I found that the iTunes API did not support that, so in the future, I would like to find an API that would allow me to do that. I have a couple of other ideas for future iterations, including a feature that would allow the user to create named playlists with their songs. Eventually, I would like to add user profiles to it, though that is quite ambitious.
The main lesson that I learned was that persistence is key when putting together such a website. Each step took several iterations until I was happy with the results, but it was worth it in the end.
