Fire JS Bin - AudioStream

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/*
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 BUFFER_LENGTH = 8192,
      ws_host = "http://agektmr.node-ninja.com:3000/".replace(/(http|https)(:\/\/.*?)\//, 'ws$2');

/*
   * user_id: user id of original sender (null if initialization)
   * name: name of sender
   * type: message type ('connection'|'connected'|'message'|'heartbeat'|'start_music')
   * message: message body (array of {user_id: *, name: *} if type is 'connection' and from server)
   *
   * { // connection (client to server)
   *   user_id: null,
   *   name: 'agektmr',
   *   type: 'connection',
   *   message: null
   * }

* { // connection (server to client)
   *   user_id: 0,
   *   name: 'agektmr',
   *   type: 'connection',
   *   message: [
   *     {user_id: 1, name: 'test'},
   *     {user_id: 2, name: 'test2'}
   *   ]
   * }
   *
   * { // connected
   *   user_id: 0,
   *   name: 'agektmr',
   *   type: 'connected',
   *   message: null
   * }
   *
   * { // message
   *    user_id: 0,
   *    name: 'agektmr',
   *    type: 'message',
   *    message: 'hello!'
   * }
   *
   * { // start_music
   *    user_id: 0,
   *    name: 'agektmr',
   *    type: 'start_music',
   *    message: null
   * }
   */
  var TextMessage = {
    createMessage: function(type, message) {
      if (type != 'connection' &&
          type != 'message' &&
          type != 'heartbeat')
        throw 'message type is unknown';
      var msg = {
        user_id: AttendeeManager.getUserId(),
        name: AttendeeManager.getName(),
        type: type,
        message: message || ''
      };
      return JSON.stringify(msg);
    },
    parseMessage: function(msg) {
      try {
        var parsed = JSON.parse(msg);
        return parsed;
      } catch(e) {
        throw e;
      }
    }
  };

// TODO: kill this
  var AttendeeManager = (function() {
    var _user_id = null,
        _name = '',
        _attendees = [];
    return {
      setUserId: function(user_id) {
        _user_id = user_id;
      },
      getUserId: function() {
        return _user_id;
      },
      setName: function(name) {
        _name = name;
      },
      getName: function() {
        return _name;
      },
      setAttendees: function(attendees) {
        var deletion = _attendees.filter(function(_attendee) {
          return attendees.every(function(attendee) {
            return (attendee.user_id != _attendee.user_id);
          });
        });
        var addition = attendees.filter(function(attendee) {
        });
        _attendees = attendees;
      },
      getAttendees: function() {
        return _attendees;
      },
      addAudioPlayer: function(user_id, destination) {
      },
      removeAudioPlayer: function(user_id) {
      }
    };
  })();

