Im learning how to make games with Javascript using Canvas and other stuff built into most modern browsers.

In this play-around, I am trying to change the pitch of sound and music files using the Web Audio API. I can adjust the playbackRate already by creating an HTML5 Audio object and set the playbackRate from there.

audio.mozPreservesPitch = false;
audio.webkitPreservesPitch = false;

So playing around with the Web Audio API, I added a Spectrum Analyzer (or just Analyser) node. However once I do that, I am no longer able to adjust playbackRate. Actually, not entirely true, it works in Chrome but not in Firefox.

    function setupGraph(){
      graph.width = 222;
      graph.height = 20;
      ctx = graph.getContext('2d');
      analyzer = aCtx.createAnalyser();
      analyzer.fftSize = 256;      
      audio_filter.connect(analyzer);
      analyzer.connect(aCtx.destination);
      graphAnimator();
    }
    
    function graphAnimator(){
      requestAnimationFrame(graphAnimator);
      let fbc_array = new Uint8Array(analyzer.frequencyBinCount);
      analyzer.getByteFrequencyData(fbc_array);
      ctx.clearRect(0, 0, graph.width, graph.height);
      ctx.fillStyle = "#00FFAA";
      for (let i = 0; i < 256; i++){
        let x = i * 2;
        let h = -(fbc_array[i] / 12);
        ctx.fillRect(x, 20, 1, h);
      }
    }

Can anyone advise what exactly I might be doing wrong here? It is almost to the point that I think it could be a bug in Firefox…