Friday, April 10, 2009

Copying lyrics from Pandora to your clipboard

You may have noticed that Pandora gives you (everyone? just subscribers?) the ability to view the lyrics of songs. For example, when I view "Not Going Anywhere" by Keren Ann, it gives me the full lyrics for the song (note: not every song has its lyrics in the Pandora database).

Pandora has been clever about how they display the lyrics. They actually don't come down with the page. The page uses AJAX to download the lyrics after you download the page. It then populates the correct place on the page with the lyrics. It also changes the mouseover properties so that you cannot use your browser to highlight those lyrics. Because the lyrics are populated dynamically, saving the page doesn't work either.

Well, I thought that was lousy. If the lyrics are displayed in plaintext on my browser, I should be able to at least highlight them. If they really wanted to prevent me from doing that, they'd build a GIF/JPG/PNG on their end and send me the lyrics in that, right?

So I figured out that I could use Firebug, the Firefox add-on, to do what Pandora didn't want me to do.
  1. Start Firebug.
  2. Start the "Console."
  3. Use the pull-down menu on the "Console" tab to "enable" the Console.
  4. Issue the JavaScript command
    alert(fullLyrics.innerHTML)
    on the console.
  5. A dialog box should pop up with the lyrics. Use your mouse to copy them to your clipboard.
  6. You can then disable the Firebug console using that same pull-down menu.
That worked for me. It should work until they change the names within the JavaScript.

5 comments:

John said...

You can actually do this a little easier, without any addons. Go into your Options page, select the Content tab, and click the Advanced button next to "Enable Javascript". There you can choose to not allow scripts to disable context menus.

Of course, you can also use Select All to copy all text of the page into notepad, where you can cut out everything except the lyrics.

Ted said...

That's a really excellent point.

The only downside is that you might want the context menus to be replaced on some sites (e.g., to allow right clicking in Google Docs).

It wouldn't surprise me if there was an add-on (perhaps somewhere in the configuration for NoScript?) that lets you customize JavaScript settings on a site-by-site basis.

m1 said...

If using firebug you can also just remove all the style, onclick, onmouseover etc for the div the lyrics are contained in. That's where all the "protective" logic is contained, for now...

Karl Tatom said...

Sorry to bring up such an old topic, but you can use a simple bookmarklet that I coded to remove all of the attributes that make it unselectable. That way you can just click the bookmarklet when you want to copy lyrics and you don't have to hassle with disabling any plugins or use extra addons. Simply copy everything below and add it to the "URL" box of a new bookmark:

javascript:(function(){
var divs = document.getElementsByTagName('div');
var div;
var divClass;
var i = 0;
var numHad = 0;
for (i = 0; i < divs.length; i++) {
div = divs[i];
divClass = div.getAttribute("class");
if ((divClass == "lyricsText unselectable") || (divClass == "unselectable")) {
numHad++;
div.setAttribute("class", "lyricsText");
div.setAttribute("unselectable", "off");
div.setAttribute("onmousedown", null);
div.setAttribute("onclick", null);
div.setAttribute("ondragstart", null);
div.setAttribute("onselectstart", null);
div.setAttribute("onmouseover", null);
}
}
if (numHad > 0) { alert("Made " + numHad + " tags selectable! :D"); }
})()

Ted said...

Karl -- Good insight. However, wouldn't it be nicer to package that script not as a bookmarklet but a GreaseMonkey script instead? That way everything would be selectable by default.

GreaseMonkey scripts require the GreaseMonkey add-on in Firefox, but they are supported natively by Chrome. So if you use Chrome, your modification is just as easy to make as adding a bookmarklet.