Weekend Project: Pi Music Box – Raspberry Pi as a Music streaming device

Get Grooveshark to run on a Raspberry Pi, Let your friends connect to and vote for their favourite songs. Let the majority rule what you hear at home or office.

We used to play songs regularly at work. Most of the time I play Dubstep while rest of the team want to listen to Trance or a different genre, this is where the clash of genres occur. This is where this system would be useful, if you get this running on a network then you can ask people to search their favourite songs and queue them in the system. Based on the votes they/others make for the song, it may float up or down making it either famous or not-so-famous. This makes a playlist of highest voted or popular songs.

The basic idea of the system is you connect the computer that streams music to a speaker/stereo. The system consists of two applications, one is used for streaming music and controlling the output of songs while the other interface/application takes user inputs via a Web Browser.

Media Streaming Application

Media streaming application is a console based service that runs in a threaded environment (multiple threads) to handle a player and a TCP server to accept user connections and pass user commands to the player to control the music output.

The preferred framework for most of my cross-application development is Qt, so I went with it for this project as well. I used the latest release of it which is Qt 5.1. I have specifically programmed this application to run on single board computers that run embedded Linux which implements a TCPIP stack and GStreamer based audio playback.

If you look at the “grooveshark-server” project hosted in Github you should be able to understand how to get it up and running on a Raspberry Pi, a Beaglebone or any other type of single board embedded computer. I still prefer you to give it a try on your desktop computer first and make sure it compiles correct on your x86 or x86_64 box before running it on ARM based environment.

In a nutshell all you need to do is to get Qt 5.1 running with Qt Core, Multimedia and Networking modules and then run Gstreamer with HTTPs based streaming plugin and mpeg4 decoder (this is found under “gstreamer ugly” package section of your distribution).

User Interface

The purpose of this application is to show a pretty interface to the user and let them search their favourite songs and queue them in the media streaming server, which we discussed above., since the above application only accepts 5 or so commands, this UI shows a eye-candy interface to the user and let them control the playlists and player attributes.

I cheated here, I could have implemented this into the media streaming server as a HTTP server (probably by embedding something like mongoose), implement my own templating engine in C and make it serve dynamic content. Since I wanted to make this project short-and-sweet (preferably finish within a weekend or so — basics :D ) I chose LAMP stack to build the Web based user interface to control the media server. This gives an added bonus of letting it run on the embedded computer (that runs the media streaming server) or another server sitting on the same network (this is achieved via TCP service that media server implements).

UI is build with LAMP stack as I mentioned before. jQuery and Bootstrap 3 is used for front-end content manipulation.

Look below for source code and demo of both applications working together to build a complete media streaming system.

frontpage navmenu search_results

Server: https://github.com/purinda/grooveshark-server
UI: https://github.com/purinda/grooveshark-webui



