Web 音频 API MediaElementSource 节点和 SoundCloud 无法使用效果？答案

【问题标题】：Web Audio API MediaElementSource node and SoundCloud not working with effects?Web 音频 API MediaElementSource 节点和 SoundCloud 无法使用效果？
【发布时间】：2013-08-13 17:19:39
【问题描述】：

我使用 SoundCloud URL 作为 audio.src 。当我通过我拥有的延迟链运行它时，它只会播放未处理的版本。这是小提琴： http://jsfiddle.net/ehsanziya/nwaH3/

    var context = new webkitAudioContext();
    var audio = new Audio(); //creates a HTML5 Audio Element

    url = 'http://api.soundcloud.com/tracks/33925813/stream' + '?client_id=c625af85886c1a833e8fe3d740af753c';
    //wraps the soundcloud stream to an audio element.
    audio.src = url;

    var source = context.createMediaElementSource(audio);
    var input = context.createGainNode();
    var output = context.createGainNode();
    var fb = context.createGainNode();
    fb.gain.value = 0.4;

    var delay = context.createDelayNode();
    delay.delayTime.value = 0.5;


    //dry
    source.connect(input);
    input.connect(output);

    //wet
    input.connect(delay);
    delay.connect(fb);
    fb.connect(delay);
    delay.connect(output);

   source.mediaElement.play();

链与振荡器节点一起使用。这是什么原因？

还有其他方法可以使用 Web Audio API 处理来自 SoundCloud 的流式声音吗？

【问题讨论】：

标签： javascript html soundcloud web-audio-api

【解决方案1】：

您需要等待音频元素上的canplaythrough 事件触发，然后才能将其与createMediaElementSource 一起使用。

因此，只需添加事件侦听器，并等待回调触发，然后再分配 source = context.createMediaElementSource(audio); 并建立所有连接。

这是一个更新的 jsFiddle，可以满足您的需求：http://jsfiddle.net/nwaH3/3/

【讨论】：

太棒了，谢谢。那么这需要在通过音频上下文播放之前渲染文件吗？还有一个问题是我们可以在播放之前访问缓冲区吗？
MediaStream Processing API 是否会针对此类场景？
好吧，它需要足够的文件才能开始播放。通常，这应该很快发生。这并不意味着必须下载整个文件。不完全确定“在播放前访问缓冲区”是什么意思，但是使用 MediaElementSource 您无法访问整个缓冲区。不过，您可以使用ScriptProcessorNode 进行实时处理。您是否有某个特定的用例，但您不确定如何实施？
我的意思是类似于arraybuffer 的音频数据，因此我们可以可视化波形并可能选择缓冲区的部分以在采样器中使用。就像我们对 BufferSourceNode 所做的那样。