< Pete Goodman Web developer >

Labs - Mac PHP/JS Volume Control

Monday 11th October 2010, 00:00

Probably the best (or most useful) part of the Ghetto Blaster thing I put together is the ability to control the Mac system volume remotely. This is a simple mobile-optimised site that contains just this functionality.

Volume control screenshot

The technology behind it is quite straightforward - JavaScript intercepting a click on an HTML link, sends an Ajax call to a PHP script that executes a command line call via shell_exec to trigger an applescript.

Ultimately, the PHP function called via Ajax that controls the volume is this:

 
function setVolume($vol) {
    shell_exec("osascript -e 'set volume output volume ".$vol."'");
}

The current volume is displayed by adjusting the colour of the volume blocks. To add a bit of visual effect, 'active' volume blocks have a bit of glow, added with CSS3 box shadow:

 
ul#vol li.active a span {
    background:#0f4;
    -webkit-box-shadow: 0px 0px 20px #0f4;
}

The site is optimised for a mobile, specifically an iPhone or Android phone. It uses CSS3 media queries to determine whether these devices are currently vertical or horizontal, and the layout of the volume control is adjusted accordingly.

 
#wrapper {
    width:480px;
    height:208px; /* 320 - bumf */
}

ul#vol {
    height:110px;
}

ul#vol li {
    width:30px;
    margin-right:7px;
}


@media (max-width: 320px) {
    #wrapper {
        width:320px;
        height:356px; /* 480 - bumf */
    }

    ul#vol {
        height:230px;
        width:297px;
    }

    ul#vol li {
        width:20px;
        margin-right:7px;
    }
}

The source code is available from github.

Comments

Be the first person to comment on this lab...

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.