javascript - 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");
        }
    }
}

website with the issue (double click on the song title to make the input box appear, enter a soundcloud link inside)

编辑:我发现问题是由于音频文件的跨域更改而引起的，我还看到很多人说添加“crossOrigin =匿名”可以解决此问题，但这对我来说不是。

会仅对某些音乐执行此操作，还是不再可能解决此问题？

(如果稍后)，还有其他解决方法吗？

Answer 1

仅仅设置crossOrigin是不够的。服务器还必须通过返回适当的 header 来允许跨域访问。这可能不在您的控制范围内。