Skip to content

Instantly share code, notes, and snippets.

@stevenleeg
Created July 12, 2013 04:31
Show Gist options
  • Save stevenleeg/5981467 to your computer and use it in GitHub Desktop.
Save stevenleeg/5981467 to your computer and use it in GitHub Desktop.
WIP: Audio streaming support in Grooveboat.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment