WIP: Audio streaming support in Grooveboat.

audiostreaming.wip.patch

diff --git a/static/application.js b/static/application.js
index b4dc334..e83086b 100644
--- a/static/application.js
+++ b/static/application.js
@@ -116,16 +116,21 @@ function RoomCtrl($scope, $routeParams, groove, localStorageService) {
     $scope.tracks = groove.playlists[groove.activePlaylist];
     $scope.files = [];
     $scope.tempGravatarEmail = groove.me.gravatar;
-
     $scope.currentTrack = null;
-
     $scope.chat_messages = [];
-
     $scope.newMessages = false;
-
     $scope.currentUser = groove.me;
     $scope.users.push(groove.me);
 
+    // Set up MediaSource
+    window.MediaSource = window.MediaSource || window.WebKitMediaSource;
+    var mediaSource = new MediaSource(),
+        sourceBuffer = null,
+        waitingChunks = [],
+        audioTag = angular.element(document).find("audio")[0];
+    
+    audioTag.src = window.URL.createObjectURL(mediaSource);
+
     $scope.switchTab = function(tab) {
         if(tab == "chat" && $scope.newMessages) {
             $scope.newMessages = false;
@@ -267,6 +272,30 @@ function RoomCtrl($scope, $routeParams, groove, localStorageService) {
             $scope.users.splice(i, 1);
         });
     });
+
+    groove.on("newChunk", function(chunk) {
+        // MediaSource isn't ready yet. Store the chunk.
+        if(!sourceBuffer) {
+            waitingChunks.push(chunk);
+            return;
+        }
+
+        sourceBuffer.appendBuffer(chunk);
+    });
+
+    // MediaSource events
+    mediaSource.addEventListener("webkitsourceopen", function(e) {
+        console.log("MediaSource open");
+        sourceBuffer = mediaSource.addSourceBuffer("audio/mpeg");
+
+        // Load all chunks from the buffer
+        for(var i in waitingChunks) {
+            console.log("Loading chunk");
+            sourceBuffer.appendBuffer(waitingChunks[i]);
+        }
+
+        waitingChunks = [];
+    });
 }
 
 RoomListCtrl.$inject = ["$scope", "$location", "groove", "localStorageService"];
diff --git a/static/grooveboat.js b/static/grooveboat.js
index c36b54a..dff1489 100644
--- a/static/grooveboat.js
+++ b/static/grooveboat.js
@@ -454,8 +454,9 @@
             console.error('got chunk from non-dj');
             return;
         }
-        return;
+
         var chunkBuf = StringView.base64ToBytes(data);
+        this.emit("newChunk", chunkBuf);
     };
 
     function User(groove, id) {
diff --git a/static/templates/room.html b/static/templates/room.html
index 74b1bb0..c62f4f1 100644
--- a/static/templates/room.html
+++ b/static/templates/room.html
@@ -49,6 +49,7 @@
 </div>
 
 
+<audio id="audio" type="audio/mpeg"></audio>
 <div class="now-playing" ng-show="currentTrack">
     <div class="now-playing-artist">{{currentTrack.artist}}</div>
     <div class="now-playing-track">{{currentTrack.title}}</div>