
Show HN: SongBranch – An interactive song lyric visualization experiment - jojohack
http://songbranch.com
======
jonty
Hah, I did something similar around ~2007 when I was at Last.fm and never got
around to publishing it. Nice work!

This is the only example I can find lying around in my backups:
[http://jonty.co.uk/bits/radiohead_creep_lyricviz.png](http://jonty.co.uk/bits/radiohead_creep_lyricviz.png)

~~~
jojohack
Thanks, jonty. I like your layout choice, makes it more readable. What do the
colors and arrow tips represent?

~~~
jonty
I actually had a version using force-directed layout very similar to yours,
took me a while to decide on this version!

Each colour is a verse, fading through the spectrum.

An unfilled arrowhead shows a transition between words in a line of a verse, a
filled arrowhead shows a transition between lines.

~~~
jojohack
That's a pretty neat approach, maybe I should do something similar. Originally
I color-coded the words (based on frequency) but having a gradual spectrum
applied to the edges feels a lot more intuitive.

------
jojohack
For those that are interested, I'm basically using lyrics-fetcher to conduct
the song searches (via [http://makeitpersonal.co](http://makeitpersonal.co))
and Springy for the core visualization.

------
mintplant
Daft Punk's "Technologic" is entertaining:

[https://i.imgur.com/JKxZ8zC.png](https://i.imgur.com/JKxZ8zC.png)

Nice work! Wish it had sharable URLs for specific songs.

~~~
jojohack
Love it :) The share buttons actually use the current page you are on, but I
can see how it would be much more useful to just update the URL based on the
search pattern.

Until I fix that, here's an example of how to deep link to a particular
search:

[http://songbranch.com/?artistName=daft%20punk&songTitle=tech...](http://songbranch.com/?artistName=daft%20punk&songTitle=technologic)

~~~
mintplant
Ah, thanks! I missed the share button. I shared a screenshot (with credit) to
r/DaftPunk which got a kick out of it:

[https://www.reddit.com/r/DaftPunk/comments/4b4l3m/technologi...](https://www.reddit.com/r/DaftPunk/comments/4b4l3m/technologic_the_flowchart/)

------
cwilkes
That's fun, I did KC and the Sunshine Band "Shake your booty"

[http://i.imgur.com/ia6RNHK.png](http://i.imgur.com/ia6RNHK.png)

mainly just to see how many arrows would go to the word "shake"

------
nicoboo
Eminem's songs can be used to stress-test the visualization

~~~
aembleton
They certainly can:
[http://songbranch.com/?artistName=eminem&songTitle=the%20rea...](http://songbranch.com/?artistName=eminem&songTitle=the%20real%20slim%20shady)

~~~
lioeters
Excellent example of a stress test - of course it's people on HN who would
think of doing something like this. I wonder if the whole genre of rap and hip
hop is particularly difficult to process, due to the sheer number of words in
each song.

------
revisiond
This is cool. Thanks for sharing. I tried a long song with a lot of unique
lines and the detailed view is a jumbled mess that won't stop erratically
moving. See Redemption's Sapphire for an example.

~~~
jojohack
Haha yup - maybe not so great for epic ballads :)

~~~
whiddershins
yeah, try Lou Reed's Street Hassle ... ;-)

~~~
jojohack
Thanks for stress testing, I made a fix this morning to reduce the spazziness
:)

------
pimlottc
Very interesting, played around a number of songs, though it seems to wig out
badly on "Born Slippy":

[http://songbranch.com/?artistName=underworld&songTitle=born+...](http://songbranch.com/?artistName=underworld&songTitle=born+slippy)

------
vinchuco
Reminds me of infinite jukebox for endlessly playing a song without it
becoming too tedious from repetition
[http://labs.echonest.com/Uploader/index.html](http://labs.echonest.com/Uploader/index.html)

------
stared
Nice idea (BTW: how does it cut text into sequences of words) abut the search
is crappy (I tried a few times, no results). Maybe a single search (for both
author and title) with references as you type? It would be really, really
helpful.

~~~
jojohack
Good suggestion, I had thought of having a single field earlier (delimiting
artist and title with a '-') but I thought that most users might find it
cumbersome.

To generate the final graph, I started by more or less splitting the entire
song into a list of words, then iteratively rejoining fragments in an order
based on frequency of occurrence.

~~~
stared
Actually I meant without having to write it all (especially as artists have a
few names, e.g. with different initials). So e.g. after writing "Rammstein" I
would be getting "Rammstein - Sonne", "Rammstein - Amerika" etc.

So, something Google-like rather than SQL-query-like.

~~~
jojohack
Oh do you mean auto-complete? Not that easy to support since I'm relying on a
remote server for song lyric searches

~~~
stared
I see. So in that case it would be great to have a predefined list of good
(and well-know) examples.

------
underyx
Where does the lyrics data come from? I've looked into lyrics datasets before
for side projects, but copyright seems to be crippling everyone's attempts at
providing them.

~~~
jojohack
Agreed, I've had similar difficulty. I ended up using
[http://makeitpersonal.co](http://makeitpersonal.co) since it appeared to have
decent coverage of most of the songs I searched on.

~~~
fibbery
I used Lyric Wiki
([https://en.wikipedia.org/wiki/LyricWiki](https://en.wikipedia.org/wiki/LyricWiki))
to look at song lyrics by parts of speech
([http://colorsong.herokuapp.com/](http://colorsong.herokuapp.com/)) it works
pretty well.

~~~
jojohack
Love it.

------
MaxLeiter
Really awesome work, something cool (but I have no idea how feasable) would be
listening to the song while you jump around. Other than that awesome work

~~~
jojohack
Great suggestion, I had originally wanted to create something like that, but I
figure folks can just open up a separate YouTube window for that. Would also
love to have the timing be in sync (ala Karaoke) but I'm not aware of any open
database that stores that kind of metadata.

~~~
jonty
I believe MusixMatch has timing data (it's what the Shazam karaoke mode uses),
however I'm unsure if the free API allows access to it. Worth a look though.
[https://developer.musixmatch.com](https://developer.musixmatch.com)

~~~
jojohack
Thanks jonty, looks like a fine resource, though it's a bit expensive to use
($25000)

------
MegaLeon
This is amazing! Well done. Blues flows beautifully. My colleague wanted to
know if this uses d3.js?

~~~
jojohack
I used Springy.JS ( [http://getspringy.com/](http://getspringy.com/) ) It's a
pretty awesome library.

------
mclovinwhy
Nice job, Bob Dylan's songs are fun to watch on this

~~~
jojohack
Thanks! I'm a HUGE Bob Dylan fan, incidentally :)

