我正在开发一个 WebGL 应用程序,它使用来自 soundcloud API 的数据。
我正在尝试使用 ThreeJS 将轨道图稿和波形 PNG 加载到纹理中以放入 Sprite 上。
但是我在 chrome 中遇到错误:
Image from origin [soundcloudapi] has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
所以我一直在阅读 CORS,从 Soundcloud 文档看来,CORS 以某种方式支持 JSON 数据 ( Soundcloud CORS ),但我不确定这是否或如何扩展到请求 png与轨道相关联。
我还阅读了一些有关 Three.js 和 CORS 的内容,因此我添加了以下行:
THREE.ImageUtils.crossOrigin = '';
我把它放在任何地方调用“loadTexture()”之前,但我仍然收到相同的错误。
我认为一种解决方法是在 javascript 中请求 PNG,然后向 php 文件发出 AJAX 请求,同时抓取图像并将其临时存储在我的服务器上,但如果很多人最终都这样做,那么这并不是很有效使用我的应用程序(从 Soundcloud 的 Angular 来看可能不合法或不合法)。所以我想尽可能避免这种情况。
有人尝试过这个吗?有人有什么想法吗?
感谢您的宝贵时间。
最佳答案
几个月前我遇到了同样的问题,我正在使用 http://www.waveformjs.org/来获取波形数据。 它是由 Soundcloud 的某人制作的。如果你有某种后端,你可以检查存储库(虽然它是在 ruby 中),否则你可以很容易地请求数据(当它没有关闭时,就像现在一样):
$.ajax(
url: 'http://www.waveformjs.org/w'
, dataType: 'jsonp'
, data: url: waveform_url
)
根据数据(从 0 到 1 的数字数组),您可以重建波形,这就是我使用 D3 所做的,you can check how in this project 这不是一个理想的答案,但至少它对我有用(同样,当它没有关闭时:/)。
关于javascript - 访问 WebGL (two.js) 应用程序的 Soundcloud 波形/图稿 - CORS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27676923/