火狐浏览器 (34.0.5） 中有问题的音频可视化工具 ||Firefox 和 Web Audio API 的问题

我试图为此绞尽脑汁，但我不知道问题是什么。

我有一个带有自定义控件的音频播放器，并且用于激活这些控件的 javascript 工作正常，直到我添加可视化工具 Web 音频 API。

.HTML：

<div id="audioContainer">
   <audio id="audio" controls preload="metadata">
      <source src="http://s3.amazonaws.com/halleonard-audio/guitarinstructor-clips/686095-1-Clip-Play.mp3" type="audio/mp3">
      <!-- Flash fallback -->
      <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=http://s3.amazonaws.com/halleonard-audio/guitarinstructor-clips/686095-1-Clip-Play.mp3" width="960" height="540">
         <param name="movie" value="flash-player.swf?videoUrl=http://s3.amazonaws.com/halleonard-audio/guitarinstructor-clips/686095-1-Clip-Play.mp3" />
         <param name="allowfullscreen" value="true" />
         <param name="wmode" value="transparent" />
         <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=http://s3.amazonaws.com/halleonard-audio/guitarinstructor-clips/686095-1-Clip-Play.mp3" />
      </object>
      <!-- Offer download -->
   </audio>
    <ul id="media-controls" class="controls">
        <li><button id="playpause" type="button">Play/Pause</button></li>
        <li><button id="rewind10" type="button">Rewind 10</button></li>
        <li><button id="loop" type="button">Loop</button></li>
        <li class="progress">
          <progress id="progress" value="0" min="0">
             <span id="progress-bar"></span>
          </progress>
        </li>
        <li><button id="mute" type="button">Mute/Unmute</button></li>
        <li><button id="volinc" type="button">Vol+</button></li>
        <li><button id="voldec" type="button">Vol-</button></li>
        <li><button id="fs" type="button">Fullscreen</button></li>
    </ul>
    <canvas id="visualizer">
</div>

.JS：

var supportsAudio = !!document.createElement('audio').canPlayType;
if (supportsAudio) {
    var audioContainer = document.getElementById('audioContainer');
    var audio = document.getElementById('audio');
    var mediaControls = document.getElementById('media-controls');
    var progress = document.getElementById('progress');
    var progressBar = document.getElementById('progress-bar');
    var canvas = document.getElementById('visualizer');
    // COMMENT OUT THE FOLLOWING
    /*
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioCtx.createAnalyser();
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    var source = audioCtx.createMediaElementSource(audio);
    var bCtx = canvas.getContext('2d');
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    frameLooper();
    */
    // COMMENT OUT THE PRECEDING
    audio.controls = false;
    mediaControls.style.display = 'block';

    playpause.addEventListener('click', function(e) {
       if (audio.paused || audio.ended) audio.play();
       else audio.pause();
    });
    rewind10.addEventListener('click', function(e){
        audio.currentTime = audio.currentTime - 10;
    });
    loop.addEventListener('click', function(e){
        if (audio.loop ==  false){
            audio.loop = true;
        } else{
            audio.loop = false;
        }
    });
    mute.addEventListener('click', function(e) {
        audio.muted = !audio.muted;
    });
    volinc.addEventListener('click', function(e) {
       alterVolume('+');
    });
    voldec.addEventListener('click', function(e) {
       alterVolume('-');
    });
    var alterVolume = function(dir) {
        var currentVolume = Math.floor(video.volume * 10) / 10;
        if (dir === '+') {
            if (currentVolume < 1) audio.volume += 0.1;
        }
        else if (dir === '-') {
            if (currentVolume > 0) audio.volume -= 0.1;
        }
    }
    audio.addEventListener('timeupdate', function() {
       if (!progress.getAttribute('max')) progress.setAttribute('max', audio.duration);
       progress.value = audio.currentTime;
       progressBar.style.width = Math.floor((audio.currentTime / audio.duration) * 100) + '%';
    });
    audio.addEventListener('loadedmetadata', function() {
       progress.setAttribute('max', audio.duration);
    });
    progress.addEventListener('click', function(e) {
       var pos = (e.pageX  - this.offsetLeft) / this.offsetWidth;
       audio.currentTime = pos * audio.duration;
    });

    /* The following function runs the visualizer
    function frameLooper(){
        window.requestAnimationFrame(frameLooper);
        analyser.getByteFrequencyData(dataArray);
        bCtx.clearRect(0, 0, canvas.width, canvas.height);
        var grd = bCtx.createLinearGradient(0, canvas.height, 0, 0);
         grd.addColorStop(0, 'rgba(31, 244, 31, 0.6)');  
         grd.addColorStop(.75, 'rgba(233, 21, 31, 0.8)');
         bCtx.fillStyle = grd;
        bars = 30;
        for (var i = 0; i < bars; i++) {
            bar_x = i * 10;
            bar_width = 9;
            bar_height = -(dataArray[i] / 2);
            bCtx.fillRect(bar_x, canvas.height, bar_width, bar_height);
        }
    }
    */
}

它在 Chrome 中运行良好，但是当我将其引入 Firefox 时，控件不再工作，可视化工具不显示，但我在开发人员工具控制台中没有收到任何错误。