Web 音频 api 的 Soundcloud CORS 错误答案

【问题标题】：Soundcloud CORS error with web audio apiWeb 音频 api 的 Soundcloud CORS 错误
【发布时间】：2015-06-27 13:39:28
【问题描述】：

我正在尝试使用网络音频 API 访问 soundcloud 音频。我正在使用下面的音频元素来获取音频（并使用 createMediaElementSource 从 javascript 中获取）

<audio id='stream' src="http://api.soundcloud.com/tracks/204082098/stream?client_id=MYCLIENTID" crossorigin='anonymous'></audio>

但这会产生 CORS 错误，即使 Soundcloud 旨在支持 CORS

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cf-media.sndcdn.com/OfjMZo27DlvH.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vT2ZqTVpvMjdEbHZILjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzU0MTI0NzR9fX1dfQ__&Signature=SwXVan2GT2pvaP2Db5VtpElWKcUNVJdEd1MVsvjWu1NLNyt~BPMJO2Yx1Z1vvbX3hc887sw4BabAQBqlp6UldpxK13kizR2l2PJsnMRrO9Tm-MgaoWWDNr0QdUDJeqOp8do94lriA72IwYg21dm61-onQFpuKTZGR7wlvLeiQWMWJArEC0ATj7XfAM-Dy4bCrKGMHFhd6PbkcNigkS00~oUMes~HfjYzph~tAB~EAFcjqx4LFyBM6qMWb63O1U3~-jG39YFOHfR5-VqqA7ojEugtaAlJ30eUp3ygmG9jmfUHoaq1ebU1fIWsx94KOzDEY-8psqLhrj5LjWMBLf5kLg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ. This can be fixed by moving the resource to the same domain or enabling CORS.

这是从网络音频 api 访问 soundcloud 剪辑的正确方法吗？如果不是最好的方法是什么？

提前致谢

【问题讨论】：

有SDK可用，documentation
是的，给出了如何播放音频的示例，但我不确定如何将其与网络音频链接

标签： javascript audio cors soundcloud web-audio-api

【解决方案1】：

你可以这样做：

var audio = new Audio();
audio.src = 'http://api.soundcloud.com/tracks/204082098/stream?client_id=17a992358db64d99e492326797fff3e8';
audio.controls = true;
audio.autoplay = true;
audio.crossOrigin = "anonymous";
document.body.appendChild(audio);

var context = new (window.AudioContext || window.webkitAudioContext)();

window.addEventListener('load', function(e) {
  var source = context.createMediaElementSource(audio);
  source.connect(context.destination);  
}, false);

https://jsfiddle.net/iambnz/t6Ln0424/

【讨论】：

如果有人对答案投了反对票，最好能得到通知。
这很有帮助，但是我需要播放实时流，所以不能先使用 http 请求下载，我拥有的代码与此非常相似，但使用 createMediaElementSource 代替它会破坏它。（我不是反对者：P）
选项 1 对我有用。这基本上是你的代码。你试过了吗？好吧，您将始终使用 http 请求来访问/下载/缓冲曲目。
选项 1 有效。我希望同时支持 soundcloud 以及来自另一个站点的实时音频流和非常长的音频文件，所以想改用 createMediaElementSource。这是您的代码的调整版本（我无法工作）：jsfiddle.net/tujzgccp
确定你可以同时支持，普通的缓冲源比 createmediaelementsource 更灵活——afaik。

【解决方案2】：

我认为您可能会遇到另一位海报不久前所做的相同事情。请在SoundCloud Api redirect confusion and Audio Api Streams查看我的回答

tl;dr - Soundcloud 似乎禁用了某些曲目的 CORS，但不是全部。您的示例中的那个是从 cf-media.sndcdn.com 提供的，它不提供所需的 CORS 标头。

【讨论】：

嗯，好吧，我查了一下，没有找到链接到ec-media.sndcdn.com 的单曲。相反，每条轨道都链接到cf-media.sndcdn.com。这是因为我做错了什么还是只有很大比例的曲目禁用了 CORS（如果你有一个示例 url 来测试会很棒）
很遗憾，不，我没有示例 URL。不过，可能值得问@fauxnoir，因为他/她似乎有一个。 :)
也不确定启用 CORS 的轨道的百分比。