WebRTC doesn't work with AudioContext

Question

I am making audio chat website using WebRTC. I have one problem.

When receiving remote audio from peer. This doesn't work (I can't hear any audio)

var audioContext = new AudioContext();
var audioStream = audioContext.createMediaStreamSource(e.stream);
audioStream.connect(audioContext.destination);

While this works

var audio2 = document.querySelector('audio#audio2');
audio2.srcObject = e.stream;

The reason I need to do it is because I need to be able to control the audio (effects, volume), and as I know, AudioContext provides that. But for some reason, it doesn't work. Any suggestions?

Thank you!

Answer 1

Use .createMediaStreamSource() with .createGain()

var ctx = new AudioContext();
var source = ctx.createMediaStreamSource(stream);
var gainNode = ctx.createGain();
gainNode.gain.value = .5; 
source.connect(gainNode);
source.connect(ctx.destination);

jsfiddle https://jsfiddle.net/tkw13bfg/2

Alternatively, create an AudioNode, use .createGain()

var ctx = new AudioContext();
var audio = new Audio();
audio.srcObject = stream;
var gainNode = ctx.createGain();
gainNode.gain.value = .5;   
audio.onloadedmetadata = function() {
  var source = ctx.createMediaStreamSource(audio.srcObject);
  audio.play();
  audio.muted = true;
  source.connect(gainNode);
  gainNode.connect(ctx.destination);
}