javascript - WebAudio API xhrリクエストのセクションを抽象化しようとすると、JavaScriptのコンストラクター関数にDOM要素を渡すことができません

Question

私の問題はこれです。以下のaudioBoing関数に引数を追加してから、同じ引数をgetElementById文字列に配置すると、関数が機能しません。キャッチされていないタイプのエラー、nullのメソッド'AddEventListener'を呼び出せないというエラーが表示されます

以下の機能は正常に動作します。その下の関数を書き直して、自分がやろうとしていることを反映させました。最終的には、関数のかなりの部分を抽象化しようとしているので、引数をプラグインして実行するだけで、保存/起動するサウンドごとに毎回書き直す必要はありません。

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");