未捕获的TypeError：无法读取未定义

Question

我正在尝试创建一个类似于游戏的飞鸟，其中麦克风的振幅用于飞行飞机。问题是我在尝试使用Uncaught TypeError: Cannot read property 'getByteTimeDomainData' of undefined访问音频信号数据时不断获得“analyserNode”。

我认为问题是因为AudioContext的初始化发生 AFTER 调用AnalyserNode，因为控制台日志显示getAudioAmp()在draw()之前$(document).ready()之前被声明1}}使用console.log()。

以下是代码的相关部分：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var audioContext;
var mediaStreamSource;
var analyser;
var bufferLength;
var dataArray;
var myAudio = document.querySelector('audio');

$(document).ready(function() {
  navigator.getUserMedia = (navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia);
  if (navigator.getUserMedia) {
    navigator.getUserMedia({video: false,audio: true},
                            function(stream) {
                              if (window.AudioContext) {
                                audioContext = new AudioContext();
                              } else {
                                audioContext = new webkitAudioContext();
                              }
                              mediaStreamSource = audioContext.createMediaStreamSource(stream);
                              console.log(1)
                              analyser = audioContext.createAnalyser();   <----initialization of AnalyserNode------------
                              bufferLength = analyser.frequencyBinCount;
                              dataArray = new Uint8Array(bufferLength);
                              mediaStreamSource.connect(analyser);},

                             function(){alert("The following error occured: " + err.name);});
  } else {
      alert('OOPS No browser Support');
  }
});

var getAudioAmp  = function() {
  console.log(2)
  analyser.getByteTimeDomainData(dataArray); <---Line that causes Error----------------
  var total = 0;
  for (var i = 0; i < bufferLength; i++) {
    total += dataArray[i];
    var amp = total / dataArray.length;
  }
  return amp;

}

function draw() {
      console.log(3)
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      amp = getAudioAmp() <----------------where I call getAudioAmp()-------------
      console.log(amp)
      drawScore()
      drawStat()
      drawplane()
      drawBricks()
      collisionDetection()
      score++;
      requestAnimationFrame(draw);
    }

draw(); 

这是jsfiddle中的代码 https://fiddle.jshell.net/kkawabat/bh4dbo1y/44/