Как сделать AudioContext() и RequestAnimationFrame() в текущих браузерах

Question

Я пытаюсь создать визуализатор с использованием HTML5 Audio и частот, основанных на холсте. Он отлично работает на хроме и сафари. Но я хочу заставить его работать и с 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 из первого делает его работу с хромом и 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... 
} 

Для requestAnimationFrame вы можете использовать this polyfill, а затем использовать его без префикса:

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

Вы, вероятно, также хотите дождаться звукового элемента " canplay ".