Skip to content

Commit

Permalink
Bootstrapified
Browse files Browse the repository at this point in the history
  • Loading branch information
@agektmr
agektmr committed Aug 15, 2012
1 parent 10c7280 commit 3c0b67b
Show file tree
Hide file tree
Showing 8 changed files with 14,652 additions and 213 deletions.
47 changes: 0 additions & 47 deletions public/css/style.css
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,47 +0,0 @@
body {
padding: 30px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

header {
margin:30px 0;
}

input#text {
width:300px;
}

div#player {
margin: 10px 0;
padding: 5px 10px;
border: dotted 1px gray;
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
}

div#dropper {
}

div#visualizer {
border: 1px solid #aaa;
width: 600px;
height:150px;
}

div#conversation {
-webkit-box-orient: horizontal;
}

div#attendee {
width:150px;
}

ul#msg {
display:inline-block;
word-wrap: break-word;
}

div#listener {
width:600px;
height:150px;
}
83 changes: 49 additions & 34 deletions public/js/AudioStreamer.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,13 +1,32 @@
/*
Copyright 2012 Eiji Kitamura
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Author: Eiji Kitamura (agektmr@gmail.com)
*/
'use strict';

var AudioStreamer = (function() { var AudioStreamer = (function() {
var BUFFER_LENGTH = 2048, var BUFFER_LENGTH = 2048,
ws_host = window.location.href.replace(/(http|https)(:\/\/.*?)\//, 'ws$2'), ws_host = window.location.href.replace(/(http|https)(:\/\/.*?)\//, 'ws$2'),
ac = null ac = null;
if (window.webkitAudioContext) { if (window.webkitAudioContext) {
ac = new webkitAudioContext(); ac = new webkitAudioContext();
} else { } else {
alert('You need Chrome to play with this demo'); alert('You need Chrome to play with this demo');
return; return;
}; }


/* /*
* user_id: user id of original sender (null if initialization) * user_id: user id of original sender (null if initialization)
Expand Down Expand Up @@ -144,7 +163,7 @@ var AudioStreamer = (function() {
offset += 4; offset += 4;
msg_obj.buffer_array = new Array(msg_obj.ch_num); msg_obj.buffer_array = new Array(msg_obj.ch_num);
for (var i = 0; i < msg_obj.ch_num; i++) { for (var i = 0; i < msg_obj.ch_num; i++) {
msg_obj.buffer_array[i] = new Float32Array(msg_obj.buffer_length) msg_obj.buffer_array[i] = new Float32Array(msg_obj.buffer_length);
for (var j = 0; j < msg_obj.buffer_length; j++) { for (var j = 0; j < msg_obj.buffer_length; j++) {
msg_obj.buffer_array[i][j] = view.getFloat32(offset); msg_obj.buffer_array[i][j] = view.getFloat32(offset);
offset += 4; offset += 4;
Expand All @@ -155,9 +174,10 @@ var AudioStreamer = (function() {
throw e; throw e;
} }
} }
} };
})(); })();


// TODO: kill this
var AttendeeManager = (function() { var AttendeeManager = (function() {
var _user_id = null, var _user_id = null,
_name = '', _name = '',
Expand All @@ -179,7 +199,7 @@ var AudioStreamer = (function() {
var deletion = _attendees.filter(function(_attendee) { var deletion = _attendees.filter(function(_attendee) {
return attendees.every(function(attendee) { return attendees.every(function(attendee) {
return (attendee.user_id != _attendee.user_id); return (attendee.user_id != _attendee.user_id);
}) });
}); });
var addition = attendees.filter(function(attendee) { var addition = attendees.filter(function(attendee) {
}); });
Expand Down Expand Up @@ -211,7 +231,7 @@ var AudioStreamer = (function() {
buffers.push(that.audioBuffer[i].shift() || new Float32Array(BUFFER_LENGTH)); buffers.push(that.audioBuffer[i].shift() || new Float32Array(BUFFER_LENGTH));
} }
if (that.socket) { // only player have socket set if (that.socket) { // only player have socket set
if (that.audioBuffer[0].length == 0) { if (that.audioBuffer[0].length === 0) {
that.stop(); that.stop();
} else { } else {
var msg = AudioMessage.createMessage({ var msg = AudioMessage.createMessage({
Expand All @@ -220,10 +240,10 @@ var AudioStreamer = (function() {
buffer_array:buffers buffer_array:buffers
}); });
that.socket.send(msg.buffer); that.socket.send(msg.buffer);
} }
} }
for (var i = 0; i < buffers.length; i++) { for (var j = 0; j < buffers.length; j++) {
event.outputBuffer.getChannelData(i).set(buffers[i]); event.outputBuffer.getChannelData(j).set(buffers[j]);
} }
}; };
}; };
Expand Down Expand Up @@ -255,36 +275,30 @@ var AudioStreamer = (function() {
this.websocket = new WebSocket(ws_host+'/socket'); this.websocket = new WebSocket(ws_host+'/socket');
this.websocket.onopen = function() { this.websocket.onopen = function() {
that.websocket.binaryType = 'arraybuffer'; that.websocket.binaryType = 'arraybuffer';
console.debug('socket established.'); console.debug('socket established.');
if (typeof callback == 'function') { if (typeof callback == 'function') {
callback(); callback();
}; }
that.heartbeat = setInterval(as.sendHeartBeat.bind(that), 30 * 1000); that.heartbeat = setInterval(that.sendHeartBeat.bind(that), 30 * 1000);
}; };
this.websocket.onmessage = function(req) { this.websocket.onmessage = function(req) {
var msg = '';
try { try {
if (typeof req.data == 'string' && typeof that.onctrlmsg == 'function') { if (typeof req.data == 'string') {
console.debug(req.data); console.debug(req.data);
// string // string
var msg = TextMessage.parseMessage(req.data); msg = TextMessage.parseMessage(req.data);
switch (msg.type) { if (msg.type == 'connected') {
case 'connected':
AttendeeManager.setUserId(msg.user_id); AttendeeManager.setUserId(msg.user_id);
break; return;
case 'connection': }
if (msg.type == 'connection') {
AttendeeManager.setAttendees(msg.message); AttendeeManager.setAttendees(msg.message);
that.onctrlmsg(msg);
break;
case 'message':
that.onMessage(msg.name+': '+msg.message);
break;
case 'start_music':
that.onMessage(msg.name+' started playing music');
break;
} }
that.onMessage(msg);
} else { } else {
// binary // binary
var msg = AudioMessage.parseMessage(req.data); msg = AudioMessage.parseMessage(req.data);
if (msg.user_id == AttendeeManager.getUserId()) return; // skip if audio is originated from same user if (msg.user_id == AttendeeManager.getUserId()) return; // skip if audio is originated from same user
for (var ch = 0; ch < msg.ch_num; ch++) { for (var ch = 0; ch < msg.ch_num; ch++) {
that.listenerBuffer[ch].push(msg.buffer_array[ch]); that.listenerBuffer[ch].push(msg.buffer_array[ch]);
Expand All @@ -296,7 +310,6 @@ var AudioStreamer = (function() {
}; };
this.websocket.onclose = function() { this.websocket.onclose = function() {
clearInterval(that.heartbeat); clearInterval(that.heartbeat);
alert('connection closed.');
}; };
this.websocket.onerror = function() { this.websocket.onerror = function() {
alert('connection error.'); alert('connection error.');
Expand All @@ -308,8 +321,8 @@ var AudioStreamer = (function() {
// TODO: move visual element to outside // TODO: move visual element to outside
this.visualizer = new SpectrumVisualizer(ac, { this.visualizer = new SpectrumVisualizer(ac, {
elem: document.getElementById('visualizer'), elem: document.getElementById('visualizer'),
width: 600, width: 580,
height: 150 height: 178
}); });
this.visualizer.connect(this.audioMerger, ac.destination); this.visualizer.connect(this.audioMerger, ac.destination);
}; };
Expand All @@ -328,6 +341,8 @@ var AudioStreamer = (function() {
this.websocket.send(msg); this.websocket.send(msg);
}, },
updatePlayer: function(file, callback, playEndCallback) { updatePlayer: function(file, callback, playEndCallback) {
if (file.type.indexOf('audio') !== 0)
throw 'this is not an audio file.';
var that = this; var that = this;
if (this.audioPlayer) this.audioPlayer.stop(); if (this.audioPlayer) this.audioPlayer.stop();
this.visualizer.disconnect(); this.visualizer.disconnect();
Expand All @@ -345,7 +360,7 @@ var AudioStreamer = (function() {
for (var i = 0; i < buffer.length; i++) { for (var i = 0; i < buffer.length; i++) {
var index = ~~(i/BUFFER_LENGTH); var index = ~~(i/BUFFER_LENGTH);
var offset = i%BUFFER_LENGTH; var offset = i%BUFFER_LENGTH;
if (offset == 0) that.buffer[ch][index] = new Float32Array(BUFFER_LENGTH); if (offset === 0) that.buffer[ch][index] = new Float32Array(BUFFER_LENGTH);
that.buffer[ch][index][offset] = buffer.getChannelData(ch)[i]; that.buffer[ch][index][offset] = buffer.getChannelData(ch)[i];
} }
} }
Expand Down Expand Up @@ -381,11 +396,11 @@ var AudioStreamer = (function() {
this.websocket.close(); this.websocket.close();
clearInterval(this.heartbeat); clearInterval(this.heartbeat);
console.debug('socket disconnected.'); console.debug('socket disconnected.');
}; }
} }
}; };


return function(host, callback) { return function(host, callback) {
return new AudioStreamer(host, callback); return new AudioStreamer(host, callback);
}; };
})(); })();
30 changes: 25 additions & 5 deletions public/js/SpectrumVisualizer.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,3 +1,22 @@
/*
Copyright 2012 Eiji Kitamura
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Author: Eiji Kitamura (agektmr@gmail.com)
*/
'use strict';

var SpectrumVisualizer = (function() { var SpectrumVisualizer = (function() {
var visualizers = [], var visualizers = [],
requestAnimationFrame = window.requestAnimationFrame || requestAnimationFrame = window.requestAnimationFrame ||
Expand Down Expand Up @@ -30,7 +49,7 @@ var SpectrumVisualizer = (function() {
for (var i = 0; i < this.width; i++) { for (var i = 0; i < this.width; i++) {
var index = ~~(length / this.width * i); var index = ~~(length / this.width * i);
var value = ~~(this.height - ((freq[index] || 0) / 256 * this.height)); var value = ~~(this.height - ((freq[index] || 0) / 256 * this.height));
if (i == 0) this.cc.moveTo(0, value); if (i === 0) this.cc.moveTo(0, value);
this.cc.lineTo(i + 1, value); this.cc.lineTo(i + 1, value);
} }
this.cc.stroke(); this.cc.stroke();
Expand All @@ -45,11 +64,12 @@ var SpectrumVisualizer = (function() {
* } * }
*/ */
var SpectrumVisualizer = function(audioContext, params) { var SpectrumVisualizer = function(audioContext, params) {
var canvas;
this.ac = audioContext; this.ac = audioContext;
if (params.elem.querySelector('canvas')) { if (params.elem.querySelector('canvas')) {
var canvas = params.elem.querySelector('canvas'); canvas = params.elem.querySelector('canvas');
} else { } else {
var canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
params.elem.appendChild(canvas); params.elem.appendChild(canvas);
} }
canvas.setAttribute('width', params.width || 400); canvas.setAttribute('width', params.width || 400);
Expand Down Expand Up @@ -84,5 +104,5 @@ var SpectrumVisualizer = (function() {


return function(audioContext, params) { return function(audioContext, params) {
return new SpectrumVisualizer(audioContext, params); return new SpectrumVisualizer(audioContext, params);
} };
})(); })();
Loading

0 comments on commit 3c0b67b

Please sign in to comment.