Web音频api，优雅地停止声音

Question

网络音频 api 提供方法 .stop() 来停止声音。 我希望我的声音在停止之前降低音量。为此，我使用了增益节点。但是，我遇到了一些奇怪的问题，有些声音无法播放，我不知道为什么。

这是我所做的一个简化版：

https://jsfiddle.net/01p1t09n/1/

如果您删除带有setTimeout() 的行，您会听到每个声音都会播放。当 setTimeout 存在时，并非所有声音都会播放。真正让我困惑的是，我相应地使用push 和shift 来找到正确的声音来源，但似乎是另一个停止播放。我能看到这种情况发生的唯一方法是AudioContext.decodeAudioData 不是同步的。只需尝试 jsfiddle 以更好地理解并戴上耳机。

这里是jsfiddle的代码：

  let url = "https://raw.githubusercontent.com/gleitz/midi-js-soundfonts/gh-pages/MusyngKite/acoustic_guitar_steel-mp3/A4.mp3";
  let soundContainer = {};
  let notesMap = {"A4": [] };
  let _AudioContext_ = AudioContext || webkitAudioContext;
  let audioContext = new _AudioContext_();

  var oReq = new XMLHttpRequest();
  oReq.open("GET", url, true);
  oReq.responseType = "arraybuffer";
  oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response; 
    makeLoop(arrayBuffer);
  };
  oReq.send(null);

  function makeLoop(arrayBuffer){
     soundContainer["A4"] = arrayBuffer;
     let currentTime = audioContext.currentTime;
     for(let i = 0; i < 10; i++){
        //playing at same intervals
            play("A4", currentTime + i * 0.5);
        setTimeout( () => stop("A4"), 500 + i * 500); //remove this line you will hear all the sounds.
     }
  }

  function play(notePlayed, start) {    

      audioContext.decodeAudioData(soundContainer[notePlayed], (buffer) => {
      let source; 
      let gainNode; 
        source = audioContext.createBufferSource(); 
        gainNode = audioContext.createGain();
        // pushing notes in note map
        notesMap[notePlayed].push({ source, gainNode });
        source.buffer = buffer;                   
        source.connect(gainNode);
        gainNode.connect(audioContext.destination);
        gainNode.gain.value = 1;
        source.start(start);
       });
    }

      function stop(notePlayed){    
        let note = notesMap[notePlayed].shift();

        note.source.stop();
     }

---

---

这里只是为了说明我为什么会这样，你可以跳过，只是为了说明我为什么不用stop()

我这样做的原因是因为我想优雅地停止声音，所以如果有可能在不使用 setTimeout 的情况下这样做，我很乐意接受。

基本上我在顶部有一张地图，其中包含我的声音（如 A1、A#1、B1 等音符）。

soundMap = {"A": [], "lot": [], "of": [], "sounds": []};

还有一个play() fct，我在播放声音后填充数组：

  play(sound) { 
    // sound is just { soundName, velocity, start}   
    let source; 
    let gainNode; 
    // sound container is just a map from soundname to the sound data.
    this.audioContext.decodeAudioData(this.soundContainer[sound.soundName], (buffer) => {
      source = this.audioContext.createBufferSource(); 
      gainNode = this.audioContext.createGain();
      gainNode.gain.value = sound.velocity;
      // pushing sound in sound map
      this.soundMap[sound.soundName].push({ source, gainNode });
      source.buffer = buffer;                   
      source.connect(gainNode);
      gainNode.connect(this.audioContext.destination);
      source.start(sound.start);
     });
  }

现在是停止声音的部分：

  stop(sound){   
    //remember above, soundMap is a map from "soundName" to {gain, source} 
    let dasound = this.soundMap[sound.soundName].shift();
    let gain = dasound.gainNode.gain.value - 0.1;

    // we lower the gain via incremental values to not have the sound stop abruptly
    let i = 0;
    for(; gain > 0; i++, gain -= 0.1){ // watchout funky syntax
      ((gain, i) => {
        setTimeout(() => dasound.gainNode.gain.value = gain, 50 * i );
      })(gain, i)
    }
    // we stop the source after the gain is set at 0. stop is in sec
    setTimeout(() => note.source.stop(), i * 50);
  }

Answer 1

啊，是的，是的，是的！通过最终费心阅读文档中的“所有内容”（对角线），我终于找到了很多东西。让我告诉你，这个 api 是一颗未加工的钻石。无论如何，他们实际上拥有我想要的 Audio param ：

AudioParam接口表示一个与音频相关的参数，通常是一个AudioNode的参数（如GainNode.gain）。一个 AudioParam 可以设置为特定值或更改值，并且 可以安排在特定时间发生并遵循特定的 模式。

它有一个函数linearRampToValueAtTime()

他们甚至有我问的例子！

// create audio context
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

// set basic variables for example
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');

pre.innerHTML = myScript.innerHTML;

var linearRampPlus = document.querySelector('.linear-ramp-plus');
var linearRampMinus = document.querySelector('.linear-ramp-minus');

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a gain node and set it's gain value to 0.5
var gainNode = audioCtx.createGain();

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// set buttons to do something onclick
linearRampPlus.onclick = function() {
  gainNode.gain.linearRampToValueAtTime(1.0, audioCtx.currentTime + 2);
}

linearRampMinus.onclick = function() {
  gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);
}

Working example here

它们也有不同类型的时序，比如指数而不是线性斜坡，我想这更适合这种情况。