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 3
tracks = 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 preview
let 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.