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?

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

1 个答案: