Interested in learning more about audio production?  Visit AudioPropellor.com.

You are here

Controlling Ableton with a Web Browser


      
      

      
      
      
        
      
    
Blog Post: 

I've been thinking about how audiences can interact with a performing electronic musician.  Since everyone has a phone with a browser these days, I thought it would be cool if audience members could connect to a wireless network and trigger loops from my laptop.  It took a short time to put together and I would call it a prototype.  The final system ended up being Browser -> Apache/PHP -> OSCulator -> Ableton Live .  I imagine that with the power of MAX for Live, you could get rid of the OSCulator part and just accept OSC messages straight from the PHP script.  You could gain all sorts of functionality this way - letting the 'showtrollers', the people on their phones influence video, lights or more subtle aspects of your performance.  

There are a few other ways to achieve control of Ableton (or any other application) with your iPhone or Andriod OS device, but nothing lets you just point at a URL and go.  My first hope was do to do something client side, but the limitations of browsers don't allow javascript to make direct TCP/IP connections, which I would end up needing.  Here are my notes on how it was done.  Once it all came together, it turned out to be relatively easy to send simple messages from a phone to Ableton!  If you want to try this, I'd recommend that you not be a beginner to the ways of the web.  A short familiararity to PHP, webservers, Javascript and the like is in order - I did say it was relatively easy.

A final screen after my weekend of coding:

 

The Web Server

The first thing I worked on was getting the web server on my os x machine working - mostly just refreshing where all the files were located, since I had messed around with it a bit.  I ended up having to change the httpd.conf file to put the server root back to where it should have been so I wouldn't have to search around in the future.  To turn your Apache web server on in OS X you go to the sharing pane of your system preferences. 

You'll need to check the Web Sharing option aand then you'll see two different web site IP addresses.  I just used the 'computer's website'.  Create a folder in the Computer Website Folder and put a test file called index.html inside it.  You can enter whatever text you like inside that file.  Navigate to the IP address shown in the Web Sharing panel and take a look.  You should be able to change to the folder you created and then see the index.html file displayed.  If not, you've probably got Apache issues.

One other note.  You can see I have a local IP address of 192.168.1.148.  My computer can also be reached at samsmac.local on the network.  It's usually better to use your computer name, because you'll get a new IP every so often if you are getting a dynamic IP address from your router - and you probably are.  There is also the option to use a network name instead of IP address in the PHP script we discuss....NOW!

Web Server to MIDI

After I had this working, it was time to figure out how to make a web server spit out MIDI.  I decided that it would probably be best to make it use the Open Sound Control protocol (OSC) and have that translated into MIDI by OSCulator.  OSC lets you send musical and control messages of TCP/IP, so it works quite nicely in our imagined networked world (and would let you dedicate a machine to be a webserver if needed, distributing some work off your music machine).  I managed to find a PHP OSC library written by a someone who looks to be a real genius, or at least a genuine renaissance man - Andy Schmeder.  The library is avaliable here.  At that point, I decided to set up a test page which would call his test function.  It was just a .php page which included the PHP library and then ran his test function - you can find it at the end of the library.  You also need to set the script to use the proper IP address and port number that you have your OSC server listening on (more on that in a second).

// Uncomment to run the test

// test_osc_lib();

From there I took at look at the OSC specification and tried to figure out what this thing was sending.  It's all laid out there, but I needed a way to peek into traffic.  As any geek who's even been halfway around the block would know, you need some wireshark in your life.  I opened wireshark up, and selected the 'lo0' loopback interface to capture my local traffic.  

Here is a shot of Wireshark capturing the UDP packet which was sent from Apache to the IP address I set up in the osc.php script.  I'm sending a number to /inst1p1.  

I took at look at that spec and tried to figure out how everything was working, eventually mapping out what was being output from the php test script to the OSC spec and ended up with this, to make sure I understood what was happening.

/** Run some tests to make sure the library behaves in a sane way.

Output

_#_b_u_n _d_l_e00 00000000 00000001 000000_0 _

address pattern...type - timetag, Infinitum, OSC blob

/_t_e_s _t000000 _,_t_I_b _d000000 c4_e_5ff 00000005 00000009 _a_o_e_u _a_o_e_u _!000000 _@dbfcbb 851eb8_R 000000_< 

_#_b_u_n _d_l_e00 00000000 00000001 000000_( _

address pattern...type int, int...

/_b_a_r 00000000 _,_i_i_[ _i_i_i_] 00000000 00000001 00000002 00000001 00000002 00000003  

*/

So I had a basic understanding of what was going on and was ready to start sending some messages to OSCulator.  I fired it up to listen and set the osc.php script to the same port.  Lo and behold, it was receiving signals.

OSC all set up after the project was done:

Those signals can be translated to midi notes and CCs as you see in the picture.  Once that is working, it is basic Ableton work to get that wired up to your loops, patterns or whatnot in Ableton.

Refinement

I then went through a few hours of interation - working out some concepts of how this thing would work on a mobile phone, my ideal target.  I decided I'd like to have a 'main menu' of sorts which would let the user choose which instrument to control.  Once they clicked the instrument, they'd have a choice of loops to trigger and could turn an effect on or off and move a slider to modulate a parameter.

The 'main menu', allowing for selection of an instrument:

I downloaded jquery to do the AJAX calls I would be coding into the interface.  AJAX would let me have a button press call a PHP script and then swap out some section of the webpage to provide feedback.  It's so much easier to do stuff like this than when I first tried it, coding some AJAX into a Dreamweaver page in 2005.

I also eventually found jquery mobile, which made writing the mobile interface very easy, and made it look somewhat attractive.  I'm not sure if the jquery mobile framework is the way to go, but it was the fastest way for me.  You code only one page and the jquery swaps out the content area as you click links.  This means that the javascript needed to be the same on every page - which made things a little tougher, but I probably have a better understanding of jquery now for it.

So I ended up with one html file - index.html.  It starts with a few includes, has a bit of jquery scripts and then just plain html - when tagged up properly, it will send messages to OSCulator.  For example, this is a line that creates a button which triggers loop one of instrument 1:

<div data-icon = "arrow-r" data-role = "button" id="inst1p1" class="button">Pattern 1</div>

The when clicked, jquery is triggered that calls my .php file.  Here is the jquery.

$(".button").click(function(){  

var thisaddress = $(this).attr("id");

var thisaddress = "/" + thisaddress;

    $.get("loop1.php", { address: thisaddress, duration: ".25" },

  function(data){

    //alert("Data Loaded: " + data);

  //$("#quote").html(data);

$thisid = thisaddress.substring(1, thisaddress.length);

$thisid = "#" + $thisid;

$($thisid).parent().prev().html(data);

}); 

   });

 

And the PHP:

<?php

include 'osc.php';

$address = $_GET["address"];

$duration = $_GET["duration"];

send_note_on_off($address,$duration);

?>

So the jquery is getting the ID, building the OSC address and then calling the PHP page, passing the GET parameters of the address and duration.  Perhaps you could code a note off message on some sort of touch off event, but this was already pushing my abilities to their max.

The PHP function send_note_on_off is a function I created to meet my needs, since osc.php is just a library.  Andy did all the hard work, you just need to call it.

 

function send_note_on_off($address,$duration)

{

send_osc_message($address,1);

sleep($duration);

send_osc_message($address,0);

echo "sent message to " . $address;

}

The echo there is written to an output area at the top of the page named "quote", which should have been changed to something a little more meaningful.

So by placing more buttons on our page with different IDs, we can send different messages to OSCulator, or any other OSC server.  

The most difficult thing to set up was the slider - and I'm afraid I don't have it working reliably yet.  It seems to need a page refresh to get working sometime.  But when you can switch effects and then change the mix or feedback, it's worth the fiddling.  I'm not sure if the problem is from the jquery mobile framework or something in my jquery code - just getting a nice slider that you could actually grab with a finger was a pain!  If you drag past the edge of the control with a mouse it will also not send the value.  Seems to work OK on the phone. 

Code

I've attached my web directory so you can see what I've got so far.  It's nothing amazing, but might get you going.  Please pay no mind to the 'name' of the application 'Showtroller'.  It's horrible, my wife already told me so.

Next steps...

Set up more instruments and map them to Ableton.

Two way communication.  Could you use MAX/MSP to send OSC messages back to the browser somehow?  MAX/MSP just needs to send messages to a .php page - unfortunately, the library only handles 'client' duties, the sending of messages.

Get the slider working reliably.

Create some kind of system to only let one person be on each instrument.  Hand out cards and the concert with codes to access the page?  Once first person is in, lock others out?

Measure latency.  Could it be reduced by using another OSC library?

AttachmentSize
showtroller.zip13.34 KB