Mac PHP/JS Volume Control

Overview

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.

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:

1
2
3
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:

1
2
3
4
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  #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;
      }
  }