Is there a way to capture a browser's audio using Javascript or any other web language?

Question

I want to make a simple website that displays interactive visuals and I would like for some of them to be audio-driven. I want the visitors to be able to drive the visuals with their own choice of music. I've had difficulty finding much documentation on anything other than getting audio input from microphones.

For example, my webpage (in tab 1) is running javascript code X that allows me to process the audio stream playing in another tab of the web browser. Is this possible?

Answer 1

If I understand your question correctly you want to capture audio from sources outside of the current tab.

There is no such api as part of the W3C the spec , probably due to the problems concerning user integrity that would arise if there was. As the browser is essentially executing foreign code browsers tend to be strictly sandboxed and requiring consent to prevent any violations of the users privacy.

If you or the user has access to the media try using the Audio and File APIs. If neither that nor using input audio capturing APIs as you mentioned is sufficient you'll either have to turn to creating a browser extension or to another platform altogether.

Answer 2

You can take microphone stream with WebRtc API

if (!navigator.getUserMedia)
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({audio:true}, success, function(e) {
    });
}  

...............

 function success(e) {
      audioContext = window.AudioContext || window.webkitAudioContext;
      context = new audioContext();

      // the sample rate is in context.sampleRate
      audioInput = context.createMediaStreamSource(e);

      var bufferSize = 2048;
      recorder = context.createScriptProcessor(bufferSize, 1, 1);
      recorder.onaudioprocess = function(e){

        console.log ('recording');
        var left = e.inputBuffer.getChannelData(0);
    // stream
        window.Stream.write(convertoFloat32ToInt16(left));
  }
  audioInput.connect(recorder)
  recorder.connect(context.destination); 


function convertoFloat32ToInt16(buffer) {
  var l = buffer.length;
  var buf = new Int16Array(l)
  while (l--) {
    buf[l] = buffer[l]*0xFFFF;    //convert to 16 bit
  }
  return buf.buffer
} 

If you like only visualization of audio stream you can use javascript plugins like enter link description here