javascript - AudioContext Analyzer 在 firefox/chrome 上工作，但在 Safari 上不工作

Question

我正在为音频编写可视化工具，并且在 mac os x 上的 safari 以及使用远程调试器进行 ios 调试时遇到问题。在更新 AudioContext 分析器的动画函数上，ByteFrequency 数组中的值不会在 safari 上更新。以下是代码示例：

var context;
if (typeof AudioContext !== "undefined") {
    context = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
    context = new webkitAudioContext();
}
var analyser = context.createAnalyser();
analyser.fftSize = 64;
frequencyData = new Uint8Array(analyser.frequencyBinCount);

// Get the frequency data and update the visualisation

function update() {
    requestAnimationFrame(update);
    analyser.getByteFrequencyData(frequencyData); 
};

$(document).ready(function(){
    $("#player").bind('canplay', function() {
        var source = context.createMediaElementSource(this);
        source.connect(analyser);
        analyser.connect(context.destination);
    });
};

这是工作示例的链接http://basketballjock.org/

Answer 1

在 Safari 中，您需要在用户交互后创建音频上下文。例如在按钮 onclick 回调中。

HTML： <button onclick="play">Play</button>

Javascript：

function play() {
  var context;
  if (typeof AudioContext !== "undefined") {
      context = new AudioContext();
  } else if (typeof webkitAudioContext !== "undefined") {
      context = new webkitAudioContext();
  }
  var analyser = context.createAnalyser();
  analyser.fftSize = 64;
  frequencyData = new Uint8Array(analyser.frequencyBinCount);

  // Get the frequency data and update the visualisation

  function update() {
    requestAnimationFrame(update);
    analyser.getByteFrequencyData(frequencyData); 
  };

  var source = context.createMediaElementSource(this);
  source.connect(analyser);
  analyser.connect(context.destination);
}