AudioContext 和动画在 iPhone 上不起作用答案

【问题标题】：AudioContext and animation do not work on iPhoneAudioContext 和动画在 iPhone 上不起作用
【发布时间】：2021-12-25 13:34:49
【问题描述】：

我这里有这个小代码sn-p

var context = new(window.AudioContext || window.webkitAudioContext)();
.....
var source = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();

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

source.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 256;

var bufferLength = analyser.frequencyBinCount;

var dataArray = new Uint8Array(bufferLength);

var WIDTH = canvas.width;
var HEIGHT = canvas.height + (canvas.height * 0.7);

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


function renderFrame() {
  x = 0;
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  analyser.getByteFrequencyData(dataArray);

  for (var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];
    var r = barHeight + (25 * (i / bufferLength));
    var g = 250 * (i / bufferLength);
    var b = 50;
    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }
  requestAnimationFrame(renderFrame);
}
requestAnimationFrame(renderFrame);


audio.src = jQuery("source").attr("src");
audio.play();

完整代码和演示在这里：https://jsfiddle.net/6gv39mk0/1/show

这基本上显示了播放音频时的动态波形

它可以在桌面浏览器、android 浏览器上运行，但无法在 iPhone 上运行。我是否遗漏了什么，或者有什么我必须声明/做不同的事情？

【问题讨论】：

它可以在桌面上的 safari 上运行吗？在通过 javascript 自动播放音频时，Safari 有一些非常严格的默认设置。我的猜测是，如果您查看移动浏览器的控制台，您会发现 webkit 正在抱怨自动播放音频，而且真的没有什么可以解决的。用户需要设置首选项以允许在网页上自动播放音频。
你好@DaveVanFleet。在 Safari 桌面上它可以播放但没有动画。不幸的是，我没有 iPhone 来验证控制台或错误日志。反正应该和自动播放没有关系，因为我还在用音频播放器的播放按钮，所以最终用户还是要点击那个按钮。
我已经解决了。在播放按钮上添加了一个透明按钮，使伎俩。检查这个小提琴jsfiddle.net/L1trwz7o

标签： javascript ios iphone mobile audiocontext

【解决方案1】：

我已经通过播放按钮顶部的透明按钮解决了这个问题。这可能会让 iPhone 浏览器明白存在交互。之后按钮被隐藏（z-index -1）它不像解决方案那么优雅，但它确实有效！

  var button = document.createElement('button');
    jQuery(button).attr('id', 'btn');
    jQuery(canva).before(button);
    jQuery(button).on('click', function() {
        start();
      jQuery(button).remove();
    })

这是小提琴https://jsfiddle.net/L1trwz7o/

【讨论】：