javascript - 尝试抽象 WebAudio API xhr 请求的部分时，无法将 DOM 元素传递给 Javascript 中的构造函数

Question

我的问题是这样的。当我向下面的 audioBoing 函数 添加参数，然后将相同的参数放入 getElementById 字符串中时，该函数不起作用。我收到一条错误消息，指出未捕获类型错误，无法调用 null 的方法“AddEventListener”

下面的函数运行良好。我重写了它下面的函数以反射(reflect)我想要做的事情。最终，我试图抽象函数的很大一部分，这样我就可以插入参数并运行它，而不必每次为它存储/启动的每个声音重写它。

var playAudioFileOneDrumOneBig = function () {
var source = context.createBufferSource();
source.buffer = savedBufferOne;
source.connect(delay.input);
delay.connect(convolver.input);
convolver.connect(context.destination);
source.noteOn(0); // Play sound immediately
};




function audioBoing()  
var xhr = new XMLHttpRequest();
xhr.open('get', 'audio/F.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
        context.decodeAudioData(xhr.response,
             function(incomingBuffer1) {
                 savedBufferOne = incomingBuffer1;
                 var noteOneDrumOneBig = document.getElementById("noteOneDrumOneBig"); 
                 noteOneDrumOneBig.addEventListener("click", playAudioFileOneDrumOneBig , false);
             }
        );
};
xhr.send();
};

audioBoing();

重写无效

function audioBoing(yay) {      //added yay

this.yay=yay;                 // defined yay

var xhr = new XMLHttpRequest(); 
xhr.open('get', 'audio/F.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
        context.decodeAudioData(xhr.response,
             function(incomingBuffer1) {                  
                 savedBufferOne = incomingBuffer1;    
                 var noteOneDrumOneBig = document.getElementById(yay);           //passed yay
                 noteOneDrumOneBig.addEventListener("click", playAudioFileOneDrumOneBig , false);   //error happens here
             }
        );
};
xhr.send();
};

audioBoing(noteOneDrumOneBig);

Answer 1

您没有引用传递给 audioBoing 的字符串

audioBoing("noteOneDrumOneBig");