HTML5 & Web audio api: Streaming microphone data from browser to server. Ideal transports and data compression

Question

I am looking to take the audio input from the browser and stream it to multiple listeners. The intended use is for music, so the quality must mp3 standard or thereabouts.

I have attempted two ways, both yielding unsuccessful results:

WebRTC

• Streaming audio directly between browsers works fine, but the audio quality seems to be non-customisable though what I have seen. (I have seen that it is using the Opus audio codec, but seems to not expose any controls).
• Does anyone have any insight into how to increase the audio quality in WebRTC streams?

Websockets

• The issue is the transportation from the browser to the server. The PCM audio data I can acquiring via the method below has proven too large to repeatedly stream to the server via websockets. The stream works perfectly in high speed internet environments, but on slower wifi it is un-usable.

  var context = new webkitAudioContext()
  navigator.webkitGetUserMedia({audio:true}, gotStream)
  
  function gotStream (stream)
  {
      var source = context.createMediaStreamSource(stream)
      var proc = context.createScriptProcessor(2048, 2, 2)
  
      source.connect(proc)
      proc.connect(context.destination)
      proc.onaudioprocess = function(event)
      {
          var audio_data = event.inputBuffer.getChannelData(0)|| new Float32Array(2048)
          console.log(audio_data)
          // send audio_data to server
      }
  }
  

So the main question is, is there any way to compress the PCM data in order to make it easier to stream to the server? Or perhaps there is an easier way to go about this?

Answer 1

There are lots of ways to compress PCM data, sure, but realistically, your best bet is to get WebRTC to work properly. WebRTC is designed to do this - adaptively stream media - although you don't define what you mean by "multiple" listeners (there's a huge difference between 3 listeners and 300,000 simultaneous listeners).

Answer 2

There are several possible ways of resampling and/or compressing your data, none of them native though. I resampled the data to 8Khz Mono (your mileage may vary) with the xaudio.js lib from the speex.js environment. You could also compress the stream using speex, though that is used usually for audio only. In your case, I would probably send the stream to a server, compress it there and stream it to your audience. I really don't believe a simple browser to be good enough to serve data to a huge audience.