4

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?

Etienne Richan
  • 51
  • 1
  • 3
  • With a chrome extension you can access other tabs and communicate between them, but I don't think you can between webpages – TankorSmash Nov 10 '15 at 19:27
  • Why would your website get access to other tabs of the web-browser? If one web-browser allows anyone to do so, it won't be my web-browser anymore. – Kaiido Nov 10 '15 at 20:13
  • While researching this topic, I got stuck at http://dinahmoelabs.com/plink . Way fun. Where were we now? – zipzit Nov 10 '15 at 20:14
  • Ps: to answer the question title : no there is none. There are too many sources of audio that can't be handled by js nor by the page which include those, that there is no way you can capture any audio coming from one web-page – Kaiido Nov 10 '15 at 20:19

2 Answers2

2

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.

Kiren
  • 130
  • 2
  • 10
  • The audio and file APIs seem to be a decent compromise. I think I'll also look into the soundcloud API for audio streaming. Thanks for the detailed answer! – Etienne Richan Nov 10 '15 at 21:48
0

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

Stefan Kanev
  • 311
  • 4
  • 7