Play Music on Your Site with the Grooveshark Streaming API

Grooveshark is a web app for listening to music. You can search for any play just about any song there is. With an account you favorite stuff, build playlists, do social stuff, you know the drill. Perhaps less known is that Grooveshark has API’s that allow you to play music on your own site. This will be a tutorial and sample code to show you how that’s done.

Here’s the plan:

Requirements

First and foremost, you have to apply for an API key. This is not a free API. I’m not sure exactly what the costs are, so I’d recommend just applying, explaining what you are wanting to do, and they’ll get in touch with you about costs. For high traffic sites, they sometimes offer hosting a grooveshark-powered advertisement as an option.

With that in hand, this is the tech we’ll be using:

jQuery (Ajax n’ stuff)
SWFObject (Embedding Flash)
Grooveshark Streaming API and PHP API Wrapper
Tinysong API and PHP API Wrapper

1. Embed Grooveshark Flash (SWF) onto Page

The Grooveshark Player is an (invisible) Flash embed. Once loaded onto the page, you can control it through JavaScript. Embedding it on the page is like:

  ...

  <script src="swfobject/swfobject.js"></script>
</head>

<body>

  <div id="player"></div>
  <script>
  swfobject.embedSWF("http://grooveshark.com/APIPlayer.swf", "player", "300", "300", "9.0.0", "", {}, {allowScriptAccess: "always"}, {id:"groovesharkPlayer", name:"groovesharkPlayer"}, function(e) {

    var element = e.ref;

    if (element) {

      setTimeout(function() {
        window.player = element;
        window.player.setVolume(99);
        }, 1500);

      } else {

        // Couldn't load player
        // Play sad trombone

      }

    });
    </script>

To make sure it can’t be seen:

#groovesharkPlayer {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

2. Having a songGetter.php

This is our local file that our page will Ajax call to request streaming information from Grooveshark. Essentially this file loads up the API wrapper and then uses it’s methods to get the info we need to pass to the SWF to start playing music.

<?php

    session_start();

    // Make sure to validate and cleanse this and stuff.
    $songID = $_POST['song'];

    // Load up API wrapper
    require("gsAPI.php");
    $gsapi = new gsAPI('API-USERNAME', 'API-KEY');
    gsAPI::$headers = array("X-Client-IP: " . $_SERVER['REMOTE_ADDR']);

    // Session caching stuff
    if (isset($_SESSION['gsSession']) && !empty($_SESSION['gsSession'])) {
        $gsapi->setSession($_SESSION['gsSession']);
    } else {
        $_SESSION['gsSession'] = $gsapi->startSession();
    }
    if (!$_SESSION['gsSession']) {
        die("noSession");
    }
    if (isset($_SESSION['gsCountry']) && !empty($_SESSION['gsCountry'])) {
        $gsapi->setCountry($_SESSION['gsCountry']);
    } else {
        $_SESSION['gsCountry'] = $gsapi->getCountry();
    }
    if (!$_SESSION['gsCountry']) {
        die("noCountry");
    }

    // Make request to Grooveshark and return data as JSON
    $streamInfo = $gsapi->getStreamKeyStreamServer($songID, false);
    echo json_encode($streamInfo);
    
?>

3. Playing a Song From a Click

Let’s say we have a link on our page that, when clicked, we want to fire off a song.

<a href="#" data-songid="23391593">Play This Song</a>

So with jQuery, we’ll watch for that click, and fire off a custom function. We’ll pass to that custom function the song ID that will pull from that links’ HTML5 data attribute.

var doc = $(document);
	
doc.on("click", "a[data-songid]", function(e) {
  e.preventDefault();	
  playSong($(this).data("songid"));
});

And our custom function playSong is just an Ajax request for our own songGetter.php file that we set up:

function playSong(songID) {
	$.ajax({
	  url: "api/songGetter.php",
	  type: "POST",
	  data: {
	  	song: songID
	  },
	  success: function(response) {
	    var responseData = $.parseJSON(response);
	    window.player.playStreamKey(responseData.StreamKey, responseData.StreamServerHostname, responseData.StreamServerID);
	  }
	});
}

FANCY.

Demo

You can see this all in action:

View Demo

The demo includes the TinySong API functionality as well. This is a crucial part, as it provides the Song ID’s that Grooveshark needs to identify a particular song. It would be pretty easy to combine the two API’s to create search-and-play functionality, although this demo does not have that as it would require a songGetter.php file that is wide open to the internet. The particular songGetter.php file in this live demo is locked to only those few songs on the demo page.

All of this is available on GitHub.

Legal Issues

If you upload an audio file of a song directly to your server and use that to play music on your site, if that music is copyrighted, you could be in trouble. This is a way to avoid doing that, but still play that music. I am not a lawyer, but since you aren’t distributing the music and the company that is pays royalties, I think you are good. If anyone knows more, feel free to share in the comments below.

Terence

# November 28, 2011

Any HTML5 available for this? I’ve used jPlayer before which has great degradation, but this seems like this works a little easier… lack of HTML5 / mobile support is a negative.

Love the choice of ‘What ever happened to Gus?’

Michael Arestad

That diagram made my morning so much better! Thank you.

Lindsay

I read on Gizmodo that Grooveshark is going to be obliterated by Universal for illegally uploading tracks …may want to tread carefully.

Roger Bixley

I agree with Lindsay: Stay away from Grooveshark. They’re very shady.

DataMouse

Music on a web site? Awesome!
I miss the 90’s… :-/

In all seriousness, GrooveShark are pretty shonky (as mentioned above). I’d give them a wide berth.

Still, it’s good to see how it can be done without uploading a file and having the hang times in the browser.

ckc

Some interesting recent news on Grooveshark: http://news.cnet.com/8301-31001_3-57332246-261/grooveshark-chairman-spills-beans-on-label-strategy/

Ryan

I use Grooveshark all the time! Too bad this API isn’t free :(

And I don’t see the problem with Grooveshark. I can get the same music on YouTube…

Ben

As long as it’s well-known that autoplay is a no-no for web audio, I’m cool with whatever direction this API takes.

Clipping Path

nice design related site! I’ve found lots of nice work on your blog. thanks a lot for sharing with us.

Simon Duda

# November 29, 2011

http://soundcloud.com/ offers a widtget too. I haven’t got any experience with it, but it looks quite trusty

zhinto

Nice Article, Thanks For Share, i try later

Leigh

I was an avid Grooveshark user until recently, mainly because many of the songs on my playlist were disappearing randomly (Would kinda of suck if you used the API and your song goes away) – Also the sound quality tends to be pretty poor.

No API, but if your looking for a good sub for Grooveshark, Spotify is awesome.

Max

I’m also a fan of SoundCloud’s widget. I use it on my site. From my point of view as a hobbyist musician it’s a nice way to show my work. I really wish that the HTML5 <audio> tag would be better supported by browsers though.

Andrew K Kirk

# November 30, 2011

Interesting information. I recently posted a question on Quora about playing a song within a Facebook page. My requirements for services were similar to those outlined here.

Interestingly, someone pointed out to me that Grooveshark is not a licensed music site. Perhaps, most won’t care either way, but it’s worth mentioning. Cheers!

Total Bounty

# December 5, 2011

Used Jplayer before but I’d like to see how grooveshark works so I’ll try it. Cheers, mate!

Lev

# January 11, 2012

Thank you, interesting article. Only I had a problem at the search of Russian-language music :(

# June 26, 2014

The demo page doesn’t seem to be working?