< Pete Goodman Web developer >

Labs - Ghetto blaster - a PHP/JavaScript soundboard

Monday 30th August 2010, 19:08

To play music at work, we use Spotify & iTunes running on an old macbook connected to a pair of speakers - our very own 21st century ghetto blaster. Anyone can log in to this machine using VNC or screen sharing and change the music from their own computer.

I've created a simple soundboard that can be accessed through any web browser, which allows people to play a sound clip or synthesised speech through the ghetto blaster.

Screenshot of the ghetto blaster

It's fairly straightforward, the web page simply lists all of the files in a specified directory. When one of these sound files is selected, JavaScript sends a request to the server to play it.

This is made possible by using the php shell_exec() function to call the OS X command line audio player afplay, for example:


shell_exec('afplay ' . $file);

Speech is created by calling the say command, for example:


shell_exec('say -v ' . $voice . ' "'. $text . '"');

There are also volume controls in the top right corner that allow the system volume to be adjusted. This is possible due to the osascript command, which allows an applescript to be executed via the command line, for example:


shell_exec("osascript -e 'set volume output volume (get (output volume of (get volume settings)) + 5)'");

The site allows you to preview the sound clips through your own browser, so you can work out what you want to play before forcing everyone else to hear it. Also in the top right corner there's the option to switch between broadcast and preview modes. The preview mode uses Yahoo Media Player to play these mp3 files in the browser. To do this it was necessary to import the Yahoo Media Player without allowing it to parse the links on the page, but instead to call it when a sound is clicked in preview mode:


// init Yahoo Media Player 
var YMPParams ={
	autoadvance:false,	// stop YMP playing more than one file
	parse:false,		// stop YMP looking for links
	playlink:false		// stop links being auto-captured by YMP
};

// When a music link is selected, call this and pass it the clicked element
var previewTrackPlay = function(el) {
	YAHOO.MediaPlayer.stop(); 	// stop any current sounds
	var file = el.parentNode;	// find the path to the file
	YAHOO.MediaPlayer.addTracks(file, null, true); // queue the file
	YAHOO.MediaPlayer.play();	// play!
};

There are a few configuration options. It's possible to require users to log in to the system, and log every interaction in case you want to know who played what. These options can be changed in the config.ini.php file in the root of the directory. (These options are parsed by PHP using the php parse_ini_file() function.)

The source code is up on github. If you don't know how to use git you can download the latest zip directly from github.

You might also want to get started with our standard batch of sound clips, which can be found here.

To install it on a mac, you can follow these simple instructions.

  • Turning on web sharing and enable PHP.
  • Check the project out from Github, or just download the zip. Put these files in your site root, as defined in the step above.
  • Get our sound effects zip file, or put your own somewhere.
  • You may want to change the configuration options, which involves editing the config.ini.php file. For example, you'll need to set the absolute path to the sound effects file.

If you get any issues, especially with the built-in apache server and symlink permissions, it might be worth trying MAMP instead of the built in server. Alternatively if you're comfortable altering the httpd.conf file, try commmenting out the line that includes the User home directories (Include /private/etc/apache2/extra/httpd-userdir.conf)

It might be possible to get this working on other *nix systems by replacing afplay with another mp3-playing command-line utility

Update:

A simplified version of this is now available in any decent browser (including iPhones):

Comments

  1. Steve Winton Steve Winton
    Hey, this is great work! :)

    I did something similar for our office, where anyone can play a song on the stereo by tweeting a spotify track URI at it, check out http://www.nixonmcinnes.co.uk/2010/01/07/crowd-sourcing-the-office-stereo-using-twitter-and-spotify/

    We've also created a mobile-optimized (well, sort of) remote control interface for the stereo, which is basically a web app running on top of my spotipy lib here: http://github.com/swinton/spotipy

    It's a very democratic listening experience! :)     31st August 2010, 12:21 #

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.