¶ Play What You Say · 20 July 2014 listen/tech
Sometimes in blog posts I mention songs. Like Clockwise's "War Story Part One", which is really good. You should listen to it, seriously.
In fact, I would like to help you listen to it, not least because there's really no reason you should listen to it just because I say so, so listening to it better be really easy.
The fancy way would be to go find the track on Spotify, right-click it and pick "Copy Embed Code", and then paste that code into my HTML to get this embedded Play button.
That's pretty nice.
But sometimes I'm just mentioning a song in passing, or in some particular formatting like a table with other stuff, and the fancy embedded thing isn't what I want. It would be nice to also have a lower-overhead way to just mark a song-reference in text as a song-reference, and let some music-intelligence thing somewhere figure out how to actually find and play it.
So I made a first version of such a thing. It's pretty crude, in that you have to know about editing HTML, and be in an environment where you're allowed to. And it just plays a :30 sample, it doesn't log you in and play the whole song. But the HTML itself, at least, is very simple. So if you have a need for which those are acceptable conditions, and you want to try it, here's how it works.
First, add these two lines to the HEAD of your page:
<link rel="stylesheet" href="https://everynoise.com/spotplay.css" type="text/css">
<script type="text/javascript" src="https://everynoise.com/spotplay.js"></script>
And then just write your song-reference inside a span with the class "play", like this:
<span class=play>Andy Clockwise "War Story Part One"</span>
which produces this (click it once to play the excerpt, click again to stop it):
Andy Clockwise "War Story Part One"
When you play an excerpt, a little musical-note link also gets magically inserted, which you can use to go hear the whole song on Spotify if you want.
You can also refer to things in the possessive form Artist's "Song", like <span class=play>Big Deal's "Always Boys"</span> to produce Big Deal's "Always Boys", or the reverse-credit form "Song" by Artist, like <span class=play>"Dangerous Days" by Zola Jesus</span> to produce "Dangerous Days" by Zola Jesus, and it should be able to figure out what you mean. If you want to attach the reference to some visible text other than the artist and song-name, you can put the actual reference info in the tag, like this, where the code for that linked "this" is:
<span class=play artist="Broods" track="L.A.F">this</span>
and if for some reason you happen to have the Spotify URI for a particular track and would rather be precise about it, you can do this, where the code for that linked "this" is:
<span class=play trackid="spotify:track:6Qb82IcaWAB9ABeTyuzsV0">this</span>
Also, if for some reason you really don't want the Spotify link to be inserted, you can add "nolink=true" to your span to disable that feature, like this:
<span class=play nolink=true>Whitebear "Transmute / Release"</span>
which produces this (click to see the begrudging absence of magic):
Whitebear "Transmute / Release"
That's all I've got so far. If you try it, please let me know if it works for you, in either the functional or appealing senses. I'll be here thrashing around to "Snake Jaw" by White Lung.
(This all works by using the extremely excellent new Spotify Web API to look up songs and play excerpts.)
1 December 2015, three updates:
1: If you have a large page and want things to be playable before the whole page finishes loading, you can attach the onclick handlers yourself instead of waiting for them to be attached automatically. Just add onclick="playmeta(this)" to the same elements you marked with class=play.
2: If a track doesn't have a preview, for some reason, the code will set the attribute "unplayable" on your target element to be true. You can style this with CSS if you wish. For example, this makes linked images invert if their attached tracks are unplayable:
.play[unplayable] img {-webkit-filter: invert(1); filter: invert(1)}
3: If you want to refer to an album, instead of an individual track, you can add "albumid=spotify:album:wHaTeVeR" to your element. Like this:
<span class=play albumid=spotify:album:3yIcTZZOUsgq1xlkmtxnp6>Aedliga: The Format of the Air</span>
A representative track from the album will be chosen automatically by extremely sophisticated and complex logic, by which I mean that it will pick the first track unless the first track is very short and the second track isn't, or the first track has "Intro" in the title, in either of which cases it will pick the second track. Fancy.
In fact, I would like to help you listen to it, not least because there's really no reason you should listen to it just because I say so, so listening to it better be really easy.
The fancy way would be to go find the track on Spotify, right-click it and pick "Copy Embed Code", and then paste that code into my HTML to get this embedded Play button.
That's pretty nice.
But sometimes I'm just mentioning a song in passing, or in some particular formatting like a table with other stuff, and the fancy embedded thing isn't what I want. It would be nice to also have a lower-overhead way to just mark a song-reference in text as a song-reference, and let some music-intelligence thing somewhere figure out how to actually find and play it.
So I made a first version of such a thing. It's pretty crude, in that you have to know about editing HTML, and be in an environment where you're allowed to. And it just plays a :30 sample, it doesn't log you in and play the whole song. But the HTML itself, at least, is very simple. So if you have a need for which those are acceptable conditions, and you want to try it, here's how it works.
First, add these two lines to the HEAD of your page:
<link rel="stylesheet" href="https://everynoise.com/spotplay.css" type="text/css">
<script type="text/javascript" src="https://everynoise.com/spotplay.js"></script>
And then just write your song-reference inside a span with the class "play", like this:
<span class=play>Andy Clockwise "War Story Part One"</span>
which produces this (click it once to play the excerpt, click again to stop it):
Andy Clockwise "War Story Part One"
When you play an excerpt, a little musical-note link also gets magically inserted, which you can use to go hear the whole song on Spotify if you want.
You can also refer to things in the possessive form Artist's "Song", like <span class=play>Big Deal's "Always Boys"</span> to produce Big Deal's "Always Boys", or the reverse-credit form "Song" by Artist, like <span class=play>"Dangerous Days" by Zola Jesus</span> to produce "Dangerous Days" by Zola Jesus, and it should be able to figure out what you mean. If you want to attach the reference to some visible text other than the artist and song-name, you can put the actual reference info in the tag, like this, where the code for that linked "this" is:
<span class=play artist="Broods" track="L.A.F">this</span>
and if for some reason you happen to have the Spotify URI for a particular track and would rather be precise about it, you can do this, where the code for that linked "this" is:
<span class=play trackid="spotify:track:6Qb82IcaWAB9ABeTyuzsV0">this</span>
Also, if for some reason you really don't want the Spotify link to be inserted, you can add "nolink=true" to your span to disable that feature, like this:
<span class=play nolink=true>Whitebear "Transmute / Release"</span>
which produces this (click to see the begrudging absence of magic):
Whitebear "Transmute / Release"
That's all I've got so far. If you try it, please let me know if it works for you, in either the functional or appealing senses. I'll be here thrashing around to "Snake Jaw" by White Lung.
(This all works by using the extremely excellent new Spotify Web API to look up songs and play excerpts.)
1 December 2015, three updates:
1: If you have a large page and want things to be playable before the whole page finishes loading, you can attach the onclick handlers yourself instead of waiting for them to be attached automatically. Just add onclick="playmeta(this)" to the same elements you marked with class=play.
2: If a track doesn't have a preview, for some reason, the code will set the attribute "unplayable" on your target element to be true. You can style this with CSS if you wish. For example, this makes linked images invert if their attached tracks are unplayable:
.play[unplayable] img {-webkit-filter: invert(1); filter: invert(1)}
3: If you want to refer to an album, instead of an individual track, you can add "albumid=spotify:album:wHaTeVeR" to your element. Like this:
<span class=play albumid=spotify:album:3yIcTZZOUsgq1xlkmtxnp6>Aedliga: The Format of the Air</span>
A representative track from the album will be chosen automatically by extremely sophisticated and complex logic, by which I mean that it will pick the first track unless the first track is very short and the second track isn't, or the first track has "Intro" in the title, in either of which cases it will pick the second track. Fancy.