18 thoughts on “Weekend Project: Pi Music Box – Raspberry Pi as a Music streaming device

  1. Hi! I think you had a wonderful idea, and I want to implement that too. I’ve successfully installed the server on the RPi, and I have it running. But I can’t figure out how to link it to the php interface. How do you do that? I don’t see any references to it in any server file…
    Thanks for your work!

    • Hi Alfredo,

      Glad you found it useful.

      Its easy to get the WebUI to work with the server.
      Follow these steps, but if you don’t know how to get any of the following steps to work, please ask.

      1. Install apache (and rewrite module) on RPi (or the complete LAMP stack).
      2. Then copy files in the WebUI project to /var/www/grooveshark-webui folder. (alternatively run “git clone git@github.com:purinda/grooveshark-webui.git” in “/var/www/” folder).
      3. You need to create a virtualhost for the WebUI which will be used by Apache.

      nano /etc/apache2/sites-enabled/001-songs

      Copy and paste the following code block.

      Listen 80

      NameVirtualHost *:80

      DocumentRoot /www/grooveshark-webui
      ServerName songs

      Save and exit nano (Control+O and Control+x I think ;) )

      4. Restart apache (sudo service apache2 restart).

      5. Load mod_rewrite for apache (sudo a2enmod rewrite).

      6. Now the server side is done…. for your Virtual host you need to add that to the clients hosts file to retrieve the WebUI using the Host Name (songs in the ServerName section in the Apache configuration),
      to do that in Linux normally add ” songs” to /etc/hosts file for more info about settings Hostname entries check https://github.com/purinda/grooveshark-webui/issues/1

      Alternatively, you can add host name entry to a DNS server if you have one locally in the network.

      7. On the computer you setup the hostname, type “songs/main” in a webbrowser and see whether that loads the WebUI.

      If you are trying with lighthttpd and not Apache, reply to this ticket https://github.com/purinda/grooveshark-webui/issues/1 with the issue you got.

      • Thank you very much for your help!
        I’ve had some difficulties since ‘service apache2 restart’ and ‘a2enmod’ seem to be debian commands, not working in arch, but I solved them by finding alternative commands and editing conf files (http://stackoverflow.com/questions/7816429/apache-mod-rewrite-is-not-working-or-not-enable).
        Another difference is that there is no directory named “apache2” in /etc, thus I don’t know where to put the 001-songs file. Everything else seems to be working just fine. Just for a test, I put a file in srv/http and I can open it from another computer. So the question is, if there is no sites-enabled folder, where do sites go?
        Thanks for your patience!

      • Hi Purinda!
        I tried to set up Apache like said in the link you gave me, but looks like I messed up somewhere, since now I’m getting Error 403 when I try to visit a page in the RPi from the Lan network. I think I’ll start all over again and reinstall everything, to see if I messed up somewhere.

      • Hi Purinda!
        Since I made it to set up a virtual host, I am trying to debug the grooveshark webui. Now, as far as I can see, it fails when it tries to create the new controller in line 44 of pip.php in the system folder. I put some print functions in the previous checks, hoping that this information might help us understand the problem:
        ($request_url != $script_url) FALSE
        (isset($segments[0]) && $segments[0] != ”) FALSE
        (isset($segments[1]) && $segments[1] != ”) FALSE
        (file_exists($path)) TRUE
        (!method_exists($controller, $action)) FALSE
        Can you see where the problem is?
        Thanks for your support!

      • You mean you cannot edit the file? if so check what user you have logged into rPI as? should be root. Type ‘su’ in the console and then enter root password, then edit the file.

      • Update: permission is denied when I put Listen 80 in httpd-vhost.conf file. I will keep investigating it tomorrow.

    • I just read your reply. I can edit the file but I cannot successfully set up a Virtual Host. I have some ideas anyway, but it is late right now here in Italy, I’ll keep working on it tomorrow. Thanks for your support!

      • Hi Purinda!
        I set up a virtual host and tested it with a test.php that pops up phpinfo(). That works. I put another test.php in the grooveshark folder and it works too. Then I set up a virtual host that has as the index.php in grooveshark folder as document root, but when I try to access that one from another computer, the page remains white or just says “no data received”.
        Here is my /etc/httpd/conf/extra/httpd-vhosts.conf file

        NameVirtualHost *:80

        ServerName test
        DocumentRoot “/srv/http”
        ServerAlias alias

        ServerName groovesharkWebui
        DocumentRoot “/home/alfre/public_html/grooveshark-webui/index.php”
        ServerAlias songs

        ServerAdmin webmaster@dummy-host.example.com
        DocumentRoot “/home/alfre/public_html/test.php”
        ServerName dummy-host.example.com
        ServerAlias dummy-host
        ErrorLog “/var/log/httpd/dummy-host.example.com-error_log”
        CustomLog “/var/log/httpd/dummy-host.example.com-access_log” common

        DocumentRoot “/home/alfre/public_html/grooveshark-webui/test.php”
        ServerName dummy-host2.example.com
        ServerAlias dummy-host2

      • Added
        <Directory /home//www/ilovephp>
        Options FollowSymLinks
        AllowOverride All

        to the virtual host definition and still fails to load.

  2. Helo, I wanna try to built my own grooveshark-streaming-server according to this tutorial, but the problem is, my german ip adress is blocked and I came up with an idea to use http proxy server. So do you know if this works with proxy or not? If yes should I change something not described in the tutorial?
    By the way, very good idea and implementation, keep it up!

    • Thanks Maxim.

      I haven’t tried streaming through a proxy, but I suspect what might have happened to you is, when you make many requests a day to Grooveshark servers block your IP. They blocked mine when I was heavily testing the implementation weeks ago as well. I end up purchasing a subscription for $5 for a month and used the session IDs generated via the account that has the subscription. Make sense?

      But if you think a proxy might help, try it and let us all know whether that works or not :) Thanks and Good luck!

  3. Hi, very cool idea! But I have a problem: I managed to get the server and the UI running, but when I try to search for a song, the result list pops up empty. (Only the title “Look what we found” is shown”). Idk if it’s a problem with the UI or with the server.

    The console output after starting the server is the following:

    GS Token: “”

    Calculated Random Hex: “714b4c”

    Calculated SHA1: “0dc80d12bf42342581338612518833e7ec9918f4”

    Calculated Token: “714b4c0dc80d12bf42342581338612518833e7ec9918f4”

    RESPONSE: “{“header”:{“session”:”f356c461329cb45df18142e1957b09d5″,”serviceVersion”:”20100903″,”prefetchEnabled”:true},”result”:”e7eb238cb847e54c1a0a2813ee20346ea47a9fed”}”
    Communication Token: “e7eb238cb847e54c1a0a2813ee20346ea47a9fed”

    Incoming connection…

    Client connection thread initialised…

    TCP Client Thread Running…

    • OK – problem solved, rewrite engine was configured wrong – now it works. But sometimes the songs won’t play. The server says “Forbidden” after choosing a song. Other times, when starting the server the REPSONSE is a html page “405 Not allowed” and the communication token is empty.

  4. I found the front End and it works like in the picture. Just launched the Qt server. But on the web there is a playlist of songs is empty. In what folder to put the song files?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s