网络音频 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，它就会导致 MediaElement 停止。

Answer 2

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

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

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

这显然是 iOS 13 中引入的一个大错误。另外我可以看到这个问题已经快一年了，而且还没有修复，这对所有 HTML5 开发者都是不尊重的在这里，那是可悲的！希望有能力的人认真对待这个问题。

网络音频 API 无法在 iOS 版本 13.3 上播放。适用于 iOS 的旧版本

Web Audio API not playing on iOS version 13.3. Works on older versions of iOS

html

javascript

ios

web-audio-api