diff --git a/assets/js/application.js b/assets/js/application.js
index 1aa44eb..758ddc4 100644
--- a/assets/js/application.js
+++ b/assets/js/application.js
@@ -10,8 +10,13 @@ QueueSong.findAll({}, function(songs) {
 });
 
 $(document).ready(function() {
-  $('#transport').html(can.view('transportTemplate'));
-
-  $('#controls button').on('click', function(e) {
+  // Bind transport click events.
+  $('#transport').on('click', '#controls button', function(e) {
+    e.preventDefault();
+    var action = $(e.currentTarget).data('action');
+    can.ajax({ url: '/api/control/'+action, type: 'PUT' });
   });
+
+  // Render transport
+  $('#transport').html(can.view('transportTemplate'));
 });
diff --git a/views/index.erb b/views/index.erb
index e91d848..c8df362 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -26,11 +26,11 @@
 
     <script type="text/mustache-handlebars" id="transportTemplate">
       <div id="controls">
-        <button>previous</button>
-        <button>play</button>
-        <button>pause</button>
-        <button>stop</button>
-        <button>next</button>
+        <button data-action="previous">previous</button>
+        <button data-action="play">play</button>
+        <button data-action="pause">pause</button>
+        <button data-action="stop">stop</button>
+        <button data-action="next">next</button>
       </div>
     </script>