So after that little error, i decided to read up and see what people had done with there’s and try some things out. I settled on the Idea of making it a Music Streamer, being able to listen in on my phone.

So here’s a detailed tutorial of how I did it, from start to finish. I’ll start by setting up the pi, setting up the music streaming, then adding a web server and some web pages to enable remote control of it too.

Setup Raspberry Pi

First yer need an SD card with the standard OS installed on it, Raspbian “wheezy”. Unix uses write the image using DD, windows users can use Win32DiskImager. Note that this image uses most of a 4gb SD card once setup, not leaving allot of room for any additional software. Its advisable to use an 8gb card or larger to make sure you have enough room for everything.

One, you’ve got you pi, connect it up to your telly, and plug in a keyboard. Change the config.txt file on board the SD card so it works with you telly. I was using an older telly, via RCA port using these settings:

sdtv_mode=2 
sdtv_aspect=3  
sdtv_disable_colourburst=1

PAL, 16:9 Aspect Ratio, Black and White

Once setup and booted for the first time the raspi-config interface should show up

This is to help set it up in a nice and simple manner. Note that some options can take several minutes to load. All you need to do right now is  expand root-fs, chnage pass, change timezone and  enable ssh.

Expanding the root-fs just claims any unused drive space for use by the filesystem, if you installed the image on an 8gb card for example, it would reclaim the 4gb+ of unused space.

Before using this tool, see for yourself.

df -h

displays the amount of used and free space, use it again afterwards to see how much, if any, you’ve gained.

To get back to the raspi-config interface at anytime after the initial setup use:

sudo raspi-config

Now if you want to setup a wifi network its easiest to just use start the display manager and use the in built tool. its got a shortcut on the desktop. To do this type:

startx

If you’d rather stick ot the command line, yer can setup a network by editing the wpa_supplicant.conf file.

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

and example file

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
        ssid="mynetwork"
        psk="mypassphrase"
        proto=RSN
        key_mgmt=WPA-PSK
        pairwise=TKIP
        auth_alg=OPEN
}

check here for a better look at the settings, what they mean and setting up various networks.

So, we’re setup, have internet connection and the Pi is all configured. Just make sure we’re up to date.

sudo apt-get update
sudo apt-get upgrade

Now with ssh enabled you can unplug your pi from the telly and do everything from another computer.  Windows users can use putty, simply type in the pi’s ip and click open. Linux/Unix users can do it via command line.

ssh -login_name hostname

eg

ssh -pi 192.168.0.2

The same details from ssh can be used for ftp, enabling you to copy files from one computer to another fairly easily.

Setup Icecast

Icecast is a stream manager, converting our pi into a stream server, it takes streams from local or networked players and enables them to be played via the web.

sudo apt-get install icecast2

The package manager will ask you to configure Icecast2. The hostname can stay as it is for now, just set passwords for source, relay and administration, and note what they are for later.

Once setup, check the installation by loading up yer browser and entering your pi’s local ip address plus port :8000 eg 192.168.0.2:8000

The page should look like this:

If yer want to dive into the settings of icecast the file can be located at:

/etc/icecast2/icecast.xml

Check out here for a full list of configuration options and help. If you do edit the file, you’ll need to reload the settings and restart icecast before they take effect.

/etc/init.d/icecast2 graceful-stop
/etc/init.d/icecast2 reload
/etc/init.d/icecast2 start

Streamer

Now we need something to stream to Icecast. Darkice is one example but is a bit outdated and needs soem work. Theres a Tutorial here getting it to work with raspberry pi.

Other streamers you could use are butt & ices but we’re going to be using Mpd. Check out a full list of Icecast apps here.

Setup mpd & mpc

mpd is the music streaming element and mpc is a client attached to it. First we need to install them both.

sudo apt-get install mpc mpd

Then we need to setup up a stream by editing the .conf file.

sudo nano /etc/mpd.conf

In the file are a bunch of examples of how to output to different servers or speakers etc. For now just add the code below to the bottom of the file replacing changing the password to the one you setup earlier.

audio_output {   
    type            "shout"   
    name           "Raspberry Pi MPD Stream"   
    description   "MPD stream on Raspberry Pi"
    host            "localhost"
    port            "8000"
    protocol        "icecast2"
    mount           "/music.mp3"
    password        "password"
    bitrate         "128"
    format          "44100:16:2"
    encoding        "mp3"
    genre           "Personal"
    public          "no" 
}

The we need to restart mpd to load the new settings

sudo /etc/init.d/mpd restart

Now the default directory for music that mpd plays is:

/var/lib/mpd/music/

create a link to the music folder for easier access

sudo ln -s /var/lib/mpd/music/ /home/pi/music

also take control of the folder to add music easier

sudo chown pi music

Once you’ve added some music to the folder, lets build a playlist:

