title: Webaudio FM Synthesis with two modulators
body: <p><code>F</code> is the carrier, and <code>E</code> and <code>D</code> are modulators.</p>
  
  <p><a href="https://i.stack.imgur.com/xF6Le.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xF6Le.png" alt="FM Synthesis with one modulator"></a></p>
  
  <p>Simple FM Synthesis with <strong>only one modulator</strong>, is pretty straightforward in webaudio. </p>
  
  <p><a href="https://i.stack.imgur.com/QWFkq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QWFkq.png" alt="FM Synthesis with one modulator"></a></p>
  
  <pre><code>var ctx = new AudioContext || webkitAudioContext();
  var out = ctx.destination;
  
  // Instantiating
  var E = ctx.createOscillator(); // Modulator
  var F = ctx.createOscillator(); // Carrier
  
  // Setting frequencies
  E.frequency.value = 440;
  F.frequency.value = 440;
  
  // Modulation depth
  var E_gain = ctx.createGain();
  E_gain.gain.value = 3000;
  
  // Wiring everything up
  E.connect(E_gain);
  E_gain.connect(F.frequency);
  F.connect(out);
  
  // Start making sound
  E.start();
  F.start();
  </code></pre>
  
  <hr>
  
  <p>But now I would like to make something like this.</p>
  
  <p><a href="https://i.stack.imgur.com/ic4tY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ic4tY.png" alt="FM Synthesis with two modulators"></a></p>
  
  <p><strong>Two modulators</strong> that is. How can this be implemented in webaudio?</p>