Соедините createAudioBuffer с анализатором несколько раз

Question

Я застрял. Моя проблема в том, что я инициализирую свои mp3-файлы через createAudioBuffer и хочу подключить каждый аудиофайл к моему анализатору. Но только если я установил audioSource [i] .start(); последний трек пройдет через анализатор. Я хочу, чтобы каждый аудиофайл проходил через этот анализатор, если я нажимаю кнопку воспроизведения на теге (или кнопку extern).
Есть ли способ получить эту работу?

Вот мой код:

var canvas, ctx, source, audioCtx, analyser, fbc_array, bars, bar_x, bar_width, bar_height; 
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
var invocation = new XMLHttpRequest(); 

analyser = audioCtx.createAnalyser(); 

function initSound(i, track){ 
    canvas = document.getElementById('analyser_render'); 
    ctx = canvas.getContext('2d'); 
    var  d = document, 
     audio = new Audio(); 

    if (audio.canPlayType) { 
     // Currently canPlayType(type) returns: "", "maybe" or "probably" 
     var canPlayMp3 = !!audio.canPlayType && "" != audio.canPlayType('audio/mpeg'); 
    } 

    trackSource = track.uri + '/stream?client_id=62fa6c34df7382c8dc444a18f4ff72b4'; 
    audio.src = trackSource; 
    audio.controls = true; 
    audio.loop = false; 
    audio.autoplay = false; 
    audio.preload = "none"; 
    audio.setAttribute('data-tracknumber', i+1); 

    $('<div class="audioWrapper"><div class="url"></div><img class="img" /><div class="controls"><button class="play-pause"></button></div></div>').appendTo('#audio_box').append(audio); 

    analyser.connect(audioCtx.destination); 

    fetchAudioAsset(trackSource, audioCtx, function(buffer) { 
     audioSource = []; 
     audioSource[i] = audioCtx.createBufferSource(); 
     audioSource[i].buffer = buffer; 
     audioSource[i].connect(audioCtx.destination); 
     audioSource[i].connect(analyser); 
    }); 

    function fetchAudioAsset (path, audioCtx, callback) { 
     invocation.open('GET', path, true); 
     invocation.responseType = 'arraybuffer'; 
     invocation.onload = function() { 
      if (invocation.readyState != 4) return; 
      audioCtx.decodeAudioData(invocation.response, function(buffer) { 
       callback && callback(buffer); 
      }); 
     }.bind(this); 
     invocation.onprogress = function(ev) { 
      $('.loaded').width(((ev.loaded/ev.total) * 100) + '%'); 
     }; 

     fetchAudioAsset.request && fetchAudioAsset.request.abort(); 
     fetchAudioAsset.request = invocation; 
     invocation.send(); 
    }; 

    soundVisualizer(); 
} 
     function soundVisualizer() { 
      window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 


      requestAnimationFrame(soundVisualizer); 
      fbc_array = new Uint8Array(analyser.frequencyBinCount); 
      analyser.getByteFrequencyData(fbc_array); 
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas 
      ctx.fillStyle = '#00CCFF'; // Color of the bars 
      bars = 100; 
      for (var i = 0; i < bars; i++) { 
       bar_x = i * 3; 
       bar_width = 2; 
       bar_height = -(fbc_array[i]/2); 
      //fillRect(x, y, width, height) // Explanation of the parameters below 
      ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
     } 
    } 

Answer 1

Это, кажется, вопрос, где значение i не то, что вы думаете, когда вы начинаете() узел. Это не проблема веб-аудио API, это проблема с JavaScript.

Вам необходимо передать его через параметр, чтобы вы фактически не получали доступ к глобальному значению.