当我按下一个键时，事件 Javascript 有声音
[英]Event Javascript with sound when I press a key
问题描述
I use datakey to make a sound when I press a touch.
当我按下触摸时，我使用 datakey 发出声音。
Can you explain why my code doesn't work?你能解释为什么我的代码不起作用吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>day1 javascript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="minireset.css">
</head>
<body>
<div class="keys">
<div class="key" data-key="65"><kbd>A</kbd><span class="sound"><br/>Clap</span></div>
<div class="key" data-key="90"><kbd>Z</kbd></div>
<div class="key" data-key="69"><kbd>E</kbd></div>
<div class="key" data-key="82"><kbd>R</kbd></div>
<div class="key" data-key="84"><kbd>T</kbd></div>
<div class="key" data-key="89"><kbd>Y</kbd></div>
<div class="key" data-key="85"><kbd>U</kbd></div>
<div class="key" data-key="73"><kbd>I</kbd></div>
<div class="key" data-key="79"><kbd>O</kbd></div>
<div class="key" data-key="80"><kbd>P</kbd></div>
</div>
<audio data-key="65" src="sound/clap.wav"></audio>
<script>
window.addEventListener('keydown', function(e){
var key=e.keyCode;
const audio = document.querySelector('audio[data-key=' +key+']');
if (!audio) return;
audio.play();
});
</script>
</body>
</html>
I have this error:我有这个错误：
index.html:30 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'audio[data-key=65]' is not a valid selector.
3 个解决方案
解决方案1
4 已采纳 2019-11-16 17:41:49
You need add extra quotes like this:您需要像这样添加额外的引号：
document.querySelector('audio[data-key="' +key+'"]')
解决方案2
0 2019-11-16 17:48:01
The result of your query selector is,您的查询选择器的结果是，
document.querySelector('audio[data-key=' + key +']');
// audio[data-key=45]
Here you are missing '' for the value, So you code should be like,这里你缺少''的值，所以你的代码应该是这样的，
document.querySelector('audio[data-key="' + key +'"]');
// audio[data-key="45"]
解决方案3
0 2019-11-16 17:55:02
Try look this two answers试试看这两个答案
Playing audio with Javascript? 用 Javascript 播放音频？
How to register document.onkeypress event 如何注册 document.onkeypress 事件
Probably you should have something like this:可能你应该有这样的东西：
var audio11 = new Audio('audio_file.mp3');
var audio12 = new Audio('audio_file.mp3');
var audio13 = new Audio('audio_file.mp3');
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
var keyCode = e.keyCode;
if(keyCode==12) {audio12.play();}
if(keyCode==11) {audio13.play();}
if(keyCode==110) {audio110.play();}
else {audio12.play();}
}
Depending on how many auto files i actually use Switch Case取决于我实际使用Switch Case的自动文件数量
i little help in keycodes: http://gcctech.org/csc/javascript/javascript_keycodes.htm我对键码帮助不大： http://gcctech.org/csc/javascript/javascript_keycodes.htm
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.