5 ms·

Show HN: Discover new music through an infinite suggestion graph (React/Redux)

108 points by joshwcomeau 10y ago

brudgers 10y ago
Curious regarding the basis for the artist graph.
- joshwcomeau 10y ago
  Outsourced to the Spotify API. Would have loved to take a crack at solving that problem, but limited time for side projects :)
comanmitogo 10y ago
wwiii
lucb1e 10y ago
Looks nice! Just two things: 1. Where did you get the data from? I saw the Github link but, at least to me, it's not clear where the artist links come from. 2. Clicking two artists does not seem to improve the matches. I would like to select an artist, then click another one I like, and another, and get better and better matches to my music taste. It currently seems to be a simple visual representation of a single author and three related ones; showing the previous artist is just eye candy.
- joshwcomeau 10y ago
  Thank you! 1. The data is from Spotify's API. I use 3 endpoints (artist info, artist top tracks, related artists). Really this is just a shiny interface over their API. 2. Yeah. The previous artist is meant as a way to go back in time (if you wanted to explore multiple "branches"). But yeah it's very "dumb" in this regard :)
  - lucb1e 10y ago
    That explains, thanks :)
mattdeboard 10y ago
Very bottom of the page > Copyright Date.now()
- lucb1e 10y ago
  Looking at the source code, it's purposefully written in a monospaced font, so I assume it's on purpose.
  - joshwcomeau 10y ago
    It is indeed a joke :) I realize that this probably renders the copyright void, but I don't particularly care. Infringe all you like!
atrudeau 10y ago
Here's an academic paper that investigates this approach (screenshots towards the end), along with end-user experiments: https://www.lume.ufrgs.br/bitstream/handle/10183/101186/000931900.pdf?sequence=1 https://www.lume.ufrgs.br/bitstream/handle/10183/101186/0009...
- joshwcomeau 10y ago
  Cool! At a glance, it looks similar to my approach. Different tools, but same rough architecture.
TisButMe 10y ago
Looks like we had a similar idea :D http://bandmap.me/ http://bandmap.me/
- joshwcomeau 10y ago
  Hahahahaha wow! Yours definitely wins in terms of # of results :D Very cool.
  - TisButMe 10y ago
    Maybe, but your interface is smooth and slick! It was a weekend project for me, so didn't have time to refine it too much, and it does what I use it to do, but it definitely looks like I could learn a lot in design from you :D
killa_kyle 10y ago
pretty dope
- joshwcomeau 10y ago
  Thanks :)
anoonmoose 10y ago
I tried it with "Nick Cave & The Bad Seeds" and got some pretty useless results: Nick Cave, which he's done some solo work as Mick Harvey, one of the members of the band Grinderman, one of Nick Cave's side projects The second time was a little better. I used NC&TBS again and got PJ Harvey, Nick's old girlfriend Tom Waits, very similar stylistically Tindersticks, a more recent similar artist. Third time it actually gave me an artist I had never heard of (Kristin Hersh) and I like what I'm hearing. So, I guess, play around with it a bit before you judge it.
- bobwaycott 10y ago
  Grinderman is a useless result? Come on!
  - anoonmoose 10y ago
    Only useless from the perspective that I was provided no new information.
wanda 10y ago
Those circles seem to be problematic for long artist titles, which don't wrap.[0] You might want to try dynamically splitting into tspans every word or phrase of sufficient individual or combined length. Apart from that, really nice. [0] : Chrome 50 (1366x768)
- joshwcomeau 10y ago
  Indeed. I looked briefly into how multi-line SVG text elements work and it was not encouraging, so I let it be. I'll look into tspans though, thanks!
nerdy 10y ago
Might be useful for anyone who doesn't have Spotify. The information is similar to (some omissions, maybe a max of 3 recommended?) what Spotify recommends in the "related artists" panel. By the way, the footer says "Copyright Date.now()"
- joshwcomeau 10y ago
  You are exactly right; this is really just an alternate Spotify interface :) I think there's value in extracting a single feature out of a larger system and making a custom interface around it. And yeah, the footer is a joke :)
tgb 10y ago
Too effective for me. Now I'm listening to the first artist it recommended instead of exploring the site more.
willvarfar 10y ago
My friends and I occasionally play "the spotify game" at bbqs. We pick two songs that we imagine are really really far apart. We play one on spotify, and then take turns to click on the "similar artists" tab to move closer and closer to the destination song. The winner is the player to play the destination song. The Art is to move closer to the target but not so close that the other player(s) can reach the destination... I'm sure with the Spotify API someone could wrap this up in a killer game :)
- joshwcomeau 10y ago
  That's an amazing idea! Wish I had the spare time to dedicate to it D:
- ellyagg 10y ago
  For sure, although you can't use the free API for making games unfortunately: https://developer.spotify.com/wp-content/uploads/2015/01/answers-to-common-questions-about-our-terms-of-use-for-developer-tools.pdf https://developer.spotify.com/wp-content/uploads/2015/01/ans... I've been curious how difficult or burdensome getting permission for a game would be.
  - joshwcomeau 10y ago
    Lame! You could use last.fm, maybe? I think there are a few providers that have this kind of info.
