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

Question

我有一个使用网络音频API制作的音频可视化程序。它可以在PC上运行，并且可以在iOS上运行，直到我更新到13.3。

我不知道是什么原因导致它无法正常工作。我所知道的是，它仅在更新版本的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，它就会停止。