top of page

Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started

Song Snippets

Anne Youn

I did the front and back end of song snippets.
1. I fetched preview song URLs from the Spotify API, then embedded in the source element of the audio tag code I wrote for the summary html file. If the URL is missing, the page returns a "No preview available" message.
2. My JavaScript code fetches the audio element and allows users to play or pause the song snippets present on the "top song" and "top 5 songs" slides. I added the button with its functionality.

NOTE:
Luckily we were able to demo the working code before the depreciation, but here are the specific GitHub commits for reference:
8bc690afd454567c696c4d7e60cbb7e473258482 (the WIP)
cd90cd16270bf8031269b9da6d682b4ce9519567(the final version)

My code feature relied on the (now-depreciated) endpoint to fetch the previews for the top artists’ songs and the top five songs.
The previews were embedded as <audio> elements in the slides, allowing users to play or pause them with buttons.
This interaction was implemented in the summary.js file and then integrated into the summary.html file to apply to the slides.

Since this API feature was depreciated, this functionality is no longer viable.
The slides just say the “no preview available” message I set up for cases where no previews are available.

bottom of page