Question

是否可以通过<audio/>从createMediaElementSource - 元素加载音频文件，然后将音频数据加载到 AudioBufferSourceNode ？

使用audio-element作为源（MediaElementSource）似乎不是一个选项，因为我想使用像noteOn和noteGrain这样的缓冲区方法。

不幸的是，不能通过XHR将音频文件直接加载到缓冲区 （见Open stream_url of a Soundcloud Track via Client-Side XHR?）

虽然可以从音频元素加载缓冲区内容：

http://www.w3.org/2011/audio/wiki/Spec_Differences#Reading_Data_from_a_Media_Element

或者甚至可以直接使用<audio/> - 元素的缓冲区作为sourceNode吗？

Answer 1

好像无法从MediaElementSourceNode中提取音频缓冲区。

请参阅https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-html5/HkX1sP8ONKs

非常欢迎任何证明我错误的回复！

Answer 2

这是可能的。在http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs查看我的帖子。那里还有一个代码片段和示例。有一些未解决的错误，但是将<audio>加载到Web Audio API中应该可以正常工作。

// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);

var context = new webkitAudioContext();
var analyser = context.createAnalyser();

// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
  // Our <audio> element will be the audio source.
  var source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);

  // ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);

Answer 3

我不确定您是否找到了更好的解决方案，我还检查了您发布的W3C链接： http://www.w3.org/2011/audio/wiki/Spec_Differences#Reading_Data_from_a_Media_Element

但为了让它真正起作用，你必须使用AudioContext.createScriptProcessor()。我还没有尝试过，但基本上你将源节点（音频元素）连接到脚本处理器，但如果你不需要它甚至不输出音频。在onaudioprocess回调中，您可以直接访问音频缓冲区数据（当然是指定大小的块）。上面的链接中有一些例子。

另外我认为你可以以某种方式调整播放速度，以便更快地获得更多缓冲阵列。

通过createMediaElementSource从<audio>元素将audiodata加载到AudioBufferSourceNode中？</audio>

3 个答案: