soundcloud api和web音頻api不能一起使用

Question

今天，我添加了一種允許用戶在網站上使用soundcloud音樂的方法，除了它僅在我刪除由網絡音頻api生成的分析器時才有效。

這是將soundcloud鏈接附加到音頻標簽的代碼：

$(document).keydown(function(e){
    if (e.which == 13 && $("#customSong").is(":focus")){
        var customSongLink = $("#customSong").val();

        SC.get('/resolve', { url: customSongLink }, function(sound) {
            SC.get("/tracks/" + sound.id, {}, function(sound){
                $("#Musique").attr("src", sound.uri+"/stream?client_id=MY_CLIENT_ID" );

                $(".mediaName").html("<span></span>");
                $(".mediaName span").html(sound.user.username+" - "+sound.title);
                $(".mediaName").textfill();
            });
        });
    }
});

這是可視化工具的代碼：

var canvas, ctx, source, context, analyser, fbc_array, bar_x, bar_height;
function initVisualizer() {
    context = new AudioContext();
    analyser = context.createAnalyser();
    biquad = context.createBiquadFilter();
    gainNode = context.createGain();
    canvas = document.getElementById("visualizer");
    ctx = canvas.getContext('2d');
    ctx.fillStyle = "#3f3f3f";


    analyser.smoothingTimeConstant = 0.8;
    biquad.frequency.value = 15000;
    gainNode.gain.value = 1;

    source = context.createMediaElementSource(Musique);
    source.connect(biquad);
    biquad.connect(gainNode);
    gainNode.connect(analyser);
    analyser.connect(context.destination);

    $("#frequencyNumber").html(biquad.frequency.value);
    $("#visualizerSensibilityNumber").html(analyser.smoothingTimeConstant);
    $("#gainNumber").html(gainNode.gain.value.toPrecision(3));

    framelooper()
}

function framelooper() {
    window.requestAnimationFrame(framelooper);
    fbcArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbcArray);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i=0; i < bars; i++) {
        bar_x = i * bar_x_spaces + 0.5;
        bar_height = -(fbcArray[i] / bar_height_sensibility);

        if (visualizerStyle == 1){
            //Simple
            ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
            $("#visualizerStyleType").html("Simple");
        }
        else if (visualizerStyle == 2) {
            //Reflection
            ctx.fillRect(bar_x, canvas.height/2, bar_width, bar_height/2);
            ctx.fillRect(bar_x, canvas.height/2, bar_width, -bar_height/2);
            $("#visualizerStyleType").html("Reflection");
        }
        else {
            //Two-faced
            ctx.fillRect(0, bar_x, -bar_height, bar_width);
            ctx.fillRect(canvas.width, bar_x, bar_height, bar_width);
            $("#visualizerStyleType").html("Face to Face");
        }
    }
}

有問題的網站（雙擊歌曲標題以顯示輸入框，並在其中輸入soundcloud鏈接）

編輯：我發現問題是由於音頻文件的跨域更改而引起的，我還看到很多人說添加“ crossOrigin =匿名”可以解決此問題，但對我而言並非如此。

它僅對某些音樂有用嗎，還是不再可能解決？

如果是較晚版本，還有其他解決方法嗎？

Answer 1

僅僅設置crossOrigin是不夠的。 服務器還必須通過返回適當的標頭來允許跨域訪問。 這可能不在您的控制范圍內。

Answer 2

看起來如果沒有SDK且沒有createMediaElementSource，它將正常工作。

那就是我從SoundCloud加載樣本的方式。

function SCkickOffSampleDownload( sample ) {
    var url = new URL(sample+ '?client_id=679877a8ddb9badc6a2a75373c5f3de7');
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";
    request.onload = function() {
      audioContext.decodeAudioData( request.response,
        function(buffer) {
          console.log("sample loaded!");
          sample.loaded=true;
          source.buffer = buffer;
          source.start(0);
          initVisualizer();          
      },
      function() { console.log("Decoding error! ");} );
    }
    sample.loaded = false;
    request.send();
  }

這幾乎與您的代碼有關：

http://jsfiddle.net/iambnz/8qw5511L/

編輯1：

$(function() {
SC.initialize({
    client_id: "679877a8ddb9badc6a2a75373c5f3de7"
  });

var scurl = 'https://soundcloud.com/bnzlovesyou/daktari-preview';
var canvas, ctx, source, context, analyser, fbc_array, bar_x, bar_height;
var visualizerColor = "#3f3f3f";
var bars = 50;
var bar_x_spaces = 6;
var bar_width = 4;
var bar_height_sensibility = 1.75;
var visualizerStyle = 1;

audioContext = new AudioContext();
var source = audioContext.createBufferSource();
var gainNode = audioContext.createGain();
source.connect(gainNode);
gainNode.gain.value = 0.5;

function SCkickOffSampleDownload( sample ) {
    var url = new URL(sample+ '?client_id=679877a8ddb9badc6a2a75373c5f3de7');
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";
    request.onload = function() {
      audioContext.decodeAudioData( request.response,
        function(buffer) {
          console.log("sample loaded!");
          sample.loaded=true;
          source.buffer = buffer;
          source.start(0);
          initVisualizer();          
      },
      function() { console.log("Decoding error! ");} );
    }
    sample.loaded = false;
    request.send();
  }

function initVisualizer() {
 //   context = new AudioContext();
    analyser = audioContext.createAnalyser();
    biquad = audioContext.createBiquadFilter();
    gainNode = audioContext.createGain();
    canvas = document.getElementById("visualizer");
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "#3f3f3f";


    analyser.smoothingTimeConstant = 0.8;
    biquad.frequency.value = 15000;
    gainNode.gain.value = 1;

    source.connect(biquad);
    biquad.connect(gainNode);
    gainNode.connect(analyser);
    analyser.connect(audioContext.destination);

    $("#frequencyNumber").html(biquad.frequency.value);
    $("#visualizerSensibilityNumber").html(analyser.smoothingTimeConstant);
    $("#gainNumber").html(gainNode.gain.value.toPrecision(3));

    framelooper()
}

function framelooper() {
    window.requestAnimationFrame(framelooper);
    fbcArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbcArray);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i=0; i < bars; i++) {
        bar_x = i * bar_x_spaces + 0.5;
        bar_height = -(fbcArray[i] / bar_height_sensibility);

        if (visualizerStyle == 1){
            //Simple
            ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
            $("#visualizerStyleType").html("Simple");
        }
        else if (visualizerStyle == 2) {
            //Reflection
            ctx.fillRect(bar_x, canvas.height/2, bar_width, bar_height/2);
            ctx.fillRect(bar_x, canvas.height/2, bar_width, -bar_height/2);
            $("#visualizerStyleType").html("Reflection");
        }
        else {
            //Two-faced
            ctx.fillRect(0, bar_x, -bar_height, bar_width);
            ctx.fillRect(canvas.width, bar_x, bar_height, bar_width);
            $("#visualizerStyleType").html("Face to Face");
        }
    }
}


SC.get('/resolve', { url: scurl }, function(sound) {
       SCkickOffSampleDownload( sound.stream_url );
        });

});

SoundCloud和webaudio api一起工作的工作示例。 我從您的驅動器中取出文件。

http://jsfiddle.net/iambnz/e3zxby88/