使用 WebAudio 播放 Soundcloud 曲目答案

【问题标题】：Playing Soundcloud track with WebAudio使用 WebAudio 播放 Soundcloud 曲目
【发布时间】：2015-05-06 22:16:48
【问题描述】：

我正在探索 WebAudio 和 SoundCloud 的可视化程序，但似乎无法通过基本测试阶段。这是我用于测试的代码，但我什么也听不见。我错过了什么吗？

<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
var context = new AudioContext(),
audio = new Audio(),
source,     
url = 'http://api.soundcloud.com/tracks/204082098/' + '?client_id=(used my client id)';

audio.src = url;
source = context.createMediaElementSource(audio);
source.connect(context.destination);
source.mediaElement.play();

</script>

【问题讨论】：

标签： soundcloud web-audio-api

【解决方案1】：

我猜问题是您如何加载 mp3 文件而最后忘记了 /stream。

此代码有效：

audioContext = new AudioContext();
var source = audioContext.createBufferSource();
var gainNode = audioContext.createGain();
source.connect(gainNode);
gainNode.connect(audioContext.destination);
gainNode.gain.value = 0.5;
source.connect(audioContext.destination);

  function SCkickOffSampleDownload( sample ) {
    var url = new URL(sample+ '?client_id=679877a8ddb9badc6a2a75373c5f3de7');
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";
    request.onload = function() {
      audioContext.decodeAudioData( request.response,
        function(buffer) {
          console.log("sample loaded!");
          sample.loaded=true;
          source.buffer = buffer;
          source.start(0);
      },
      function() { console.log("Decoding error! ");} );
    }
    sample.loaded = false;
    request.send();
  }

var sample = 'http://api.soundcloud.com/tracks/204082098/stream';

SCkickOffSampleDownload( sample );

http://jsfiddle.net/iambnz/s7999f8t/

一些相关文档：

我基于 SoundCloud 数据构建了一个采样器，cwilso 可能知道 UI。 ;-) 你可以在这里查看：http://www.dope-dj-culture.com

【讨论】：

【解决方案2】：

您正在尝试访问跨域边界的声音。由于 SoundCloud 不支持使用 CORS 进行跨域访问，因此当连接 Web 音频时（因为 Web 音频允许您检查位），这将不再起作用。

【讨论】：

SoundCloud says they do support CORS，虽然尚不清楚这是否适用于音频流，还是仅适用于元数据请求。如果他们确实支持音频流，则将crossorigin="anonymous" 添加到<audio> 标记可能就足够了。
是的，您需要音频标签上的crossOrigin="anonymous"; 位。