Music Player Daemon web remote for iOS

BaconPie · 2011-02-27 19:58:31

I wanted a useful/pretty interface for MPD on my phone following a form == function philosophy. I figured it would come in handy for anyone else wanting to control MPD with their phones so I'm posting it here. I'll get it centralised somewhere eventually; probably use this opportunity to learn about git or something. It's now up on github.

Also, I could also do with some feedback on how well it works with iPad's and Android phones/tablets. It was built with the iPhone's interface in mind but I know it still works great on Google Chrome!

I tried to keep the source neat and tidy so that anyone else wanting to build on this, add features or even develop their own web interface could look and learn. Having said that it could probably do with a few more comments in the source...

To install you pretty much just copy all the files onto your web server and set their permissions to read by all (a+r). There is a mpd config file if you aren't using the standard port or MPD is running on another computer.

Then browse to it on your phone and press the send icon. Then "add to home screen" (provided you're on a static IP). It should behave almost as if it's a native application.

You can download it here.

And here are some screenshots.
The main interface
The play queue
A playlist
Searching for songs
Springboard icons

Feedback would be appreciated.

Edit: Just found out that there is already 'an app for that'. It's called MPoD. It's actually pretty good.

Edit 2 (25/10/2011): I've stopped working on this because of my uni work load but it's now a part of the phpMpReloaded project. Feel free to contribute/fork/whatever!

Last edited by BaconPie (2011-10-25 15:20:37)

cesura · 2011-02-27 21:17:16

This is absolutely fantastic! Thank you!

EDIT: Now all I need is to find a way to tunnel mpd through apache and listen to my music from anywhere.
EDIT EDIT: A real request this time. Does iWebKit have a slider of some sort that could be used to adjust the volume on the host (send results to amixer or something)?

Last edited by cesura (2011-02-27 21:23:07)

BaconPie · 2011-02-28 09:32:16

Unfortunately It doesn't, though I hear he is making a new version that might. Also, the HTML5 slider doesn't work on iPhone (that or the iWebKit CSS screwed it over).

If I wanted to build it in though I'd have to copy the actual sliders (screenshot + photoshop/gimp) and then use some clever CSS. Don't know how I'd drag it though. May have to just use some static buttons.

Update probably won't be for a while either. Feel free to work on it yourself though.

Screenshots if you manage to get it working.

Last edited by BaconPie (2011-02-28 09:32:46)

cesura · 2011-02-28 23:47:47

Darn. Well, I suppose I could try to hack something together in Javascript (jQuery maybe?). I'll post back if I manage to make any progress.

Last edited by cesura (2011-02-28 23:48:29)

sironitomas · 2011-03-01 00:11:02

Any possibility to make a client for Android?

Regards

cesura · 2011-03-01 00:59:33

Wrote this (very horribly!) hacked-together code:

Put in <head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
        #slider { margin: 10px; }
</style>
 
<script>
        $(document).ready(function(){
                $('#slider').slider( 
                { 
                        handle: '.handler2', 
                        value: 0, 
                        min: 0, 
                        max: 100, 
                        step: 1, 
                        slide: function(e, ui)
                        { 
                                var level = ui.value; 
                                document.volumeSet.toSet.value = level;
                        }       
                });     
        });
</script>

Put in <body>

<div id="slider"></div>

<form action="blah.php" method="GET" name="volumeSet">
        <input type="hidden" name="toSet" value=0 />
        <input type="submit" value="Set" />
</form>

blah.php

<?php
        $level = $_GET['toSet'];
        $command = "/usr/bin/amixer set Master " . $level . "%";
        shell_exec($command);
        header("Location: index.php");
?>

As of now, the slider always starts at zero. I was thinking of doing something like this:
index.php loads, redirects -> getvolume.php loads, pulls current level from amixer, redirects -> index.php?volume=$level loads

litemotiv · 2011-03-01 10:08:07

sironitomas wrote:

Any possibility to make a client for Android?

There is a really functional open source MPD client for Android called pmix.

Arch Linux

#1 2011-02-27 19:58:31

Music Player Daemon web remote for iOS

#2 2011-02-27 21:17:16

Re: Music Player Daemon web remote for iOS

#3 2011-02-28 09:32:16

Re: Music Player Daemon web remote for iOS

#4 2011-02-28 23:47:47

Re: Music Player Daemon web remote for iOS

#5 2011-03-01 00:11:02

Re: Music Player Daemon web remote for iOS

#6 2011-03-01 00:59:33

Re: Music Player Daemon web remote for iOS

#7 2011-03-01 10:08:07

Re: Music Player Daemon web remote for iOS

Board footer