mpc update
mpc ls | mpc add
mpc playlist

this refreshes the folder, lists al the items and builds a playlist with them all.

mpc clear

use this to empty the playlist and start over

now we want to mess with some other options, here are a few.

mpc repeat on
mpc volume 100
mpc random on

and finally lets start playing

mpc play

some other useful commands as well

mpc next
mpc prev
mpc pause
mpc stop

that’s it, yer streamer is all set up being streamed to and music playing. Visit the icecast page again that was pretty blank before, now you should see your stream info displayed there.

Listening

As said before, the icecast page is the ip address of your pi, plus on port 8000. eg 192.168.0.2:8000

If you don’t know what your ip is type

ifconfig

it lists all your connected devices and the ip address assigned. wlan0 is the wireless and eth0 the local plugged in network.

our sream was music.mp3

simply go to 192.168.0.2:8000/music.mp3 using your own ip address, to start listening in, Or use a media player VLC, Umplayer and several others can play streams like this. Just copy paste the address.

So its playing music and you can listen in anywhere in your house/local network, most smart phones will play the stream to if entered in the browser and/or open with your favourite media app, bit of trail and error will help you find what works best.

Webserver

Now what if you want to change track or refresh the playlist, you have to ssh into the pi, type in the command, but you cant do that so easily on a smart phone. So lets setup a web interface.

Setup Apache & PHP

First we need to install a webserver, you can user what you prefer. Theres lighttpd, apache and comanche. For this we’re going to use apache. We’re also going t install php to do the job of handling the signals of our web remote.

sudo apt-get install apache2 php5 libapache2-mod-php5

go to ip address in broswer 192.168.0.10, should see webpage it works

This means apache was installed and setup correctly.

/var/www/

is the root of your website eg

/var/www/index.html

is the same as 192.168.0.1/index.html

Again, to make file creation and ftp a bit simpler/hassle free, take ownership of the directory

sudo chown pi /var/www

create a file this web directory called info.php inside write:

<?php
phpinfo();
?>

now go visit this webpage in your browser and you should see a page with a bunch of dialogue like this

This means php is installed correctly to.

Setup Webplayer

First off we’re going to setup a webplayer, you can choose any yer want. Two good ones are jwplayer and jplayer.

For this we’ll use jwplayer, Download it from the website, unzip it and transfer jwplayer.js and player.swf into the /var/www/ folder.

Now we need to build a quick embed script, replace the ip with yours.

<div id="container">Loading...</div>
	<script type="text/javascript" src="jwplayer.js"></script>
	<script type="text/javascript">
		jwplayer("container").setup({
			file: "http://192.168.0.2:8000/music.mp3",
			flashplayer: "player.swf",
			height: 200,
			width: 400,
			start: 0,
			bufferlength: 5,
			volume: 100
		});
	</script>

Put this into a file called music.php, visit it in the broswer and check to see if it plays. You can always use the setup wizard for help or check here for further settings.

For now with this we can listen in, so lets add some buttons so we can have a remote control. The buttons are going to be images and a bit of JavaScript can detect when there clicked on. This can then call an ajax function to safely execute commands back on the pi.  But for all this to work we also need Jquery. Normally its best for the website to include Jquery from a public hosted server, but in this case, its better having a local copy. Download a copy and save it in your web folder as jquery.js

Now grab some images, heres some example ones, and embed them.

<img id="prev" src="/player/prev.png"/>
<img id="play" src="/player/play.png"/>
<img id="pause" src="/player/pause.png"/>
<img id="stop" src="/player/stop.png"/>
<img id="next" src="/player/next.png"/>

And now the Ajax code to go with them, again replacing the ip address.

