访问 WebGL (three.js) 应用程序的 Soundcloud 波形/图稿 - CORS 问题答案

【问题标题】：Accessing Soundcloud waveform/artwork for WebGL (three.js) app - CORS issue访问 WebGL (three.js) 应用程序的 Soundcloud 波形/图稿 - CORS 问题
【发布时间】：2015-02-24 22:25:15
【问题描述】：

我正在开发一个使用来自 soundcloud API 的数据的 WebGL 应用程序。

我正在尝试使用 ThreeJS 将轨道图稿和波形 PNG 加载到纹理中以放置到精灵上。

但我在 chrome 中遇到错误：

来自 [soundcloudapi] 的图像已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。

所以我一直在阅读 CORS，从 Soundcloud 文档看来，JSON 数据 (Soundcloud CORS) 以某种方式支持 CORS，但我不确定这是否或如何扩展到请求 pngs与曲目相关联。

我还阅读了一些关于 Three.js 和 CORS 的内容，因此我添加了以下内容：

THREE.ImageUtils.crossOrigin = '';

我在任何地方调用“loadTexture()”之前都这样写了，但我仍然遇到同样的错误。

我在想一种解决方法是在 javascript 中请求 PNG，然后向 php 文件发出 AJAX 请求，同时抓取图像并将其临时存储在我的服务器上，但如果很多人最终都这样做，这并不是很有效使用我的应用程序（可能不合法或从 Soundcloud 的角度来看）。所以我想尽可能避免这种情况。

以前有人试过吗？有人有什么想法吗？

感谢您的宝贵时间。

【问题讨论】：

嗯，这很有趣 - 似乎 artifact_url 确实有 CORS 标头，因为在我将 crossOrigin 设置为“匿名”后，我现在可以在 three.js 中显示它们，但waveform_url 没有 CORS 标头。 Soundcloud 团队有可能添加它们吗？

标签： javascript three.js webgl cors soundcloud

【解决方案1】：

几个月前我遇到了同样的问题，我正在使用http://www.waveformjs.org/ 来获取波形数据。它是由 Soundcloud 的某个人制作的。如果你有某种后端，你可以检查 repo（虽然它在 ruby 中），否则你可以很容易地请求数据（当它没有关闭时，就像现在一样）：

$.ajax(
    url: 'http://www.waveformjs.org/w'
  , dataType: 'jsonp'
  , data: url: waveform_url
)

从数据（从 0 到 1 的数字数组），您可以重建波形，这就是我正在使用 D3 所做的，you can check how in this project 这不是一个理想的答案，但至少它对我有用（再次，当它没有关闭时：/）。

【讨论】：