如何在JavaScript中释放密钥时停止声音

时间:2015-12-05 04:12:32

标签: javascript html5

我正在为我和我的朋友(我知道的那种愚蠢)编写一个完整的空气喇叭钢琴,我必须做所有关键的绑定,然后我遇到了这个问题,当我释放键时,声音不会停止按下来激活它。

这是我到目前为止在.js文件中的内容(到目前为止只发出一个声音):



function startAnatural(){

var A = new Audio("A natural.mp3"); 
A.play();

}

function stopAnatural(){
var A = new Audio("A natural.mp3");

A.pause();
A.currentTime = 0;;

}

document.onkeydown = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===81){
        startAnatural();
    }
};

document.onkeyup = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===81){
        stopAnatural();
    }

};




2 个答案:

答案 0 :(得分:1)

您正在创建相同声音的新实例并将其暂停,而原始实例会继续播放。

相反,两个函数都需要引用同一个Audio对象。

也许这样的设计对你来说会更好。

function createSound(file) {
  var sound = new Audio(file);

  return {
    start: function() {
      sound.play();
    },
    stop: function() {
      sound.pause();
      sound.currentTime = 0;
    }
  };
}

此函数采用您要加载的声音的名称,然后返回另外两个启动和停止它的功能。这两个函数将始终引用相同的Audio实例。

var aNatural = createSound('A natural.mp3');

document.onkeydown = function() {
  // ...
  aNatural.start();
  // ...
}

document.onkeyup = function() {
  // ...
  aNatural.stop();
  // ...
}

如果您想整理所有声音,则需要将声音存储在相应的键码中。

var notes = [
  { key: 81, sound: createSound('A natural.mp3') },
  { key: 82, sound: createSound('B natural.mp3') },
  { key: 83, sound: createSound('C natural.mp3') }
  // ...
];

然后,您可以创建事件侦听器,使用适当的键代码触发每个声音。

document.onkeydown = function() {
  var pressedKey = e.which;

  notes.forEach(function(note) {
    if(note.key === pressedKey) {
      note.sound.start();
    }
  });
}

// do the same for keyup
// ...

答案 1 :(得分:0)

要解决您的代码,只需将声音声明移到函数外...但Dan对于同时播放的多个实例是正确的。

var A = new Audio("A natural.mp3"); 

function startAnatural(){
    A.play();
}

function stopAnatural(){
  A.pause();
  A.currentTime = 0;
}

document.onkeydown = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===81){
        startAnatural();
    }
};

document.onkeyup = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===81){
        stopAnatural();
    }

};