title: Chrome Extension tabCapture API Audio Stream to Play in HTML Page
body: <p>I am creating a chrome extension which captures audio from a tab using the chrome <a href="https://developer.chrome.com/extensions/tabCapture">tabCapture API</a>. I would like to play this audio stream in another html page in hopes of eventually creating a visualizer for it.</p>
  
  <p>I capture the audio in a background script like so</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(activeTab) {
    var constraints = {
      audio: true,
      video: false,
    };
  
    var visualizerPage = chrome.extension.getURL("/views/visualizer.html");
  
    chrome.tabCapture.capture(constraints, function(stream) {
      console.log("\ngot stream");
      console.log(stream);
  
      chrome.tabs.create({
        url: visualizerPage
      }, function(tab) {
  
        chrome.tabs.sendMessage(tabID, {
          "message": "stream",
          "stream": stream
        });
      });
    });
  </code></pre>
  
  <p>the audio stream is captured from whatever page the extension was clicked on. Another tab is opened, and the audio stream is sent to it as a message.</p>
  
  <p>The javascript for the visualizer.html page is</p>
  
  <pre><code>function loadStream(stream) {
    // what do I have to put here to play the stream?
  }
  
  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message === "stream") {
      var stream = request.stream;
  
      if (!stream) {
        console.log("stream is null");
        return;
      }
  
      console.log(stream);
      loadStream(stream);
    }
    else if (request.message === "statusChanged") {
      console.log("statusChanged");
    }
  });
  </code></pre>
  
  <p>What I have so far is to load the audio stream into the web audio api using an audio context</p>
  
  <pre><code>var context = new AudioContext();
  var source = context.createMediaStreamSource(stream);
  </code></pre>
  
  <p>but the script just hangs when trying to create the source.</p>
  
  <p>The problem is I am not really sure what type the stream is (tabCapture api says its a LocalMediaStream). </p>
  
  <p>How can I get the page to play the audio stream?</p>