使用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可视化消失了。

---

两种方法都显示EQ在Chrome（WIN）进行测试时，因此似乎有特定的与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?