使用按鍵播放聲音的js

Question

目前我有：

is1Pressed = false, 
is2Pressed = false, 
is3Pressed = false, 
is4Pressed = false, 
is5Pressed = false, 
is6Pressed = false, 
p = document.getElementById('p'); 

function loop() { 
    if(is1Pressed == true){ 
    console.log("1"); 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 
    else if(is2Pressed == true) { 
    console.log=("2"); 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 
    else if(is3Pressed == true) { 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 
    else if(is4Pressed == true) { 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 
    else if(is5Pressed == true) { 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 
    else 
    { 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 

} 

document.addEventListener('keydown', function (e) { 
    switch (e.keyCode) { 
    // 1 
    case 49: 
    is1Pressed = true; 
    break; 
    // 2 
    case 50: 
    is2Pressed = true; 
    break; 
    // 3 
    case 51: 
    is3Pressed = true; 
    break; 
    // 4 
    case 52: 
    is4Pressed = true; 
    break; 
    // 5 
    case 53: 
    is5Pressed = true; 
    break; 
    //6  
    case 54: 
    is6Pressed = true; 
    break; 
    } 
}, false); 

document.addEventListener('keyup', function (e) { 
    switch (e.keyCode) { 
    // 1 
    case 49: 
    is1Pressed = false; 
    break; 
    // 2 
    case 50: 
    is2Pressed = false; 
    break; 
    // 3 
    case 51: 
    is3Pressed = false; 
    break; 
    // 4 
    case 52: 
    is4Pressed = false; 
    break; 
    // 5 
    case 53: 
    is5Pressed = false; 
    break; 
    //6  
    case 54: 
    is6Pressed = false; 
    break; 

    } 
}, false); 

var framesPerSecond = 60, 
    intervalId = setInterval(loop, framesPerSecond/1000); 

但是，當我按下1個鍵播放樣本聲音的的console.log「1」上運行的聲音從來沒有初始化。我究竟做錯了什麼？此外，當頁面處於非活動狀態時，聲音循環。

Answer 1

對不起，我不知道什麼是錯的，但我也注意到所有的不同的if/else情況下嘗試播放相同的聲音，並最終別的情況下會留下一個聲音播放，即使沒有按鍵（或者如果這些聲音對你來說都適合你）。

您loop()功能的當前結構意味着（如果它的工作）只有一個聲音會同時出場，那你爲什麼跟蹤與KEYUP和處理的keydown同時按下哪些密鑰？你很可能只是用KEYUP停止所有的聲音，然後在開始的keydown與剛按下任何按鍵而來的聲音 - 我假設你的意圖是聲音只保留只要鍵被按下去。

所以：

var currentKey = 0, 
    p = document.getElementById('p'); 

document.addEventListener('keydown', function (e) { 
    var key = e.keyCode-48; 

    if (currentKey != key) 
    p.innerHTML = "<audio autoplay='autoplay' src='button" + key + ".wav'/>"; 

    currentKey = key; 
}, false); 

document.addEventListener('keyup', function (e) { 
    p.innerHTML = ""; 
    currentKey = 0; 
}, false); 

無論如何，如果你想嘗試一定程度上受到擺脫所有單獨的鑰匙標誌，並在switch語句的堅持或多或少與當前的機制，你可以整理你的代碼keyup/down處理程序和使用單個對象來維護所有密鑰的狀態：

var keyState = {}, 
    p = document.getElementById('p'); 

document.addEventListener('keydown', function (e) { 
    keyState[e.keyCode-48] = true; 
}, false); 

document.addEventListener('keyup', function (e) { 
    keyState[e.keyCode-48] = false; 
}, false); 

function loop() { 
    if(keyState["1"]){ 
    console.log("1"); 
    p.innerHTML = "<audio autoplay='autoplay' src='button1.wav'/>"; 
    } 
    else if(keyState["2"]) { 
    console.log=("2"); 
    p.innerHTML = "<audio autoplay='autoplay' src='button2.wav'/>"; 
    } 
    else if(keyState["3"]) { 
    p.innerHTML = "<audio autoplay='autoplay' src='button3.wav'/>"; 
    } 
    else if(keyState["4"]) { 
    p.innerHTML = "<audio autoplay='autoplay' src='button4.wav'/>"; 
    } 
    else if(keyState["5"]) { 
    p.innerHTML = "<audio autoplay='autoplay' src='button5.wav'/>"; 
    } 
    else if(keyState["6"]) { 
    { 
    p.innerHTML = "<audio autoplay='autoplay' src='button6.wav'/>"; 
    } 
    else { 
    p.innerHTML = ""; 
    }  
} 

var framesPerSecond = 60, 
    intervalId = setInterval(loop, framesPerSecond/1000);