About two months or so ago I added a Now page to my site. It shows my current reading list, my last watched movies, my Untappd beer check-ins, and my most recent Spotify tracks. You can see that part here:
When I built it, I used a Pipedream workflow to wrap calls to Spotify’s API. My Pipedream workflow gets my most recent tracks, slims down the data quite a bit, and returns just what I need. I use some client-side code to hit that endpoint and then render it out on the Now page. (I also use a bit of caching with LocalStorage such that the endpoint is only hit every ten minutes.)
Currently, when rendering each track, I link to its URL and Spotify users can listen to the track completely. I thought it would be cool to let people preview the tracks right from the web page. Here’s how I did that.
Updating the "Back End" #
In my case, my back end is just the Pipedream workflow. As I mentioned, it hits the Spotify API and then transforms the data into something smaller before returning it. All I had to do was update that one step:
export default defineComponent({ async run({ steps, $ }) { return steps.get_recent_tracks.$ return_value.items.map(r => { return { artists: r.track.artists, name: r.track.name, href: r.track.external_urls.spotify, preview_url: r.track.preview_url, album: r.track.album.name, album_release_date: r.track.album.release_date, images: r.track.album.images, played_at:r.played_at } }) },})To be clear, this isn’t strictly necessary, I could simply return everything Spotify sends, but as it is sending a lot I don’t need, this small step really improves the performance of my API. As an example, here’s one result from Spotify (this is in an array of results):
{ "track": { "album": { "album_type": "album", "artists": [ { "external_urls": { "spotify": "https://open.spotify.com/artist/5HYNPEO2NNBONQkp3Mvwvc" }, "href": "https://api.spotify.com/v1/artists/5HYNPEO2NNBONQkp3Mvwvc", "id": "5HYNPEO2NNBONQkp3Mvwvc", "name": "Scott Bradlee's Postmodern Jukebox", "type": "artist", "uri": "spotify:artist:5HYNPEO2NNBONQkp3Mvwvc" } ], "available_markets": [ "AR", "AU", "AT", "BE", "BO", "BR", "BG", "CA", "CL", "CO", "CR", "CY", "CZ", "DK", "DO", "DE", "EC", "EE", "SV", "FI", "FR", "GR", "GT", "HN", "HK", "HU", "IS", "IE", "IT", "LV", "LT", "LU", "MY", "MT", "MX", "NL", "NZ", "NI", "NO", "PA", "PY", "PE", "PH", "PL", "PT", "SG", "SK", "ES", "SE", "CH", "TW", "TR", "UY", "US", "GB", "AD", "LI", "MC", "ID", "JP", "TH", "VN", "RO", "IL", "ZA", "SA", "AE", "BH", "QA", "OM", "KW", "EG", "MA", "DZ", "TN", "LB", "JO", "PS", "IN", "BY", "KZ", "MD", "UA", "AL", "BA", "HR", "ME", "MK", "RS", "SI", "KR", "BD", "PK", "LK", "GH", "KE", "NG", "TZ", "UG", "AG", "AM", "BS", "BB", "BZ", "BT", "BW", "BF", "CV", "CW", "DM", "FJ", "GM", "GE", "GD", "GW", "GY", "HT", "JM", "KI", "LS", "LR", "MW", "MV", "ML", "MH", "FM", "NA", "NR", "NE", "PW", "PG", "WS", "SM", "ST", "SN", "SC", "SL", "SB", "KN", "LC", "VC", "SR", "TL", "TO", "TT", "TV", "VU", "AZ", "BN", "BI", "KH", "CM", "TD", "KM", "GQ", "SZ", "GA", "GN", "KG", "LA", "MO", "MR", "MN", "NP", "RW", "TG", "UZ", "ZW", "BJ", "MG", "MU", "MZ", "AO", "CI", "DJ", "ZM", "CD", "CG", "IQ", "LY", "TJ", "VE", "ET", "XK" ], "external_urls": { "spotify": "https://open.spotify.com/album/5CUFurrJe05hnz189d5mDK" }, "href": "https://api.spotify.com/v1/albums/5CUFurrJe05hnz189d5mDK", "id": "5CUFurrJe05hnz189d5mDK", "images": [ { "height": 640, "url": "https://i.scdn.co/image/ab67616d0000b2735cb23d27338f4f3d848120ca", "width": 640 }, { "height": 300, "url": "https://i.scdn.co/image/ab67616d00001e025cb23d27338f4f3d848120ca", "width": 300 }, { "height": 64, "url": "https://i.scdn.co/image/ab67616d000048515cb23d27338f4f3d848120ca", "width": 64 } ], "name": "33 Resolutions Per Minute", "release_date": "2017-01-05", "release_date_precision": "day", "total_tracks": 18, "type": "album", "uri": "spotify:album:5CUFurrJe05hnz189d5mDK" }, "artists": [ { "external_urls": { "spotify": "https://open.spotify.com/artist/5HYNPEO2NNBONQkp3Mvwvc" }, "href": "https://api.spotify.com/v1/artists/5HYNPEO2NNBONQkp3Mvwvc", "id": "5HYNPEO2NNBONQkp3Mvwvc", "name": "Scott Bradlee's Postmodern Jukebox", "type": "artist", "uri": "spotify:artist:5HYNPEO2NNBONQkp3Mvwvc" }, { "external_urls": { "spotify": "https://open.spotify.com/artist/5tUXE5XK6VpNJj4LtxeI7W" }, "href": "https://api.spotify.com/v1/artists/5tUXE5XK6VpNJj4LtxeI7W", "id": "5tUXE5XK6VpNJj4LtxeI7W", "name": "Kenton Chen", "type": "artist", "uri": "spotify:artist:5tUXE5XK6VpNJj4LtxeI7W" } ], "available_markets": [ "AR", "AU", "AT", "BE", "BO", "BR", "BG", "CA", "CL", "CO", "CR", "CY", "CZ", "DK", "DO", "DE", "EC", "EE", "SV", "FI", "FR", "GR", "GT", "HN", "HK", "HU", "IS", "IE", "IT", "LV", "LT", "LU", "MY", "MT", "MX", "NL", "NZ", "NI", "NO", "PA", "PY", "PE", "PH", "PL", "PT", "SG", "SK", "ES", "SE", "CH", "TW", "TR", "UY", "US", "GB", "AD", "LI", "MC", "ID", "JP", "TH", "VN", "RO", "IL", "ZA", "SA", "AE", "BH", "QA", "OM", "KW", "EG", "MA", "DZ", "TN", "LB", "JO", "PS", "IN", "BY", "KZ", "MD", "UA", "AL", "BA", "HR", "ME", "MK", "RS", "SI", "KR", "BD", "PK", "LK", "GH", "KE", "NG", "TZ", "UG", "AG", "AM", "BS", "BB", "BZ", "BT", "BW", "BF", "CV", "CW", "DM", "FJ", "GM", "GE", "GD", "GW", "GY", "HT", "JM", "KI", "LS", "LR", "MW", "MV", "ML", "MH", "FM", "NA", "NR", "NE", "PW", "PG", "WS", "SM", "ST", "SN", "SC", "SL", "SB", "KN", "LC", "VC", "SR", "TL", "TO", "TT", "TV", "VU", "AZ", "BN", "BI", "KH", "CM", "TD", "KM", "GQ", "SZ", "GA", "GN", "KG", "LA", "MO", "MR", "MN", "NP", "RW", "TG", "UZ", "ZW", "BJ", "MG", "MU", "MZ", "AO", "CI", "DJ", "ZM", "CD", "CG", "IQ", "LY", "TJ", "VE", "ET", "XK" ], "disc_number": 1, "duration_ms": 255000, "explicit": false, "external_ids": { "isrc": "GBDMT1600258" }, "external_urls": { "spotify": "https://open.spotify.com/track/0E32W7S52AaR4ht7i7DwDq" }, "href": "https://api.spotify.com/v1/tracks/0E32W7S52AaR4ht7i7DwDq", "id": "0E32W7S52AaR4ht7i7DwDq", "is_local": false, "name": "Closer", "popularity": 48, "preview_url": "https://p.scdn.co/mp3-preview/62d19079487d6859ec9c587b8e87754424cabeca?cid=2feb4729ba5145d7a7fd92f2af83cf0d", "track_number": 1, "type": "track", "uri": "spotify:track:0E32W7S52AaR4ht7i7DwDq" }, "played_at": "2023-11-29T14:25:31.873Z", "context": { "type": "playlist", "href": "https://api.spotify.com/v1/playlists/37i9dQZF1DZ06evO3mw43S", "external_urls": { "spotify": "https://open.spotify.com/playlist/37i9dQZF1DZ06evO3mw43S" }, "uri": "spotify:playlist:37i9dQZF1DZ06evO3mw43S" }}Still here? Good. That’s huge, right? Here’s the transformed value:
{ "artists": [ { "external_urls": { "spotify": "https://open.spotify.com/artist/5HYNPEO2NNBONQkp3Mvwvc" }, "href": "https://api.spotify.com/v1/artists/5HYNPEO2NNBONQkp3Mvwvc", "id": "5HYNPEO2NNBONQkp3Mvwvc", "name": "Scott Bradlee's Postmodern Jukebox", "type": "artist", "uri": "spotify:artist:5HYNPEO2NNBONQkp3Mvwvc" }, { "external_urls": { "spotify": "https://open.spotify.com/artist/5tUXE5XK6VpNJj4LtxeI7W" }, "href": "https://api.spotify.com/v1/artists/5tUXE5XK6VpNJj4LtxeI7W", "id": "5tUXE5XK6VpNJj4LtxeI7W", "name": "Kenton Chen", "type": "artist", "uri": "spotify:artist:5tUXE5XK6VpNJj4LtxeI7W" } ], "name": "Closer", "href": "https://open.spotify.com/track/0E32W7S52AaR4ht7i7DwDq", "preview_url": "https://p.scdn.co/mp3-preview/62d19079487d6859ec9c587b8e87754424cabeca?cid=2feb4729ba5145d7a7fd92f2af83cf0d", "album": "33 Resolutions Per Minute", "album_release_date": "2017-01-05", "images": [ { "height": 640, "url": "https://i.scdn.co/image/ab67616d0000b2735cb23d27338f4f3d848120ca", "width": 640 }, { "height": 300, "url": "https://i.scdn.co/image/ab67616d00001e025cb23d27338f4f3d848120ca", "width": 300 }, { "height": 64, "url": "https://i.scdn.co/image/ab67616d000048515cb23d27338f4f3d848120ca", "width": 64 } ], "played_at": "2023-11-29T14:25:31.873Z"}Much slimmer. I could strip even more as I immediately see things I’m not using, but it’s good enough for now.
Coding the Preview #
My initial code simply took the result of the API and rendered out the individual track items. Here’s one example:
Initially, that code looked like so:
let tracks = await getTracks();// while we get 20, limit to 18 as we're doing rows of 3tracks = tracks.slice(0, 18);let s = '';tracks.forEach(t => { let artists = t.artists.map(a => a.name).join(', '); let html = `<div class="track"><a href="$ {t.href}" target="_new"><img src="$ {t.images[1].url}"></a><a href="$ {t.href}" target="_new">"$ {t.name}"</a> by $ {artists}</div> `; s += html;});document.querySelector('.tracks').innerHTML = s;I began by removing the link around the image and by adding in the preview URL. I used a data attribute for that:
<img src="$ {t.images[1].url}" data-preview="$ {t.preview_url}">Next, I needed to add event handlers to each track:
let music = document.querySelectorAll('div.track img');music.forEach(m => { m.addEventListener('click', e => { // stuff });});So far so good. Now for the tricky part. Playing music in JavaScript is incredibly simple. Given a URL that leads to supported audio, you can do:
let music = new Audio(theURL);music.play();My first implementation simply grabbed the URL:
let preview = e.currentTarget.dataset.preview;and did that – which led to me being able to click every rendered track and hear all the music playing at once in a god-awful mashup of epic proportions. To correct this, I had to get a bit fancy:
- If a person has clicked on track A, then track B, I should stop playing A
- If a person has clicked on track A, and then A again, they probably want to stop it.
Here’s how I did it:
// add event listener for music previewlet music = document.querySelectorAll('div.track img');let audio = new Audio();music.forEach(m => { m.addEventListener('click', e => { let preview = e.currentTarget.dataset.preview; if(audio.src) { audio.pause(); audio.currentTime = 0; if(audio.src === preview) { audio.src = ''; return; } } audio.src = preview; audio.play(); });});I basically just check the current src. If it matches, I stop (this is done with pause and setting the currentTime). If the "new" URL is the same as the last one, then I just leave. Otherwise, I load up the new song.
This worked perfectly until I realized an issue. If you click to preview track A, let it play and it finishes, if you click the same track, it wouldn’t start up. So I then added one more line of code:
audio.addEventListener('ended', e => { audio.src = '' });This now lets me listen to the same preview again and again… if I want to. If you want to see the complete code, just view source over on Now or see the repo version here: https://github.com/cfjedimaster/raymondcamden2023/blob/main/src/now.liquid.