WebGL (three.js) 앱용 사운드 클 라우드 파형/아트웍 액세스 - CORS 문제

Question

사운드 클라우드 API의 데이터를 사용하는 WebGL 앱에서 작업하고 있습니다.

저는 ThreeJS를 사용하여 트랙 아트 워크와 파형 PNG를 텍스처로로드하여 스프라이트에 적용하려고합니다.

하지만 크롬에서 오류를 받고 있어요 :

이미지 원점에서 간 리소스 공유 정책에 의해 차단 되었기 때문에로드 [soundcloudapi] : 없음 '액세스 제어 - 허용 - 원산지'헤더 요청한 자원에 있습니다.

그래서 나는 CORS에 최대 읽어 봤는데 그것은 CORS는 JSON 데이터 ( Soundcloud CORS)를위한 몇 가지 방법으로 지원하는 사운드 클라우드 문서에서 보이지만 있는지 확실하지 않습니다 또는이이 요청을 확장하는 방법 트랙과 관련된 png. 내가 호출하기 전에

THREE.ImageUtils.crossOrigin = ''; 

내가하지만 난 어디서든 'loadTexture을()'과 같이 넣어 :

는 또한 Three.js를하고 CORS 그래서 내가 포함 한 라인에 대해 조금 읽었습니다 여전히 같은 오류가 발생합니다.

한 가지 해결 방법은 자바 스크립트에서 PNG를 요청한 다음 이미지를 잡고 일시적으로 내 서버에 저장하는 동안 PHP 파일에 AJAX 요청을하는 것이지만 많은 사람들이 끝내면 정말 효율적이지 않다고 생각했습니다. 내 애플 리케이션을 사용하여 (그리고 아마도 법적 또는 Soundcloud의 관점에서 뭔가가 아닙니다). 그래서 나는 이것을 가능한 한 많이 피하고 싶습니다.

누구나 전에 사용해 보았습니까? 누구든지 아이디어가 있습니까?

감사합니다.

Answer 1

나는 몇 달 전에 같은 문제가 있었는데, 나는 파형 데이터를 얻기 위해 http://www.waveformjs.org/을 사용하고있다. 누군가 Soundcloud에서 제작했습니다. 당신이 백엔드의 어떤 종류가있는 경우 (이 지금처럼 내려하지 때) 당신은 REPO를 (그것이 비록 루비에서의) 확인할 수 있습니다 그렇지 않으면 당신은 아주 쉽게 데이터를 요청할 수 있습니다 데이터에서

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

(AN을 0부터 1까지의 숫자 배열)을 사용하면 파형을 재구성 할 수 있습니다. D3을 사용하여 그 일을 수행하고 있습니다. you can check how in this project 이상적인 대답은 아니지만 적어도 저를 위해 작동합니다 (다시 말해서 아래쪽에 있지 않습니다).