[whatwg] Microphone Device API

[Jörn Zaefferer]

Hi,

here at SoundCloud we're interested in an API for recording in the browser
( http://blog.soundcloud.com/2010/12/01/record/ ), without Flash and even on
mobile browsers. The get things moving with the current idea of a device API
(
http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#devices),
we put together some draft example markup and JavaScript, based on the
current proposal and with an alternative approach that could be easier to
use, based on the style of the geolocation API.

We hope to get a discussion started based on this, while learning how to
actually get involved in the standards process, and would be happy to help
with more formal documentation or more example, whatever will help at this
stage.

Jörn

The draft:

// Record the microphone input and upload it to the server
// based on the curent state of device element draft
//
http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#devices
// like on http://soundcloud.com/upload (you need to be logged to use
recording)
// and more info: http://blog.soundcloud.com/2010/12/01/record/
// with a short implementation proposal

// show/hide record button depending on the current state
<button id="start-recording">Record!</button>
<button id="stop-recording">Stop Recording</button>

// how would we initialize the device in JS?
// new Device like new Audio? or createElement like with 'video' tag?
var microphone = document.createElement('device');

// 'media' is quite ambigous, what would it choose - webcam? microphone?
microphone.type = 'microphone';

var audio = new Audio(),
    buttonRecord = document.getElementById("start-recording"),
    buttonStop = document.getElementById("stop-recording"),
    recorder;

microphone.addEventListener('change', function(stream){
  // optional: output current input
  audio.src = stream.url;

  buttonRecord.addEventListener("click", function(event) {
    recorder = stream.record();
  }, false);

  buttonStop.addEventListener("click", function(event) {
    var file = recorder.stop();
    upload(file);
  }, false);

}, false);

// alternative version, modelled after geolocation api

function success(stream){
  // optional: output current input
  audio.src = stream.url;
  recorder = stream.record();
}

function error(e){
  alert(e.message);
}

buttonRecord.addEventListener("click", function(event) {
  microphone.openStream(success, error);
}, false);

buttonStop.addEventListener("click", function(event) {
  var file = recorder.stop();
  upload(file);
}, false);