如何使AudioContext（）和RequestAnimationFrame（）在當前瀏覽器中運行

Question

我正在嘗試使用基於畫布的HTML5音頻和頻率創建可視化工具。它在鉻和safari上運行良好。但我想讓它在IE和Firefox上工作。

// Create a new instance of an audio object and adjust some of its properties 
 
var audio = new Audio(); 
 
audio.crossOrigin = "anonymous"; 
 
audio.src = 'http://www.streaming507.com:8072/stream'; 
 
audio.controls = true; 
 
audio.loop = true; 
 

 
// Establish all variables that your Analyser will use 
 
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height; 
 
// Initialize the MP3 player after the page loads all of its HTML into the window 
 
window.addEventListener("load", initMp3Player, false); 
 

 
function initMp3Player() { 
 
    document.getElementById('audio_box').appendChild(audio); 
 
    context = new webkitAudioContext(); // AudioContext object instance 
 
    analyser = context.createAnalyser(); // AnalyserNode method 
 
    canvas = document.getElementById('analyser_render'); 
 
    ctx = canvas.getContext('2d'); 
 
    // Re-route audio playback into the processing graph of the AudioContext 
 
    source = context.createMediaElementSource(audio); 
 
    source.connect(analyser); 
 
    analyser.connect(context.destination); 
 
    //frameLooper(); 
 
} 
 
// frameLooper() animates any style of graphics you wish to the audio frequency 
 
// Looping at the default frame rate that the browser provides(approx. 60 FPS) 
 
function frameLooper() { 
 
    window.webkitRequestAnimationFrame(frameLooper); 
 
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
 
    analyser.getByteFrequencyData(fbc_array); 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas 
 
    var my_gradient = ctx.createLinearGradient(0, 0, 170, 0); 
 
    my_gradient.addColorStop(0, "black"); 
 
    my_gradient.addColorStop(0.5, "red"); 
 
    my_gradient.addColorStop(1, "white"); 
 
    ctx.fillStyle = my_gradient; // Color of the bars 
 
    bars = 100; 
 
    for (var i = 0; i < bars; i++) { 
 
    bar_x = i * 3; 
 
    bar_width = 2; 
 
    bar_height = -(fbc_array[i]/2); 
 
    // fillRect(x, y, width, height) // Explanation of the parameters below 
 
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
 
    } 
 
}

div#mp3_player { 
 
    width: 500px; 
 
    height: 60px; 
 
    background: #000; 
 
    padding: 5px; 
 
    margin: 50px auto; 
 
} 
 

 
div#mp3_player > div > audio { 
 
    width: 500px; 
 
    background: #000; 
 
    float: left; 
 
} 
 

 
div#mp3_player > canvas { 
 
    width: 500px; 
 
    height: 30px; 
 
    background: #002D3C; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mp3_player"> 
 
    <div id="audio_box"></div> 
 
    <canvas id="analyser_render"></canvas> 
 
</div>

請注意，它並不顯示在堆棧溢出的可視化，但本地主機上運行。 基本上它沒有在IE和Moz上顯示的問題是webkitAudioContext()和webkitRequestAnimationFrame()。從第一個移除webkit使它在Chrome和IE上工作，但停止在Safari上工作。

是否有任何想法如何使它在Chrome，Safari，Firefox和IE等當前瀏覽器中工作。

Answer 1

嘗試分配的AudioContext這樣：

var Actx; 
try { 
    Actx = (AudioContext || webkitAudioContext); 
} 
catch(err) { 
    // sorry, no visualizer for you... 
} 

if (Actx) { 
    context = new Actx(); 
    // ... continue here 
} 
else { 
    // optionally rub it in here instead of in catch... 
} 

爲​​你可以使用this polyfill，然後使用它沒有前綴：

function frameLooper() { 
    window.requestAnimationFrame(frameLooper); 
    ... 

您可能還需要等待音頻元素的「 canplay「事件。