title: Web Audio API - Ramping Gain to Avoid Clicks
body: <p>I'm trying to get rid of the clicks in my application by fading the gain. With the code below, I can hear the sound shifting but it doesn't fade out.</p>
  
  <pre><code>var oscillator = audioContext.createOscillator();
  oscillator.connect(gainNode);
  oscillator.type = 'sine'; // sine, triangle, sawtooth
  console.log(self.currentPitch);
  if(isFinite(self.currentPitch)==true){
      oscillator.frequency.value = self.currentPitch;
      // connect it to the output
      oscillator.connect(audioContext.destination);
      // start the note
      oscillator.start(0);
  
  setTimeout(function(){
      var now = audioContext.currentTime;
      //gainNode.gain.value=0;
      gainNode.gain.linearRampToValueAtTime(0,now+.05);
      oscillator.stop(now+.05);
  }, self.duration*1000);
  </code></pre>
  
  <p>Here is the complete code:</p>
  
  <pre><code>var Musical = function(){
  
      var self=this;
  
      self.basePitch= 420;
      self.currentPitch=420;
      self.baseLineLength=$("#guidecircles circle").first().attr("r");
      self.currentLineLength=100;
      self.duration=.2; //time in seconds
      self.playPosition=0;
      self.playTimer=false;    
  
       try {
              if (! window.AudioContext) {
                  if (! window.webkitAudioContext) {
                      self.bad_browser();
                      return;
                  }
                  window.AudioContext = window.webkitAudioContext;
              }
  
              var audioContext = new AudioContext();
          }
          catch(e) {
              console.log('Web Audio API is not supported in this browser');
      }
  
      var gainNode = audioContext.createGain();
      gainNode.connect(audioContext.destination);
  
  
      /* Playing a tone */
      self.playTone=function(){
  
          self.setCurrentPitch();
  
           // create the oscillator
          var oscillator = audioContext.createOscillator();
          oscillator.connect(gainNode);
          oscillator.type = 'sine'; // sine, triangle, sawtooth
          console.log(self.currentPitch);
          if(isFinite(self.currentPitch)==true){
              oscillator.frequency.value = self.currentPitch;
              // connect it to the output
              oscillator.connect(audioContext.destination);
              // start the note
              oscillator.start(0);
  
              setTimeout(function(){
                  var now = audioContext.currentTime;
                  //gainNode.gain.value=0;
                  gainNode.gain.linearRampToValueAtTime(0,now+.05);
                  oscillator.stop(now+.05);
              }, self.duration*1000);
          }
  
         /* if(typeof oscillator !="undefined"){
  
          }*/
  
          return self;
  
      }    
  
      /* Get current pitch */
      self.setCurrentPitch=function(){
          /* find ratio of current line length to base line length */
          var ratio=parseFloat(self.baseLineLength/self.currentLineLength);
          /* apply ratio to base pitch and set the current pitch */
          self.currentPitch=self.basePitch*ratio;
          console.log(self.baseLineLength,self.currentLineLength,"ratio:"+ratio);
      }
  
      /* play music */
      self.play=function(){
  
          self.playTimer=setInterval(function(){ playNext() }, self.duration*1000);
  
          return self;
      }  
  
      var playNext=function(){
  
          var toneLine=$("#musicallines line").eq(self.playPosition);
          $("#musicallines line").removeClass('playing');
          toneLine.addClass('playing');
          if(self.playPosition&gt;($("#musicallines line").length-1)){
              clearInterval(self.playTimer);
              self.playPosition=0;
          }   else { 
  
          self.playPosition++;
          self.currentLineLength=toneLine.LineEquation().getMagnitude();
          self.playTone();
  
          }
      }    
  
  
      self.bad_browser=function(){
          alert("Your browser does not support web audio");   
      }    
  
     return self;
  }
  </code></pre>
  
  <p>To see a running version of it go to this site:</p>
  
  <p><a href="http://rulerandcompass.net/" rel="nofollow">RulerandCompass.net</a></p>
  
  <p>The musical.js file on the live site doesn't have the update with the gain adjustment. The site is a drawing tool for creating ruler and compass patterns. </p>
  
  <p><a href="https://i.stack.imgur.com/rTXfI.png" rel="nofollow"><img src="https://i.stack.imgur.com/rTXfI.png" alt="Ruler and compass drawing"></a></p>
  
  <p>To draw, using the circle tools click on one point then another. Intersection points have a geometric relationship to each other. To make music draw with the musical line tool shown selected below. The pitch is determined by dividing the base pitch (220hz) by the ratio of the first radius to the new line. </p>
  
  <p>Type "p" on the keyboard to play the composition.</p>
  
  <p><a href="https://i.stack.imgur.com/7JXCx.png" rel="nofollow"><img src="https://i.stack.imgur.com/7JXCx.png" alt="enter image description here"></a> </p>