The avatar for @asg017
Alex Garcia
Software engineer, available for freelance work! • he/him/his
Published
Edited
Aug 4, 2020
Importers
3 stars
Insert cell
Insert cell
Insert cell
spotify('playlist/37i9dQZF1DWZmwe0RTeFj4')
Insert cell
Insert cell
spotify('playlist/50WZOyol2BwAYJfZueOLul', 500, 80)
Insert cell
Insert cell
Insert cell
Insert cell
function spotify(id, width = defaultWidth, height = defaultHeight) {
if (id.indexOf('/') < 0) id = `album/${id}`;
return html`<iframe src="https://open.spotify.com/embed/${id}" width="${width}" height="${height}" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
}
Insert cell
function album(id, w, h) {
return spotify(`album/${id}`, w, h);
}
Insert cell
function playlist(id, w, h) {
return spotify(`playlist/${id}`, w, h);
}
Insert cell
function track(id, w, h) {
return spotify(`track/${id}`, w, h);
}
Insert cell
function episode(id, w, h) {
return spotify(`episode/${id}`, w, h);
}
Insert cell
function show(id, w, h) {
return spotify(`show/${id}`, w, h);
}
Insert cell
song = track
Insert cell
defaultWidth = 300
Insert cell
defaultHeight = 380
Insert cell
Insert cell
exampleId = "playlist/37i9dQZF1DWZmwe0RTeFj4"
Insert cell
exampleWidth = 400
Insert cell
exampleHeight = 80
Insert cell
example = spotify(exampleId, exampleWidth, exampleHeight)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more