javascript - xmlhttprequest と Web Audio API の範囲の問題?

Question

私は JS を初めて使用し、Web Audio API を使用して一種のサウンド ミキサーを実装しようと試行錯誤してきました。私はJSのスコープと「クラス」を実装するさまざまな方法について少し読んでいますが、明らかにまだよく理解していません。soundClassオブジェクトの配列を含めたいこのオブジェクトがあり、デコードされたらすぐに新しいオブジェクトtrackを作成したいと考えています。ただし、以下に示すように、またはそれぞれを実行すると、最初のログ ( ) には正しいトラック名が表示されますが、オブジェクト自体をログに記録しようとすると、最後に追加されたトラックが常に表示されます。pushtracktracklistconsole.logtracklisttrackconsole.log('track name '+ that.track.name);that.tracksoundClass.newTrack('track1.mp3')soundClass.newTrack('track2.mp3')console.log(soundClass.tracklist)2 つの track2.mp3 オブジェクトを含む配列を取得します。スコープの問題か、非同期デコードの問題だと思いますが、実際にはわからないので、単なる愚かな間違いかもしれません。

初歩的な質問で申し訳ありませんが、よろしくお願いします。

var soundClass = {

audioContext: new webkitAudioContext,
currentTime: 0,
track: {
    name: 0,
    trackSource: null,
    trackBuffer:null,
    isLoaded: false,
},
tracklist: [],
newTrack: function(filename){
    var that=this;      
    var request =new XMLHttpRequest();
    request.open("GET",filename,true);
    request.responseType="arraybuffer";
    request.onload=function(){
            that.audioContext.decodeAudioData(request.response,function(buffer){

                that.track.trackBuffer=buffer;
                that.track.name=filename;
                that.track.isLoaded=true;
                that.track.trackSource=that.audioContext.createBufferSource();

                console.log('track name '+ that.track.name);
                console.log(that.track);

                that.tracklist.push(that.track);

                });

    }
    request.send();
},