- taylorfausak 10y ago
  Cool! Sounds like a wikirace for music. https://en.wikipedia.org/wiki/Wikipedia:Wikirace https://en.wikipedia.org/wiki/Wikipedia:Wikirace
bcanzanella 10y ago
This is great! As a spotify junkie (and since you're using the spotify api), it would be great if there were links from the artist/album/tracks directly to spotify.
- joshwcomeau 10y ago
  Yeah, I almost did this. What stopped me is that I assume most people using it do not have spotify accounts, and it seemed lame to link to (what would become) a signup page. Agree that it needs _some_ kind of call-to-action though. There's nothing to do when you find an artist you like!
  - jarcane 10y ago
    To be honest, I don't have Spotify and I'd still probably use it for that. Perhaps link to searches on multiple services? Youtube/SoundCloud/Amazon/iTunes maybe? With referral links you might even be able to make a few quid to cover the hosting at least.
hakcermani 10y ago
Pretty cool. i knew people at a startup called gigabeat (web 1.0 !) that did a affinity spiral. (they folded and even the domain name has gone to someone else). Back then it was a whole startup. Now its a side project :-)
lj3 10y ago
> Copyright Date.now(). All rights, wrongs, and grey areas reserved. I don't know if that's a bug or a very clever joke. :)
- joshwcomeau 10y ago
  It is indeed a joke! One that is too subtle, though; half a dozen people have told me about this "bug" :)
markbnj 10y ago
This is very, very cool. Nice work guys.
pkiv 10y ago
Interface looks great! Really cool project. The Spotify API is one of my favorites to work with for small projects. I just wish I could stream full songs using it.
pfarrar 10y ago
very cool UI and concept. I love it. I think it would be cool to show the entire history of your selections to see where you start and where you finish. Nevertheless awesome work!
matmann2001 10y ago
I used to run a similar service called Audio Vine. You'd start by picking one song. Then you were given 4 choices for the next song, which were derived from Last.fm's "similar song" API. If you didn't make a selection by the end of the song, one of the four options were chosen at random. It ended up being a very pleasant experience, a semi-randomized radio that gave the user the ability to steer the direction. The service also ended up producing this neat tree graph (done in D3) in which you could go back and traverse unexplored nodes. We had an agreement with Grooveshark to stream from their music database, so unfortunately, when they went down, so did Audio Vine. But man, that was a fun project.
menor 10y ago
Thanks for this, I enjoyed the Readme and I'm working in something similar for myself, so having your code available will probably help me a lot.

108 points by joshwcomeau 10y ago

brudgers 10y ago

Curious regarding the basis for the artist graph.

joshwcomeau 10y ago
Outsourced to the Spotify API. Would have loved to take a crack at solving that problem, but limited time for side projects :)

comanmitogo 10y ago

wwiii

lucb1e 10y ago

Looks nice! Just two things: 1. Where did you get the data from? I saw the Github link but, at least to me, it's not clear where the artist links come from. 2. Clicking two artists does not seem to improve the matches. I would like to select an artist, then click another one I like, and another, and get better and better matches to my music taste. It currently seems to be a simple visual representation of a single author and three related ones; showing the previous artist is just eye candy.

joshwcomeau 10y ago
Thank you! 1. The data is from Spotify's API. I use 3 endpoints (artist info, artist top tracks, related artists). Really this is just a shiny interface over their API. 2. Yeah. The previous artist is meant as a way to go back in time (if you wanted to explore multiple "branches"). But yeah it's very "dumb" in this regard :)
- lucb1e 10y ago
  That explains, thanks :)

mattdeboard 10y ago

Very bottom of the page > Copyright Date.now()

lucb1e 10y ago
Looking at the source code, it's purposefully written in a monospaced font, so I assume it's on purpose.
- joshwcomeau 10y ago
  It is indeed a joke :) I realize that this probably renders the copyright void, but I don't particularly care. Infringe all you like!

atrudeau 10y ago

Here's an academic paper that investigates this approach (screenshots towards the end), along with end-user experiments: https://www.lume.ufrgs.br/bitstream/handle/10183/101186/000931900.pdf?sequence=1 https://www.lume.ufrgs.br/bitstream/handle/10183/101186/0009...

joshwcomeau 10y ago
Cool! At a glance, it looks similar to my approach. Different tools, but same rough architecture.

TisButMe 10y ago

Looks like we had a similar idea :D http://bandmap.me/ http://bandmap.me/

joshwcomeau 10y ago
Hahahahaha wow! Yours definitely wins in terms of # of results :D Very cool.
- TisButMe 10y ago
  Maybe, but your interface is smooth and slick! It was a weekend project for me, so didn't have time to refine it too much, and it does what I use it to do, but it definitely looks like I could learn a lot in design from you :D

killa_kyle 10y ago

pretty dope

joshwcomeau 10y ago
Thanks :)

anoonmoose 10y ago

