![](/img/trans.png)
[英]How do I write a JavaScript function where a sound plays whenever any key is pressed but stop playing when the key is released
[英]how do i stop a sound when a key is released in JavaScript
我正在为我和我的朋友(我知道有点笨)编写一架全空气喇叭钢琴,我必须做所有的琴键绑定,然后我遇到了这个问题,当我松开被按下的琴键时声音不会停止激活它。
这是我到目前为止在.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(); } };
您正在创建一个具有相同声音的新实例并将其暂停,而原始实例会继续播放。
而是,两个函数都需要引用相同的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
// ...
要解决您的代码,只需将声音声明移到函数之外...但是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();
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.