Web Audio API 无法在 iOS 13.3 版上播放。适用于旧版本的 iOS

Question

我有一个使用网络音频 API 制作的音频可视化工具。它可以在 PC 上运行，并且在我更新到 13.3 之前它确实可以在 iOS 上运行。

我不知道是什么导致它不起作用。我所知道的是，它只发生在较新版本的 iOS 上。

这是我的 jsfiddle。 https://jsfiddle.net/r1dobj07/

document.getElementById("btn").addEventListener("click", function() {

var canvas = document.getElementById('canvas');
var audio = new Audio();
audio.loop = true;
audio.autoplay = false;
audio.crossOrigin = "anonymous";

audio.addEventListener('error', function(e) {
  console.log(e);
});
audio.src = "https://greggman.github.io/doodles/sounds/DOCTOR VOX - Level Up.mp3";
//audio.play();
audio.controls = true;

document.getElementById("wrapper").append(audio);

var player = document.getElementById('audio_player');
var context = new(window.AudioContext || window.webkitAudioContext)();
var src = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();
src.connect(analyser);
analyser.fftSize = 32;
analyser.connect(context.destination);

var ctx = canvas.getContext("2d");

var bufferLength = analyser.frequencyBinCount;


var dataArray = new Uint8Array(bufferLength);


var WIDTH = canvas.width;
var HEIGHT = canvas.height;

var barWidth = (WIDTH / bufferLength) * 0.5;
var barHeight;
var x = 0;


function renderFrame() {
  requestAnimationFrame(renderFrame);
  x = 0;
  analyser.getByteFrequencyData(dataArray);

  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.clearRect(0, 0, WIDTH, HEIGHT);

  for (var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];
    if (barHeight === 0) {
      barHeight = 20;
    }
    var barHeightScaled = barHeight / 250;
    var barHeightScaled2 = barHeightScaled * HEIGHT;
    var newHeight = HEIGHT - barHeightScaled2;
    var r = 111;
    var g = 121;
    var b = 180;

    CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
      if (w < 2 * r) r = w / 2;
      if (h < 2 * r) r = h / 2;
      this.beginPath();
      this.moveTo(x + r, y);
      this.arcTo(x + w, y, x + w, y + h, r);
      this.arcTo(x + w, y + h, x, y + h, r);
      this.arcTo(x, y + h, x, y, r);
      this.arcTo(x, y, x + w, y, r);
      this.closePath();
      return this;
    }


    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.roundRect(x, newHeight / 2, barWidth, barHeightScaled2, 50).fill();

    x += barWidth + 4;
  }
}

renderFrame();

}

);

在 PC 上运行良好。在我的 iPhone 上，它不播放音频。我可以看到条形图在 iOS 上呈现，但它们没有移动，因为没有输出音频。

Answer 1

不幸的是，目前有一个bug in iOS related to the MediaStreamAudioSourceNode。将 MediaElement 连接到 AudioContext 后，它会导致它停止。

Answer 2

我有同样的问题，我的测试设置是在 iOS 13.6.1 上。太糟糕了！我是一名 WebAudio 专家，所以这就是我的发现。

当我们的音乐应用程序设置为后台模式（用户切换到另一个应用程序或屏幕关闭）时，WkWebView 中的所有 WebAudio AudioContexts 会在 27 秒后冻结。在那一刻，我们的应用程序变为静音并且 AudioContext.currentTime 停止增加，尽管 AudioContext.state 仍在“运行”。这是检测我发现的损坏的 WebAudio 状态的唯一方法。

最糟糕的是，将应用程序带回前台不会使冻结的 AudioContexts 复苏，它们永远死了，我试过了。您可以重新创建新的 AudioContexts，但在我们的例子中，我们只是重新启动所有应用程序，这意味着用户丢失了他的进度。这是一个等待真正的 iOS 修复的快速修复。

这显然是iOS 13引入的一个大bug。而且我看到这个问题已经快一年了，还没有修复，这不尊重所有HTML5开发者，很伤心！希望有能力的人认真对待这个问题。