Reputation: 1553
I was trying to do simple playback using Web Audio API:
<html>
<head>
<title>Test</title>
</head>
<body>
<audio id="player" src="audio/song.mp3"></audio>
<script>
try {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
catch (e) {
alert('Web Audio API is not supported in this browser');
}
var audioElement = document.getElementById("player");
audioElement.addEventListener('canplay', function() {
var source = audioContext.createMediaElementSource(audioElement);
var gainNode = audioContext.createGain();
gainNode.gain.value = 0.3;
source.connect(gainNode);
gainNode.connect(audioContext.destination);
audioElement.play();
});
</script>
</body>
</html>
This, obviously works as expected in Chrome, however, not in a Firefox. What happens in Firefox is that the volume increases gradually to some extreme level where clipping starts to occur (wtf?). In case there was no gain node here, it would simply play at what is probably maximum volume possible from the beginning.
I am very confused why such a basic task causes such absurd problems in Firefox. Since this is probably an issue with my system or newest Firefox, i would be very glad if someone tested this. I'm using Firefox 34.0.5.
Upvotes: 0
Views: 195
Reputation: 1555
"canplay" can be fired multiple time. This means you're feeding the HTMLMediaElement multiple times in the Web Audio graph, and because the PCM is perfectly correlated, clipping occurs. iirc, Chrome has a bug where only the first HTMLMediaElement is fed through the graph (although I might be wrong), which would explain that.
Upvotes: 1