iOS Safari 上的 webkitAudioContext createMediaElementSource 不起作用

Posted 2023-02-25

【中文标题】iOS Safari 上的 webkitAudioContext createMediaElementSource 不起作用

【英文标题】：webkitAudioContext createMediaElementSource on iOS Safari not working

【发布时间】：2016-04-05 15:07:04

【问题描述】：

我想在 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 数组全为零。

有人遇到过这种问题吗？

提前致谢

【问题讨论】：

应该可以根据：caniuse.com/#search=AudioContext 在这里使用 mozilla 示例进行测试：developer.mozilla.org/en-US/docs/Web/API/AudioContext 但可能是嵌入式 Web 视图与浏览器版本不同

【参考方案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 的“本地主机”上正常工作。

另外，这个其他的 Fiddle 可以很好地处理 html 标签音频：

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

这里的技巧是当用户点击播放按钮时初始化audioContext！ （因此您处于用户事件上下文中）。

【讨论】：

jsfiddle 示例在移动 safari 中对我不起作用（按播放；没有播放）。

看起来 iOS 13 中存在一个错误，用户无法在 或 元素上调用 createMediaElementSource。在您调用该函数并且节点不产生任何输出后，它只是拒绝播放内容。你可以在这里找到更多信息：bugs.webkit.org/show_bug.cgi?id=211394

【参考方案2】：

以防万一这还没有解决，根据https://caniuse.com/#search=webaudio Safari 仍然不支持createMediaElementSource，所以我认为你在这里不走运。不幸的是，Safari 对 WebAudio API 的支持不是很好。