Web 音频 api 的 Soundcloud CORS 错误

Posted

技术标签:

【中文标题】Web 音频 api 的 Soundcloud CORS 错误【英文标题】:Soundcloud CORS error with web audio api 【发布时间】: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 是的,给出了如何播放音频的示例,但我不确定如何将其与网络音频链接 【参考方案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 的轨道的百分比。

以上是关于Web 音频 api 的 Soundcloud CORS 错误的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法强制使用SoundCloud javascript流API的MP3块?

播放soundcloud音频时暂停youtube视频

如何让 Safari 12 处理来自 soundcloud 的音频?

使用节点同时从 soundcloud 源流式传输音频

如何播放 SoundCloud RTMP 流?

使用 SoundCloud 默认音频小部件,您可以将其设置为从 JavaScript 随机播放吗?