嘗試抽象WebAudio API xhr請求的部分時，無法將DOM元素傳遞給Java腳本中的構造函數 [英] Can't pass a DOM element to a constructor function in Javascript when trying to abstract section of WebAudio API xhr request

問題描述

我的問題是。當我向下面的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);

推薦答案

您沒有將傳遞給audioBoing的字符串引起來

audioBoing("noteOneDrumOneBig");

這篇關于嘗試抽象WebAudio API xhr請求的部分時，無法將DOM元素傳遞給Java腳本中的構造函數的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！