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)

编辑：我发现问题是由于音频文件的交叉来源发生了变化，我也看到很多人都说添加＆＃34; crossOrigin =匿名＆＃ 34;修复它，但它对我来说没有。

它只对某些音乐执行此操作，还是不再可能修复？

如果是晚些时候，是否有其他修复方法？

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/

soundcloud api和web audio api不能一起工作

2 个答案: