由于缺少 CORS 策略，无法分析 Soundcloud 的流音频 [英] Cannot analyse Soundcloud's streaming audio because of the lack of CORS policy

问题描述

我正在开发这个可视化工具 http://trif.it，它在 Chrome Stable (41.x) 但在 Chrome Dev、Beta 和 Canary(42.x 及更高版本)中停止工作，因为 Chrome(以及之前的 Firefox)处理要分析的音频源的方式发生了变化.

I am working on this visualizer http://trif.it that still works well on Chrome Stable (41.x) but stopped working in Chrome Dev, Beta and Canary (42.x onwards) because of a change in how Chrome (and Firefox before that) handles audio sources to be analysed.

这是有问题的代码.在您删除处理音频路由的最后一部分的注释之前，它应该可以正常工作.

Here is the code that is problematic. It should work well until you remove the comments on the last portion that is handling the audio routing.

var audioElement = new Audio();
var clientId = "xxxxx";

var oReq = new XMLHttpRequest();
//oReq.onload = reqListener;
oReq.open("get", "http://api.soundcloud.com/tracks/194245583.json?client_id=" + clientId, true);
oReq.send();

oReq.onreadystatechange = function() {
  if (oReq.readyState != 4)  { return; }

  var serverResponse = JSON.parse(oReq.responseText);
  console.log(serverResponse);

  audioElement.src = serverResponse.stream_url + "?client_id=" + clientId;
  audioElement.autoplay = true;
  audioElement.preload = true;
};

/*var audioContext = new AudioContext();
var audioSource = audioContext.createMediaElementSource(audioElement);
var audioAnalyser = audioContext.createAnalyser();
var audioGain = audioContext.createGain();
audioGain.gain.value = 1.0;

audioSource.connect(audioAnalyser);
audioAnalyser.connect(audioGain);
audioGain.connect(audioContext.destination);*/

我最初在 Chromium 错误跟踪器上发布了一个错误/请求 (https://code.google.com/p/chromium/issues/detail?id=462998) 但得到了一个关于从现在开始需要在标题中包含 CORS 以分析任何媒体资源的答案(或通过 createMediaElementSource) 和 Soundcloud 调用，以及我目前在网站上使用的 Shotcast 流没有提供.我总是可以使用 CORS 代理，但也许您知道一种解决方法，或者今年某个时候计划了 CORS 标头，因为许多网站很快就会面临和我一样的问题?

I had initially posted a bug/request on Chromium bug tracker (https://code.google.com/p/chromium/issues/detail?id=462998) but got an answer about the need to have CORS in the header from now on for any media resources to be analysed (or called through createMediaElementSource) and Soundcloud as well as the shoutcast streams I am using on the site at the moment are not providing that. I could always use a CORS proxy but perhaps that you know a workaround or that CORS headers are planned at some point this year as many websites will face the same problem as me soon enough?

谢谢.

推荐答案

添加:

audioElement.crossOrigin = "匿名";

在那里的某个地方，在设置源之前，应该可以正常工作.

somewhere in there, before setting the source, that should work fine.

这篇关于由于缺少 CORS 策略，无法分析 Soundcloud 的流音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！