Jam Map: Find music with the same feel
Jam Map is a simple web app that finds music based on user chosen BPM, year of release, genre, key (a feature for another day), and country of origin. Given the users’ input, the app first finds music by BPM through GetSongBPM’s API, then those results are further filtered through using the rest of the user input. Using the artist and song name, we could use iTunes for links to cover art and 30 second samples to add to the results. The basic idea is to use the musical properties of a song and the categories assigned to them to find music with similar feeling. Alongside
and Peter Consagra (), I helped design this app by working with the iTunes API, and here I detail the learning experience, which could possibly help someone else using their API.Using JSONP to get iTunes data
The naive approach (easily avoided by not skimming iTunes API docs) is to try a basic fetch using Javascript. In not much time, anyone (the caller) taking this approach will run into issues with same-origin policies which restrict the data from being sent back to the caller. After a lot of head and chin scratching, you might find by Google search, or just by looking at iTunes docs, that they recommend creating script tags sourced to the URL you would normally use in a fetch:
<script src="https://.../search?parameterkeyvalue&callback={callback function}"></script>.This, as described in Wikipedia, is considered an old technique called JSONP that is a workaround (some call a hack) to issues with retrieving data from another domain. The URL also includes a parameter set to a callback function the programmer has to define with an argument to handle the data. The implementation involved creating these tags in Javascript, placing them in the DOM, then getting the data. Simple! Well, when you require making more than one request and require associating that data to data from another API, things may get mixed up due to the inherent asynchronicity in API calling. This appeared as a bug in our results where cover art for Michael Jackson would appear over Ozzy Osborne’s name. It now makes sense why Javascript fetches return promises and are handled a bit differently than without waiting for a response. (For a better understanding than I can give, this site also helps with learning why this JSONP works.)
Ajax to handle multiple calls to iTunes
More searching on Google would reveal that other people have encountered the issue of trying to sync instances of function calls to data coming back from an API. A nice way to handle this is to use Ajax which has options (others not shown) to handle JSONP requests:
$.ajax({
url: apiUrl
datatype: 'jsonp'
}).done(function(response) {some code...})with the apiUrl being the same URL we would have used before, without the callback parameter. Ajax handles creating unique callback functions, so that the data ends up in the right place. With Ajax, the music cards on the Jam Map page have the proper cover art and music samples.
Things to improve
While it was nice to find a way to get data from iTunes in multiple ways, there are still things to work on to make the app work better, specifically on mobile devices. When using our app within Chrome dev tools in responsive design mode (iPhone6/7/8), the call to iTunes does not work and we are given the error net::ERR_UNKNOWN_URL_SCHEME followed by a 403 error. So far, there is no clear answer to why the response from iTunes is dependent on screen size.
Overall this was a fun project to work on. Thank you to Peter and Paul for being great teammates. I also want to acknowledge the invaluable support and resources provided by the UC Berkeley bootcamp during our time in the program so far.
