iOS Safari上的webkitAudioContext createMediaElementSource不工作

Question

我想在iPhone上做一个现场声音分析。因此，我使用webkitAudioContext分析器。

var ctx = new (window.AudioContext || window.webkitAudioContext);
var audioGoodmorning = new Audio('assets/sounds/greeting.m4a');
var audioSrc = ctx.createMediaElementSource(audioGoodmorning);
var analyser = ctx.createAnalyser();

analyser.fftSize = 32;
audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.fftSize);

analyser.getByteFrequencyData(frequencyData);

这在Mac上的Chrome上运行得很好。当将网站添加到主屏幕时，它也可以在Safari上使用

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="CHAR">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

如果不将站点添加到主屏幕上，它在Safari上就不起作用。当使用嵌入iOS wkwebview的站点时，它不起作用。这就是我想要实现的。当不工作时，frequencyData阵列充满了零。

有没有人遇到过这种问题？

提前感谢

Answer 1

检查这个小提琴：

https://jsfiddle.net/4b2dvhqy/1/

var audio = new Audio();
audio.loop = true;
audio.autoplay = true;
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);

audio.addEventListener('canplay', function() {
  var audioSourceNode = audioContext.createMediaElementSource(audio);

  audioSourceNode.connect(analyser);
  analyser.connect(audioContext.destination);
});

它在Safari上工作得很好，因为音频内容是在用户点击事件下处理的。

如果没有“用户点击事件”，它只能在Chrome或Safari的"localhost“上正常工作。

此外，这另一个Fiddle可以很好地处理HTML标签音频：

https://jsfiddle.net/cbua1pkn/1/

这里的诀窍是当用户点击播放按钮时初始化audioContext！(因此，您处于用户事件上下文中)。

Answer 2

以防万一这个问题还没有解决，根据https://caniuse.com/#search=webaudio的说法，Safari仍然不支持createMediaElementSource，所以我认为你在这里不太走运。不幸的是，Safari对WebAudio应用程序接口的支持不是很好。