My MPD web interface in just 383 byte

gerben · Post by **gerben** » Fri Sep 16, 2011 5:43 am

I created a AJAX web interface for MPD. All the logic is inside a javascript file hosted on a remote server, so you only need 383 bytes of diskspace on the router. One index.html file that loads the javascript, and one cgi-bin shell script that forwards mpd commands send by the interface to the mpd process using nc.

I created a demo page to see it in action. It's a simulation, so you can't turn on my radio

http://gerben.algemeenbekend.nl/mpc/

It's not entirely finished, but enough to be usable. When I have more time I will probably add playlist manipulation to it.

The OpenWrt image of Jeff already had a http client running, so you just need to create the following files

/www/index.html

Code: Select all

<!DOCTYPE html><html><head><title></title><meta name="viewport" content="width=device-width">
<link rel="mpd" href="cgi-bin/mpd">
<body><script src="http://gerben.algemeenbekend.nl/mpc/mpc.js"></script>

and /www/cgi-bin/mpd (chmod to allow execute)

Code: Select all

#!/bin/sh
echo "Content-type: text/plain"
echo "Connection: close"
echo ""

read sentcommand

if [ -z "$sentcommand" ];then
      exit
fi

echo "$sentcommand" | nc 127.0.0.1 6600

That is all. Now open your browser and enter http://192.168.1.1 or whatever ip you assigned to the router. It should also work on smartphones. If you use a iPhone you add it to your homescreen and will be almost like an app.

Feel free to ask questions, report bugs (or do feature requests if you ask nicely

).

PS. licensing is WTFPL, except for some of the icons that are GPL.
PS2. I forgot the meta viewport in the html file. The code above is now corrected.

eam · Post by **eam** » Sat Sep 24, 2011 10:58 am

Nice! Two questions:

1) Is there any reason that mpc.jc couldn't be served from the router too? It's about 15 kB, right?

2) I have done some basic Javascript, but no Ajax, and am trying to understand how mpc.js works. How does

Code: Select all

<div id="playback">\
<a href="#" id="prev">previous</a> \
<a href="#" id="stop">stop</a> \
<a href="#" id="play">play</a> \
<a href="#" id="pause">pause</a> \
<a href="#" id="next">next</a> \
<a href="#" id="repeat">repeat</a> \
<a href="#" id="norepeat">norepeat</a> \
<a href="#" id="volume">volume</a> \
</div>

get rendered into the button icons?

eam · Post by **eam** » Sat Sep 24, 2011 11:12 am

gerben wrote: When I have more time I will probably add playlist manipulation to it.

That would be handy. Also, it would be great to be able to select from a list of playlists. I'm planning to organize my stations by genre into different playlists ('News', 'Folk', 'Classical', etc).

gerben · Post by **gerben** » Sat Sep 24, 2011 1:01 pm

1) You could put the JS and CSS and images on the router, but choose to put as little as possible on the router itself. Partly just for the fun or using just 383 bytes. But mainly for ease of development. Also I don't know how I can 'upload' binary data (images) to the router using telnet.
Also other people using it would automatically get updates.
I put the all files you need here: http://gerben.algemeenbekend.nl/mpc/mpc.zip (and as an attachment to this post) so you can put them on your router or host them yourself.

2) The JS load the html into the page. The html gets rendered by the css added (http://gerben.algemeenbekend.nl/mpc/mpc.css). The css loads some images for the controls. I also add some classes to the body element to indicate what buttons should be shown. The css hides and shows the play/pause/stop button and the repeat/no-repeat button.
The JS is not real pretty at the moment, and kind of hacked together to get something working as fast as possible.
Hope that makes it a bit clearer. Let me know if there is anything else you want to know.

3) the playlists selection was something that was on my wishlist to.

eam · Post by **eam** » Sat Sep 24, 2011 2:48 pm

That helps a lot ... many thanks (also for the zip file)!

gerben · Post by **gerben** » Mon Sep 26, 2011 11:46 am

I added a playlist select option. Not real pretty at the moment but works

You can also drag playlist items to move them in the current playlist (have to check if it works or perhaps breaks on iPhone and the like).
Not yet possible to save the current playlist back to file. It seems you can't overwrite a already existing playlist in mpd, which really sucks. Perhaps I can just remove the playlist and than save it, but that seems like asking for problems. To be continued.

MightyOhm.com

My MPD web interface in just 383 byte

My MPD web interface in just 383 byte

Re: My MPD web interface in just 383 byte

Re: My MPD web interface in just 383 byte

Re: My MPD web interface in just 383 byte

Re: My MPD web interface in just 383 byte

Re: My MPD web interface in just 383 byte