Html5 аудио с обработкой дублирует звук при каждом воспроизведении

Question

Я проигрываю аудиофайл html5, в котором есть алгоритм обработки для определения громкости. В первый раз играю нормально. Когда я играю во второй раз, похоже, что он добавляет дублированный звук, который воспроизводится одновременно. Что дублируется?

<audio id="audio1" controls preload="auto" src="test.mp3"></audio>

var context1 = new AudioContext();

 audio1.addEventListener('playing',function() {
    var source = context1.createMediaElementSource(audio1);
    var processor = context1.createScriptProcessor(2048,1,1);
    processor.onaudioprocess = process;
    source.connect(processor);
    processor.connect(context1.destination);
  });

  function process(e) {
    var buffer = e.inputBuffer.getChannelData(0);
    var out = e.outputBuffer.getChannelData(0);
    var amp = 0;

    // Iterate through buffer to get max amplitude
  for (var i = 0; i < buffer.length; i++) {
    var loud = Math.abs(buffer[i]);
    if(loud > amp) {
      amp = loud;
    }
    // write input samples to output unchanged
    out[i] = buffer[i];
}

Answer 1

Оказывается, мне нужно было отключить процесс. Второй раз процесс все еще выполнялся.

<audio id="audio1" controls preload="auto" src="test.mp3"></audio>

var context1 = new AudioContext();

source1 = context1.createMediaElementSource(audio1);
processor1 = context1.createScriptProcessor(2048,1,1);

audio1.addEventListener('playing',function() {
    processor1.onaudioprocess = processAudio1;
    source1.connect(processor1);
    processor1.connect(context1.destination);
  });

audio1.addEventListener('ended', (event) => {
   source1.disconnect(processor1);
   processor1.disconnect(context1.destination);
});