var AudioSource = function() {
    console.log('AudioSource');
    this.buffer = [[], []];
    this.js = audioContext.createJavaScriptNode(BUFFER_LENGTH, 2, 2);
    this.js.onaudioprocess = this.onaudioprocess.bind(this);
    this.socket = null;
    this.getBufferCallback = null;
  };
  AudioSource.prototype = {
    onaudioprocess: function(event) {
      console.log('source.onaudioprocess');
      if (typeof this.getBufferCallback === 'function')
        this.getBufferCallback();

var AudioStreamer = function(host, callback) {
    var that = this;
    ws_host = host;
    this.listenerBuffer = [[],[]];
    this.buffer = [];
    this.source = null;
    this.audioReady = false;
    this.onctrlmsg = null;
    this.onMessage = null;
    this.heartbeat = null;

this.websocket = new WebSocket(ws_host+'/socket');
    this.websocket.onopen = function() {
      that.websocket.binaryType = 'arraybuffer';
console.debug('socket established.');
      if (typeof callback == 'function') {
        callback();
      }
      that.heartbeat = setInterval(that.sendHeartBeat.bind(that), 30 * 1000);
    };
    this.websocket.onmessage = function(req) {
      var msg = '';
      try {
        if (typeof req.data == 'string') {
          // string
          msg = TextMessage.parseMessage(req.data);
          if (msg.type == 'connected') {
            AttendeeManager.setUserId(msg.user_id);
            return;
          }
          if (msg.type == 'connection') {
            AttendeeManager.setAttendees(msg.message);
          }
          that.onMessage(msg);
        } else {
          // binary
          binarize.unpack(req.data, function(msg) {
            if (msg.user_id == AttendeeManager.getUserId()) return; // skip if audio is originated from same user
            var buffers = [];
            for (var ch = 0; ch < msg.ch_num; ch++) {
              buffers[ch] = msg.buffer_array[ch];
            }
            console.log('onmessage.source');
            that.audioListener.source.setBuffer(buffers);
          });
        }
      } catch(e) {
        throw e;
      }
    };
    this.websocket.onclose = function() {
      clearInterval(that.heartbeat);
    };
    this.websocket.onerror = function() {
      console.log('connection error.');
    };

this.audioMerger = audioContext.createChannelMerger();
    // this is currently only one listener. TODO: Create listener per user
    var listenerSource = new AudioSource();
    this.audioListener = new AudioPlayer(listenerSource, this.audioMerger);
    this.audioListener.listen();
    // TODO: move visual element to outside
    this.visualizer = new SpectrumVisualizer(audioContext, {
      elem: document.getElementById('visualizer'),
      width: 580,
      height: 178
    });
    this.visualizer.connect(this.audioMerger, audioContext.destination);
  };
  AudioStreamer.prototype = {
    nameSelf: function(name) {
      AttendeeManager.setName(name);
      var msg = TextMessage.createMessage('connection');
      this.websocket.send(msg);
    },
    sendText: function(text) {
      var msg = TextMessage.createMessage('message', text);
      this.websocket.send(msg);
    },
    sendHeartBeat: function() {
      var msg = TextMessage.createMessage('heartbeat');
      this.websocket.send(msg);
    },
    connectPlayer: function(stream, callback, onplayend) {
      if (this.audioPlayer) this.audioPlayer.stop();
      this.visualizer.disconnect();
      this.audioReady = true;

this.source = new InputSource(stream);
      this.source.connectSocket(this.websocket);
      this.audioPlayer = new AudioPlayer(this.source, this.audioMerger, onplayend);
      this.visualizer.connect(this.audioMerger, audioContext.destination);
      this.audioPlayer.play();
      callback();
    },
    updatePlayer: function(file, callback, onplayend) {
      if (file.type.indexOf('audio') !== 0)
          throw 'this is not an audio file.';
      var that = this;
      if (this.audioPlayer) this.audioPlayer.stop();
      this.visualizer.disconnect();
      this.audioReady = false;

this.source = new AudioSource();
      this.source.connectSocket(this.websocket);
      this.audioPlayer = new AudioPlayer(this.source, this.audioMerger, onplayend);

return function(host, callback) {
    return new AudioStreamer(host, callback);
  };
})();

/*
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

Author: Eiji Kitamura (agektmr@gmail.com)
*/

var WS_HOST = "http://agektmr.node-ninja.com:3000/".replace(/(http|https)(:\/\/.*?)\//, 'ws$2'),
    as = null;

var audioContext = window.audioContext ? new window.audioContext() :
                   window.webkitAudioContext ? new window.webkitAudioContext() :
                   window.mozAudioContext ? new window.mozAudioContext() :
                   window.oAudioContext ? new window.oAudioContext() :
                   window.msAudioContext ? new window.msAudioContext() :
                   undefined;
var getUserMedia = navigator.getUserMedia ? 'getUserMedia' :
                   navigator.webkitGetUserMedia ? 'webkitGetUserMedia' :
                   navigator.mozGetUserMedia ? 'mozGetUserMedia' :
                   navigator.oGetUserMedia ? 'oGetUserMedia' :
                   navigator.msGetUserMedia ? 'msGetUserMedia' :
                   undefined;

$scope.browser_alerts = error_msg;
  $scope.websocket_started = false;
  $scope.input_started = false;
  $scope.audio_loaded = false;
  $scope.source_connected = false;

$scope.session_button = 'connect';
  $scope.name = '';
  $scope.attendees = [];
  $scope.message = '';
  $scope.messages = [];
  $scope.notification = '';
  $scope.notification_type = 'info';
  $scope.toggle_session = function() {
    if ($scope.websocket_started) {
      $scope.streamer.disconnect();
      $scope.streamer = null;
      $scope.websocket_started = false;
      $scope.session_button = 'connect';
      $scope.notify('You are disconnected', 'success');
    } else {
      $scope.input_started = false;
      $scope.audio_loaded = false;
      $scope.source_connected = false;
      $scope.streamer = new AudioStreamer(WS_HOST, function() {
        $scope.streamer.onMessage = $scope.onmessage;
        $scope.streamer.nameSelf($scope.name || 'No Name');
        $scope.websocket_started = true;
        $scope.session_button = 'disconnect';
        $scope.notify('Welcome, '+$scope.name+'!', 'success');
        $scope.$apply();
      });
    }
  };
  $scope.onmessage = function(msg) {
    switch (msg.type) {
      case 'connected':
        return;
      case 'connection':
        $scope.attendees = msg.message;
        break;
      case 'message':
        $scope.messages.unshift(msg);
        break;
      case 'start_music':
        msg.message = 'Started playing audio';
        $scope.messages.unshift(msg);
        break;
      default:
        return;
    }
    $scope.$apply();
  };
  $scope.send_message = function() {
    var message = $scope.message;
    if (message.length > 0) {
      $scope.streamer.sendText(message);
      $scope.message = '';
      $scope.$apply();
    }
  };
  $scope.notify = function(message, type, sticky) {
    sticky = sticky || false;
    type = type || 'info';
    $scope.notification = message;
    $scope.notification_type = type;
    if (!$scope.$$phase) $scope.$apply();
    if (!sticky) {
      setTimeout(function() {
        $scope.notification = '';
        $scope.$apply();
      }, 3000);
    };
  };

$('#text').keydown(function(e) {
    if (e.keyCode == 13) {
      $scope.send_message();
      e.stopPropagation();
      e.preventDefault();
    }
  });
};

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Audio Stream Experiment</title>
    <link rel="stylesheet" href="http://agektmr.node-ninja.com:3000/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://agektmr.node-ninja.com:3000/js/angular.js"></script>
    <script src="http://agektmr.node-ninja.com:3000/js/SpectrumVisualizer.js"></script>
    <script src="http://agektmr.node-ninja.com:3000/lib/binarize.js/src/binarize.js"></script>
    <style type="text/css" media="screen">
      select {margin: 0;}
    </style>
  </head>
  <body>
  <header class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <div class="brand">Audio Stream Experiment</div>
    </div>
  </div>
</header>
<section class="container" ng-controller="AudioStreamerCtrl">
  <div class="hero-unit">
    <p>Try <strong>Audio Streaming over WebSocket</strong>.  (Latest Chrome browser recommended)</p>
    <p><small>...Enter your name and connect to start.</small></p>
    <div ng-show="browser_alerts">
      <ul>
        <li class="text-error" ng-repeat="alert in browser_alerts">{{alert}}</li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="span4">
      <div id="attendee">
        <table class="table table-condensed" style="max-height: 500px; overflow-y: scroll;">
          <thead>
            <tr>
              <th>Attendees</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="form-inline">
                <input type="text" id="name" ng-model="name" ng-disabled="websocket_started" placeholder="Enter your name and connect." style="width: 190px;" />
                <input type="button" id="connect" class="btn btn-small" ng-class="{'btn-danger':websocket_started}" value="{{session_button}}" ng-click="toggle_session()" />
              </td>
            </tr>
            <tr ng-repeat="attendee in attendees">
              <td>{{attendee.name}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="span8">
      <div id="player" ng-controller="AudioCtrl" class="well">
        <div class="alert" ng-class="{'alert-success':notification_type=='success', 'alert-info':notification_type=='info', 'alert-error':notification_type=='error'}" ng-show="notification" style="position: fixed; font-size: 1.5em; width: 200px; min-height:50px; top:10px; right:10px;">{{notification}}</div>
        <select ng-model="mode" ng-disabled="!websocket_started" >
          <option value="file">Audio File</option>
          <option value="mic">Microphone</option>
        </select>
        <input type="button" id="play_stop" value="{{play_stop_button}}" class="btn btn-primary" ng-show="websocket_started&&mode=='file'" ng-disabled="!source_connected" ng-click="play_stop()" />
        <span ng-show="mode=='file'&&websocket_started">Drop audio file and hit "Play"</span>
        <input type="button" id="connect_audio_input" value="{{connect_audio_input_button}}" class="btn btn-primary" ng-show="websocket_started&&mode=='mic'" ng-disabled="source_connected" ng-click="connect_audio_input()" />
        <div id="visualizer" style="width: 580px; height:178px;"></div>
      </div>
      <div id="conversation">
        <div>
          <div id="message" class="form-inline">
            <input type="text" id="text" value="" ng-model="message" placeholder="Type text and enter to send chat" ng-disabled="!websocket_started" />
          </div>
          <div style="height: 150px; overflow-y: scroll;">
            <table class="table table-condensed">
              <colgroup>
                <col class="span2">
                <col class="span6">
              </colgroup>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="message in messages">
                  <td>{{message.name}}</td>
                  <td ng-class="{muted:message.type=='start_music'}">{{message.message}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <footer class="footer">
    <p>Powered by <a href="http://nodejs.org/" target="_blank">node.js</a>, <a href="https://github.com/einaros/ws" target="_blank">ws</a>, <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html" target="_blank">Web Audio API</a> and <a href="http://dev.w3.org/html5/websockets/" target="blank">WebSocket</a>. Developed by <a href="http://profiles.google.com/agektmr" target="_blank">Eiji Kitamura</a> (<a href="http://twitter.com/agektmr" target="_blank">@agektmr</a>). Source code can be found on <a href="https://github.com/agektmr/AudioStreamer" target="_blank">github</a>.</p>
  </footer>
</section>

</body>
</html>

Pop out