I tried it with "Nick Cave & The Bad Seeds" and got some pretty useless results: Nick Cave, which he's done some solo work as Mick Harvey, one of the members of the band Grinderman, one of Nick Cave's side projects The second time was a little better. I used NC&TBS again and got PJ Harvey, Nick's old girlfriend Tom Waits, very similar stylistically Tindersticks, a more recent similar artist. Third time it actually gave me an artist I had never heard of (Kristin Hersh) and I like what I'm hearing. So, I guess, play around with it a bit before you judge it.

bobwaycott 10y ago
Grinderman is a useless result? Come on!
- anoonmoose 10y ago
  Only useless from the perspective that I was provided no new information.

wanda 10y ago

Those circles seem to be problematic for long artist titles, which don't wrap.[0] You might want to try dynamically splitting into tspans every word or phrase of sufficient individual or combined length. Apart from that, really nice. [0] : Chrome 50 (1366x768)

joshwcomeau 10y ago
Indeed. I looked briefly into how multi-line SVG text elements work and it was not encouraging, so I let it be. I'll look into tspans though, thanks!

nerdy 10y ago

Might be useful for anyone who doesn't have Spotify. The information is similar to (some omissions, maybe a max of 3 recommended?) what Spotify recommends in the "related artists" panel. By the way, the footer says "Copyright Date.now()"

joshwcomeau 10y ago
You are exactly right; this is really just an alternate Spotify interface :) I think there's value in extracting a single feature out of a larger system and making a custom interface around it. And yeah, the footer is a joke :)

tgb 10y ago

Too effective for me. Now I'm listening to the first artist it recommended instead of exploring the site more.

willvarfar 10y ago

My friends and I occasionally play "the spotify game" at bbqs. We pick two songs that we imagine are really really far apart. We play one on spotify, and then take turns to click on the "similar artists" tab to move closer and closer to the destination song. The winner is the player to play the destination song. The Art is to move closer to the target but not so close that the other player(s) can reach the destination... I'm sure with the Spotify API someone could wrap this up in a killer game :)

joshwcomeau 10y ago
That's an amazing idea! Wish I had the spare time to dedicate to it D:
ellyagg 10y ago
For sure, although you can't use the free API for making games unfortunately: https://developer.spotify.com/wp-content/uploads/2015/01/answers-to-common-questions-about-our-terms-of-use-for-developer-tools.pdf https://developer.spotify.com/wp-content/uploads/2015/01/ans... I've been curious how difficult or burdensome getting permission for a game would be.
- joshwcomeau 10y ago
  Lame! You could use last.fm, maybe? I think there are a few providers that have this kind of info.
taylorfausak 10y ago
Cool! Sounds like a wikirace for music. https://en.wikipedia.org/wiki/Wikipedia:Wikirace https://en.wikipedia.org/wiki/Wikipedia:Wikirace

bcanzanella 10y ago

This is great! As a spotify junkie (and since you're using the spotify api), it would be great if there were links from the artist/album/tracks directly to spotify.

joshwcomeau 10y ago
Yeah, I almost did this. What stopped me is that I assume most people using it do not have spotify accounts, and it seemed lame to link to (what would become) a signup page. Agree that it needs _some_ kind of call-to-action though. There's nothing to do when you find an artist you like!
- jarcane 10y ago
  To be honest, I don't have Spotify and I'd still probably use it for that. Perhaps link to searches on multiple services? Youtube/SoundCloud/Amazon/iTunes maybe? With referral links you might even be able to make a few quid to cover the hosting at least.

hakcermani 10y ago

Pretty cool. i knew people at a startup called gigabeat (web 1.0 !) that did a affinity spiral. (they folded and even the domain name has gone to someone else). Back then it was a whole startup. Now its a side project :-)

lj3 10y ago

> Copyright Date.now(). All rights, wrongs, and grey areas reserved. I don't know if that's a bug or a very clever joke. :)

joshwcomeau 10y ago
It is indeed a joke! One that is too subtle, though; half a dozen people have told me about this "bug" :)

markbnj 10y ago

This is very, very cool. Nice work guys.

pkiv 10y ago

Interface looks great! Really cool project. The Spotify API is one of my favorites to work with for small projects. I just wish I could stream full songs using it.

pfarrar 10y ago

very cool UI and concept. I love it. I think it would be cool to show the entire history of your selections to see where you start and where you finish. Nevertheless awesome work!

matmann2001 10y ago

I used to run a similar service called Audio Vine. You'd start by picking one song. Then you were given 4 choices for the next song, which were derived from Last.fm's "similar song" API. If you didn't make a selection by the end of the song, one of the four options were chosen at random. It ended up being a very pleasant experience, a semi-randomized radio that gave the user the ability to steer the direction. The service also ended up producing this neat tree graph (done in D3) in which you could go back and traverse unexplored nodes. We had an agreement with Grooveshark to stream from their music database, so unfortunately, when they went down, so did Audio Vine. But man, that was a fun project.

menor 10y ago

Thanks for this, I enjoyed the Readme and I'm working in something similar for myself, so having your code available will probably help me a lot.