有問題的音頻可視化工具在Firefox（34.0.5）||問題與Firefox和網絡音頻API

Question

我已經試圖機架解決此我的大腦，我不知道是什麼問題。

我有一個音頻播放器，自定義控件和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，控件不再工作，可視化不顯示，但我沒有收到ANY開發人員工具控制檯中的錯誤。

Answer 1

只要改變audio.controls = true; 見http://jsfiddle.net/bhaxt194/