var player = null;
		player = document.getElementById("container");

		$("img#prev").click(function()  {		
			var item = "prev"
			$.ajax({
				url: "http://192.168.0.2/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});
		$("img#play").click(function()  {
			var item = "play"
			$.ajax({
				url: "http://192.168.0.2/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);
				}
			})
		});
		$("img#pause").click(function()  {	
			var item = "pause"
			$.ajax({
				url: "http://192.168.0.2/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});
		$("img#stop").click(function()  {	
			var item = "stop"
			$.ajax({
				url: "http://192.168.0.2/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});
		$("img#next").click(function()  {	
			var item = "next"
			$.ajax({
				url: "http://192.168.0.2/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});

With that we just need to build the page remote.php

<?
$action = $_POST['id'];

if ($action == "prev") { exec('mpc prev'); echo "Playing Previous Track";}
if ($action == "play") { exec('mpc play'); sleep(1); echo "Now Playing <script>jwplayer('container').play();</script>";}
if ($action == "pause") { exec('mpc pause'); echo "Paused";}
if ($action == "stop") { exec('mpc stop'); echo "Stopped <script>jwplayer('container').stop();</script>";}
if ($action == "next") { exec('mpc next'); echo "Playing Next Track";}
?>

We use an if action to check the data from the previous page so now commands other than those listed can be executed. There’s also a sleep command on the play button as it also sends back a script to start the webplayer. This gives the stream time to start before the player loads it.

They’ll be a slight delay, but it should be easier than doing it via command line. This interface also works great on my phone.

Listening Anywhere

The final step, what if i want to listen to this at work, or while i’m walking the dog. We already have a nice remote and a stable stream, lets take it to the web.When doing this make sure you have changed your default password and that your icecast passwords are also strong. It may also be a good idea to password protect your web directory with a .htaccess and .htppasswd files but that’s up to you.

First off, assign a static ip to your pi via your router and open up the ports 80 and 8000 to this ip. This will vary from router to router.  Port forward has most bases covered although don’t use there downloadable tool unless yer really want to, can you see me works just as well. There are plenty of other helpful sites out there for this.

So as long as we know our external ip we can listen in online. But most poeple wont have a static address. It can chnage at anytime making it a pain to try to listen in constantly checking what the address has changed to now. No-IP is a handy site which, with a little software installed on your device which sends a ping to there servers, updating them with your ip, giving you a fixed address to visit : http://username.no-ip.org/ so you can still listen in, anywhere, anytime, all for free. If yer have your own domian already with a webhosting compnay add a cname record for a handy shortcut.

With all this setup you will have to change the music.php page a little, replacing the ip address’s with the new static address provided.

For a fully tricked out page, with modified player, styled basically and where it auto-resolves the address check out below.

<?
$siteaddress = "http://";
$siteaddress .= $_SERVER['HTTP_HOST'];
?>
<!DOCTYPE html>
<html>
	<head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="robots" content="none" />
		<link href='http://fonts.googleapis.com/css?family=Convergence|Courgette|Play' rel='stylesheet' type='text/css'>
		<title>Music</title>   
	</head>
	<body>
		<style type="text/css">
		body {  
	font-family: 'party', sans-serif;
	background-color: white;
	font-size: 18px;
	color: black;
	margin: 5px;
}

h1 { 
	font-family: 'courgette', cursive;
	font-size: 26px;
}

a {
	color: #444;
	text-decoration: none;
	font-weight:900;
}
a:hover {
	color: #666;
}

p {
	margin: 5px auto 5px auto;
	width: 320px;
	font-size: 16px;
	padding: 5px;
}

small {
	font-family: 'convergence', cursive;
	font-size: 14px;
}

li {
	list-style: none;	
	margin: 2px;
}

header {
	margin: 10px 0px 10px 0px;
	text-align: center;
}

div#wrapper {
	width: 990px;
	margin: auto;
	text-align: center;
}

div#container_wrapper {
	margin: auto;
}

div#remote img {
    border: 1px outset #000000;
    box-shadow: 0 0 4px #000000 inset;
}

div#remote img:active {
	border: 1px inset #000000;
    box-shadow: 0 0 4px #000000 inset;
}

footer {
	margin: 40px auto 10px auto;
	text-align: center;
}

#nav a {
    color: #444;
    font-size: 12px;
    padding: 5px 5px;
	text-shadow: 0px 4px 4px silver;
	font-family: 'party', sans-serif;
}

#nav a:hover {
	color: #666;
	text-shadow: 0px 6px 4px silver;
}

div.clear {
	padding: 8px;
	clear: both;
}
		</style>
		<header>
			<h1>Music</h1>
		</header>
		<div id="wrapper"><div id="player">
	<div id="remote">
		<script src="jquery.js"></script>
		<img id="prev" src="prev.png"/>
		<img id="play" src="play.png"/>
		<img id="pause" src="pause.png"/>
		<img id="stop" src="stop.png"/>
		<img id="next" src="next.png"/>
		<script type="text/javascript">
		var player = null;
		player = document.getElementById("container");

		$("img#prev").click(function()  {		
			var item = "prev"
			$.ajax({
				url: "<? echo $siteaddress; ?>/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});
		$("img#play").click(function()  {
			var item = "play"
			$.ajax({
				url: "<? echo $siteaddress; ?>/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);
				}
			})
		});
		$("img#pause").click(function()  {	
			var item = "pause"
			$.ajax({
				url: "<? echo $siteaddress; ?>/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});
		$("img#stop").click(function()  {	
			var item = "stop"
			$.ajax({
				url: "<? echo $siteaddress; ?>/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});
		$("img#next").click(function()  {	
			var item = "next"
			$.ajax({
				url: "<? echo $siteaddress; ?>/remote.php",         
				type: "POST",
				data: {id : item},
				success: function (data) {
					$("#result").html(data);

				}
			})
		});	
		</script>
	</div>
	<div id="result"></div>
	<br/>
	<div id="container">Loading...</div>
	<script type="text/javascript" src="/player/jwplayer.js"></script>
	<script type="text/javascript">
		jwplayer("container").setup({
			file: "<? echo $siteaddress; ?>:8000/music.mp3",
			height: 200,
			width: 400,
			start: 0,
			bufferlength: 5,
			volume: 100,
			mute: false,
			skin: "/player/skins/modieus.zip",	
			backcolor: "111111",
			frontcolor: "cccccc",
			lightcolor: "4400BA",
			lightcolor: "4400BA",
			controlbar: "bottom",
			dock: true,
			modes: [
				{ type: "flash", src: "/player/player.swf" },
				{ type: "html5" },
				{ type: "download" }
			],
			levels: [
				{ file: "<? echo $siteaddress; ?>:8000/music.mp3" }
			],
			plugins: {
				subeq: {
					displaymode : "decay",
					decayrate: "16",
					bartopcolor: "A199FF",
					barbasecolor: "090045",
					peakcolor: "1500FF",
					channels: "both",
					noofbars: "32",
					gain: "1.2",
				}
			},
			events: {
				onReady: function() { this.play(); },
				onVolume: function(event) { alert("Volume is "+event.volume); }
			}
		});
	</script>
</div>
		</div>
		<footer>
			<div id="nav">
				<small>
					<a href="index.php">Home</a>
					<a href="music.php">Music</a>				
				</small>
			</div>
			<br/>
		</footer>
	</body>
</html>

Take it Further

Some other additions you could make, install mysql and have the remote.php file send updates to it, so when you next visit the page you can tell whether playing is already ongoing or not. Also display the current track.

Build a search function, to find music in your playlist

Build a script so that you can plug in a usb memory stick, it will scan it, clear the playlist and add all the music on the device a new one.

That about covers it. Hope this helps you out, or you have any other ideas or if something doesn’t work or I’ve made some errors (more than likely) while writing this up please feel free to comment below.

So, for onenote try notehighlight

For online use try codehighlighter

And for wordpress try crayon

the free and easy way to end unwanted subscriptions and rollup the rest into an organized overview made just for you.

Click here to see a zoomable version

So I decided to make a userscript to change the links for me, find it here

After making it, the website got in touch via twitter giving thanks and helping by tweaking it a little better.

Enjoy

I Also added a landing page for the most up-to-date version and start / restart button.

I’ve noticed that with this new canvas it takes a while to load the first time, but after it quite nice, unlike flash where it has ages to pre cache everything each time you refresh. On the downside the audio support isn’t great. There’s a php script to identify the browser and select the correct audio file. Clearing the canvas to start again was also a mystery, so instead made the button use ajax to load the game form a separate page. Restarting it simply empties the block and loads it in again, creating a blank canvas, may not be the best way of doing it but it seems to work fine.

The hard part now, trying to add a score submission box and a high scores table, and after that, actually try get this game out here a little.

I started making a game, tried to use flash, found it hard, asked around, used JavaScript and html 5, here’s the progress after a few hours.

The Long Story

I recently watched the MLP:FIM episode “read it and weep”, and more than anything wanted to make a Daring Do version of temple run. Honestly I had no idea how, so I started researching flash games.

Now I’ve dabbled in flash before but only to make a crude animation, I tried making a longer one but simply didn’t have the patience.

So I looked for some tutorials, and found this list, and from that focused on this one. It was a nice intro and showed the layout and where actions needed to go, as well as explaining some of them as well. But it wasn’t quite the format I wanted so I looked again and found this gem.

This is where things started to go wrong, the scripts wouldn’t compile without error and I had no idea why. After much googling I was using actionscript 3 when I should be using 2. On the whole it was quite confusing and in the end i went searching for another tutorial while my character kept sinking into the ground.

So I yelled out to twitter and my friend Aran pointed me towards JavaScript and html 5. In html 5 there is a new canvas tag, allowing on the fly processing and full applications to run in the browser window. Anyway I’m already used to language so figured this might be a better bet. He sent me this list, and from that I focused on this one.

Now this isn’t quote the side scroller I was after but figured this is close enough to try learn the basics, and after several blank screens I finally got a basic animation to work. Finally finished the tutorial and got here. I replaced the angel with Fluttershy, taking this beast animation and breaking it down to this.I did try change the blocks to clouds but ended up with invisible blocks, the code is there but commented out.

Now I have only been doing this today, so I’m gonna rest and try again tomorrow, replacing the normal blocks with clouds and the super blocks with thunder clouds. After that I would love to try do a Daring Do running platform game. Anyone interested please get in touch, I’m a horrible artist.

To play FlutterJump simply move the mouse to move Fluttershy and jump as high as you can, the blocks will move more and faster the high you get. If you die simply refresh the page to try again.

And thank you very much to Michal Budzynski and his tutorial for helping me get this far.