Search code examples
web-audio-api

mozilla web-audio processing fails on streams


My objective is to process talk-radio audio streams with compression and eq, from the <audio> element.

In FF 32.0.03 the stream downloads, but no sound. There's no error shown in firebug.

I tried this code from both file:/// and localhost (wamp).

I commented-out the web-audio <script>, the streams played as expected in FF both from file:/// and from localhost. I removed the comments, returned it to original code.

Next, I ran this in Google Chrome 38.0.2125.101 m (same code, same url src), it ran as expected, worked fine, compressor was effective.

As before, I ran the script from both file:/// and localhost on Chrome, both worked without a hitch.

I suspect one of three things:

  • This may be collateral damage from a security (SOP perhaps?) decision.
  • It's a Mozilla web-audio bug.
  • It may require user interaction (but clicking the play-arrow should satisfy that).

I tried the moz-ask a question help area, but haven't heard anything. I got on Mozilla dev-webdev list thinking I could get answers, but didn't get much back.

I'm hoping someone on SOF who's more knowledgeable about cross-browser web-audio might shed some light on this, it'd be a pity if FF was restricted from processing streamed audio because of a security decision, I'm hoping this is a bug.

Mozilla's original code example: http://mdn.github.io/compressor-example/

I changed the <audio> src from the example's mp3 files to a stream. This is the script I ran in the above tests:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Compressor example</title>
  </head>

  <body>
    <h1>Compressor example</h1>
    <audio controls>  
      <!-- the following line is my only change -->
      <source src="http://74.202.111.236:2512/;" type="audio/mp3">   
    </audio>
    <button data-active="false">Add compression</button>
  </body>

<script>
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
var button = document.querySelector('button');

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a compressor node
var compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.value = -50;
compressor.knee.value = 40;
compressor.ratio.value = 12;
compressor.reduction.value = -20;
compressor.attack.value = 0;
compressor.release.value = 0.25;

// connect the AudioBufferSourceNode to the destination
source.connect(audioCtx.destination);

button.onclick = function() {
  var active = button.getAttribute('data-active');
  if(active == 'false') {
    button.setAttribute('data-active', 'true');
    button.innerHTML = 'Remove compression';

    source.disconnect(audioCtx.destination);
    source.connect(compressor);
    compressor.connect(audioCtx.destination);
  } else if(active == 'true') {
    button.setAttribute('data-active', 'false');
    button.innerHTML = 'Add compression';

    source.disconnect(compressor);
    compressor.disconnect(audioCtx.destination);
    source.connect(audioCtx.destination);
  }
}
</script>
</html> 

Solution

  • I'm posting this simply for closure. It's not the answer I was looking for, but it is the answer that Mozilla has provided.

    As I commented above, bugzilla.mozilla.org/show_bug.cgi?id=996685 has listed three other bug reports, including mine, as having fallen victim to Same Origin Policy.

    There is an 04/15/2014 patch to the Mozilla code-base that illustrates the changes, available as an attachment to 996685.

    Thanks to all who've taken a look.