Отображение анимированной синусоиды с помощью AudioContext и холста

Поэтому, чтобы все было просто и честно, я пытаюсь использовать AudioContext вместе с холстом для отображения анимированной синусоиды в соответствии с песней, которая сейчас воспроизводится на веб-странице. Я начал с кода из Voice-change-o-matic (его легко найти на GitHub и является общественным достоянием) и удалил все, что было лишним для моей цели, а также изменил некоторые строки:

// set up canvas context for visualizer
var canvas = document.querySelector('.visualizer');
var canvasCtx = canvas.getContext("2d");

var intendedWidth = document.querySelector('.wrapper').clientWidth;

canvas.setAttribute('width',intendedWidth);

var visualSelect = document.getElementById("visual");

var drawVisual;

// set up forked web audio context, for multiple browsers
// window. is needed otherwise Safari explodes

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

//set up the different audio nodes we will use for the app

var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// grab audio track via XHR for convolver node

var soundSource = audioCtx.createBufferSource();

ajaxRequest = new XMLHttpRequest();

ajaxRequest.open('GET', 'https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg', true);

ajaxRequest.responseType = 'arraybuffer';


ajaxRequest.onload = function() {
  var audioData = ajaxRequest.response;

  audioCtx.decodeAudioData(audioData, function(buffer) {
      soundSource = buffer;
    }, function(e){ console.info("Error with decoding audio data" + e.err);});
};

ajaxRequest.send();

playSound();

function playSound(buffer){
    var source = audioCtx.createBufferSource();
    source.buffer = buffer;

    soundSource.connect(analyser);
    analyser.connect(audioCtx.destination);
    soundSource.start();
    visualize();
}

// set up canvas context for visualizer

function visualize() {
  WIDTH = canvas.width;
  HEIGHT = canvas.height;

    analyser.fftSize = 2048;
    var bufferLength = analyser.fftSize;
    console.info(bufferLength);
    var dataArray = new Uint8Array(bufferLength);

    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

    var draw = function() {

      drawVisual = requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray);

      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = 'rgb(20, 120, 60)';

      canvasCtx.beginPath();

      var sliceWidth = WIDTH * 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v * HEIGHT/2;

        if (i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }

        x += sliceWidth;
      }

      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    };

    draw();
}

Очевидно, что код не работает, и после нескольких часов работы над этим у меня просто нет идей. При запуске код не выдает ошибок и холст прорисовывается, но музыки не слышно, и линия, которая должна быть синусоидой, остается неподвижной. Кто-нибудь видит, что мне не хватает?

Заранее спасибо за помощь!