Javascript 使用按键播放声音

目前我有：

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

is1Pressed=false，
is2Pressed=false，
is3Pressed=false，
is4Pressed=false，
is5Pressed=false，
is6Pressed=false，
p=document.getElementById（'p'）；
函数循环（）{
如果（is1Pressed==true）{
控制台日志（“1”）；
p、 innerHTML=“”；
}
else if（is2Pressed==true）{
console.log=（“2”）；
p、 innerHTML=“”；
}
else if（is3Pressed==true）{
p、 innerHTML=“”；
}
else if（is4Pressed==true）{
p、 innerHTML=“”；
}
else if（is5Pressed==true）{
p、 innerHTML=“”；
}
其他的
{
p、 innerHTML=“”；
}
}
文档.添加的事件列表器（'keydown'，函数（e）{
开关（如钥匙代码）{
// 1
案例49：
is1Pressed=true；
打破
// 2
案例50：
is2Pressed=true；
打破
// 3 
案例51：
is3Pressed=true；
打破
// 4
案例52：
is4Pressed=true；
打破
// 5
案例53：
is5Pressed=true；
打破
//6      
案例54：
is6Pressed=true；
打破
}
}，假）；
文件。添加的文件列表器（“键控”，功能（e）{
开关（如钥匙代码）{
// 1
案例49：
is1Pressed=false；
打破
// 2
案例50：
is2Pressed=false；
打破
// 3 
案例51：
is3Pressed=false；
打破
// 4
案例52：
is4Pressed=false；
打破
// 5
案例53：
is5Pressed=false；
打破
//6      
案例54：
is6Pressed=false；
打破
}
}，假）；
var framesPerSecond=60，
intervalId=setInterval（循环，帧秒/1000）；

---

但是，当我按1键播放示例声音时，“1”的console.log将运行，并且声音从未初始化。我做错了什么？当页面处于非活动状态时，声音也会循环

对不起，我不知道是什么问题，尽管我注意到所有不同的if/else案例都试图播放相同的声音，而最后一个else案例将在没有按键的情况下播放声音（或者如果这些声音对您有效的话）

loop（）

函数的当前结构意味着（如果它起作用的话）一次只能播放一个声音，那么为什么要跟踪使用keyup和keydown处理程序同时按下的键？您可能只需要使用keyup停止所有声音，然后在keydown中启动与刚才按下的任何键相关的声音-我假设您的意图是，只要按住键，声音就会继续

因此：

var currentKey=0，
p=document.getElementById（'p'）；
文档.添加的事件列表器（'keydown'，函数（e）{
var键=e.keyCode-48；
如果（当前键！=键）
p、 innerHTML=“”；
currentKey=key；
}，假）；
文件。添加的文件列表器（“键控”，功能（e）{
p、 innerHTML=“”；
currentKey=0；
}，假）；

无论如何，如果您想或多或少地坚持当前的机制，您可以通过去掉keyup/down处理程序中所有单独的键标志和switch语句，并使用单个对象来维护所有键的状态，从而稍微整理代码：

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

var keyState={}，
p=document.getElementById（'p'）；
文档.添加的事件列表器（'keydown'，函数（e）{
keyState[e.keyCode-48]=真；
}，假）；
文件。添加的文件列表器（“键控”，功能（e）{
keyState[e.keyCode-48]=假；
}，假）；
函数循环（）{
如果（键状态[“1”]）{
控制台日志（“1”）；
p、 innerHTML=“”；
}
else if（键状态[“2”]）{
console.log=（“2”）；
p、 innerHTML=“”；
}
else if（键状态[“3”]）{
p、 innerHTML=“”；
}
else if（键状态[“4”]）{
p、 innerHTML=“”；
}
否则如果（键状态[“5”]）{
p、 innerHTML=“”；
}
else if（键状态[“6”]）{
{
p、 innerHTML=“”；
}
否则{
p、 innerHTML=“”；
}    
}
var framesPerSecond=60，
intervalId=setInterval（循环，帧秒/1000）；

浏览器控制台中是否显示任何错误？是否确实存在ID为“p”的元素？另外-请记住…没有显示错误，是的，有ID为“p”的段落你在使用HTML5 doctype吗？一个支持

元素的浏览器？哪个浏览器？当我按住音频标签时，它会闪烁…我想发生的事情是检查它是否（is1Pressed==true）{if（p.innerHTML！=one）{p.innerHTML=one；}不断地生成和删除元素只是为了让你知道，你的每秒帧数逻辑是错误的。假设我想以2fps的速度做一些事情。我每500ms做一次。这是1000ms/2。所以60fps是1000ms/60，而不是60/1000ms。

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