Firefox（34.0.5）中有問題的音頻可視化器 Firefox和Web Audio API的問題

Question

我想盡全力解決這個問題，我也不知道問題是什么。

我有一個帶有自定義控件的音頻播放器，激活我的控件的javascript效果很好，直到添加了可視化工具Web Audio 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時，控件不再起作用，可視化器也不會顯示，但是在開發人員工具控制台中沒有出現任何錯誤。

Answer 1

只需更改audio.controls = true; 參見http://jsfiddle.net/bhaxt194/