diff --git a/oxcd/static/js/index.js b/oxcd/static/js/index.js
index 55e5779..a784fcc 100644
--- a/oxcd/static/js/index.js
+++ b/oxcd/static/js/index.js
@@ -121,6 +121,7 @@ Ox.load('UI', function() {
             app.loaded = true;
             app.$ui.appPanel.replaceElement(1, app.$ui.list = app.ui.list());
         });
+        app.$ui.player = app.ui.player();
     }
     app.ui.appPanel = function() {
         var $element = Ox.SplitPanel({
@@ -175,6 +176,24 @@ Ox.load('UI', function() {
             });
         return $element;
     };
+    app.ui.player = function() {
+        var that = {},
+            player = document.createElement('audio');
+        that.play = function(id) {
+            if(id) {
+                player.src = '/track/' + id + '.mp3';
+                $(player).one('loadedmetadata', function() {
+                    player.play();
+                });
+            } else {
+                player.play();
+            }
+        }
+        that.pause = function() {
+            player.pause();
+        }
+        return that;
+    }
     app.ui.statusbar = function() {
         var $status = $('<div>').attr({id: 'status'}),
             $element = Ox.Bar({size: 24})
@@ -270,7 +289,9 @@ Ox.load('UI', function() {
         if (id != app.user.playing) {
             app.user.playing = id;
             app.$ui.list.value(app.user.playing, 'playing', true);
+            app.$ui.player.play(id);
         }
     };
     app.load();
+    window.app = app;
 });