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:
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>
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.