Web Audio API - Рампинг, чтобы избежать кликов

Question

Я пытаюсь избавиться от кликов в своем приложении, угасая коэффициент усиления. С помощью приведенного ниже кода я слышу сдвиг звука, но он не исчезает.

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); 

Вот полный код:

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>($("#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; 
} 

Чтобы увидеть бегущую версию этого перейти на этот сайт:

RulerandCompass.net

В musical.js файл на живом сайте не имеет обновления с регулировкой усиления. Сайт представляет собой инструмент рисования для создания шаблонов линейки и компаса.

Чтобы нарисовать, используя круг инструментов нажмите на одной точке, то другой. Точки пересечения имеют геометрическое отношение друг к другу. Чтобы сделать музыку, нарисуйте инструмент музыкальной линии, показанный ниже. Шаг определяется путем деления основного тона (220 Гц) на отношение первого радиуса к новой линии.

Введите «p» на клавиатуре, чтобы воспроизвести композицию.

Answer 1

Вы должны setValueAtTime перед использованием других функций автоматизации.

Чтобы исчезнуть, вы хотите gainNode.gain.setTargetAtTime(0, audioContext.currentTime, 0.1), где 0,1 - постоянная времени фильтра первого порядка, см. https://en.wikipedia.org/wiki/Time_constant#Exponential_decay.