javascript - 如何使AudioContext()和RequestAnimationFrame()在当前浏览器中运行

Question

我正在尝试使用 HTML5 音频和基于 Canvas 的频率创建可视化工具。它在 chrome 和 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...
}

对于requestAnimationFrame，您可以使用this polyfill ，然后使用不带前缀的:

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

您可能还想等待音频元素的“canplay”事件。