xmlhttprequest和Web Audio API的作用域问题

Scope issue with xmlhttprequest and Web Audio API?

本文关键字：作用域 问题 API Audio Web xmlhttprequest      更新时间：2023-09-26

我是JS的新手，我一直在尝试用Web Audio API实现一种混音器。我一直在阅读一些关于JS的作用域和实现"类"的不同方法，但显然我还没有完全理解它。我有这个soundClass对象，我想让它包含一个track对象的数组，我想在tracklist上push一个新的track，一旦它被解码。然而，当我console.log tracklist或每个track时，第一个日志(console.log('track name '+ that.track.name);)显示正确的曲目名称，但如果我尝试记录that.track对象本身，它总是显示添加的最后一个曲目，所以如果我调用soundClass.newTrack('track1.mp3')和soundClass.newTrack('track2.mp3')和console.log(soundClass.tracklist)，我得到一个包含两个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();
},

您只有一个对象soundclass.track。在request.onload函数中，您可以一次又一次地修改同一个对象。所以你的tracklist包含相同的对象两次。你能做的是

var track = {};
track.trackBuffer=buffer;
...
that.tracklist.push(track);

并删除soundclass.track.

相关文章：