Web Audio API to change Pitch or playbackRate?

[Heretic86]

I've been playing around with the Web Audio API to create sound effects, background music and sound for games.

I can adjust playbackRate to adjust the pitch of audio by disabling Preserves Pitch property (true by default) as an HTML5 Audio Object.

var bgm = new Audio();
bgm.source = "somefile.php?bgmId=1";
bgm.mozPreservesPitch = false;
bgm.webkitPreservesPitch = false;

Trouble is that is HTML5 not the Web Audio API.  So I needed to throw in some Web Audio API components.  First thing I thought I would try was the Spectrum Analyzer.  That wasnt difficult.  It draws to a Canvas, shows some pretty bars that represent tones, but once I did that, I can no longer adjust the playbackRate of whatever my audio file is, at least in Firefox.  It works in Chrome but not Firefox and it needs to work in both.  I dont think it is a Firefox bug, but rather the way I am connecting each Audio API node to each other.

    function setupAudio(){
      aCtx = new (window.AudioContext || window.webkitAudioContext)();
      audio_source = aCtx.createMediaElementSource(audio);
      audio_filter = aCtx.createBiquadFilter();
      audio_source.connect(audio_filter);
      audio_filter.type = 'allpass';
      audio_filter.detune.value = -1200;
    }
    
    function playBGM(e){
      stopBGM(e);
      if (!selectedBgm) return;
      
      let el = document.getElementById(selectedBgm), s = selectedBgm.substr(0,4);
      let asset_id = (s == 'user') ? el.dataset.user_bgm : (s == 'team') ? el.dataset.team_bgm : el.dataset.game_bgm;
      
      if (asset_id != ''){
        audio.oncanplay = function(){
          audio.volume = volume.value / 100.0;
          audio.playbackRate = pitch.value / 100.0;
          seekSlider.disabled = false;
          audio.play();
          
          audio_filter.detune.value = -1200;

          
          console.log(audio_source.mediaElement.playbackRate);
        }
        audio.ontimeupdate = function(){
          if (audio.duration != Infinity && audio.duration.toString() != "NaN"){
            seekSlider.value = audio.currentTime * (100 / audio.duration);
            currentTime.innerHTML = Math.floor(audio.currentTime / 60) + ":" + ("0" + Math.floor(audio.currentTime) % 60).slice(-2);
            totalTime.innerHTML = Math.floor(Math.ceil(audio.duration) / 60) + ":" + ("0" + Math.ceil(audio.duration) % 60).slice(-2);
          }
        }

        playingName.innerHTML = el.dataset.name;
        audio.preload = "metadata";
        audio.preservesPitch = false;
        audio.mozPreservesPitch = false;
        audio.webkitPreservesPitch = false;
        audio.loop = true;
        audio.src = "load_game_asset.php?game_id=" + game_id + "&asset_id=" + asset_id;
      }
    }
    
    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);
      }
    }

 

I might throw in more questions later, what I really want to do is adjust the Pitch without the playbackRate, but so far, I want to get playbackRate working also...

What exactly am I doing wrong here?  Do you guys have a lot of experience with the Web Audio API?

[Heretic86]

Boy, you guys sure did a great job of helping me out on this.

Thanks for nothing.

[PhedraSigourney]

It's great with free and reputable music playlists.