代码之家  ›  专栏  ›  技术社区  ›  Laurent Thevenet

由于缺乏CORS策略,无法分析Soundcloud的流式音频

  •  1
  • Laurent Thevenet  · 技术社区  · 10 年前

    我正在研究这个可视化工具 http://trif.it 它在ChromeStable(41.x)上仍然运行良好,但在ChromeDev、Beta和Canary(42.x以上版本)上停止运行,因为Chrome(以及之前的Firefox)处理待分析音频源的方式发生了变化。

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

    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 bug跟踪器上发布了一个bug/请求( https://code.google.com/p/chromium/issues/detail?id=462998 )但得到的答案是,从现在起,需要在标题中包含CORS,以便分析(或调用)任何媒体资源 createMediaElementSource )和Soundcloud以及我目前在网站上使用的shoutcast流都没有提供这一点。我可以一直使用CORS代理,但也许你知道一个解决方法,或者CORS标头计划在今年的某个时候,因为许多网站很快就会面临与我相同的问题?

    谢谢

    2 回复  |  直到 10 年前
        1
  •  4
  •   padenot    10 年前

    添加一个:

    audioElement.crossOrigin = "anonymous";

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

        2
  •  1
  •   cwilso    10 年前

    这是出于跨域安全原因,不太可能改变。不确定SoundCloud等是否计划访问CORS。