使用 Web Audio API 获取音频可视化以在 iOS 上工作

Question

我正在开发一个专门在 iPhone 上使用的 HTML5 音频播放器，并试图让一个 EQ 可视化器工作。根据我的发现，有两种设置方法：

---

使用 XMLHttpRequest 按需加载 mp3 文件的地方：

var request = new XMLHttpRequest();
request.open('GET', 'sampler.mp3', true);
request.responseType = 'arraybuffer';
request.addEventListener('load', bufferSound, false);
request.send();

function bufferSound(event) {

   var request = event.target;
   var buffer = myAudioContext.createBuffer(request.response, false);
   source = myAudioContext.createBufferSource();
   source.buffer = buffer;

}

然后您可以使用 source.noteOn 和 source.noteOff 函数来播放和暂停音频。以这种方式工作，我能够进行 EQ 可视化。但是，您必须等到 mp3 文件完全加载后才能开始播放，这在我们的情况下不起作用。

---

另一种方法是在页面上已有一个<audio> 元素，然后您可以使用以下方法从中获取音频数据：

source = myAudioContext.createMediaElementSource(document.querySelector('audio'));

然后您可以使用音频标签的播放和暂停功能。这解决了加载问题，因为它允许在页面加载后立即播放媒体......但是，EQ 可视化消失了。

---

在 Chrome (WIN) 上测试时，这两种方法都会显示 EQ，因此 iOS/iPhone 似乎有一些特定的东西不允许我从 <audio> 标记中获取数据，但可以让我得到如果我按需加载 mp3 文件。

...

有什么想法吗？

Answer 1

不幸的是Safari doesn't properly support MediaElementSource。这是一个错误：Why aren't Safari or Firefox able to process audio data from MediaElementSource?