Как указывает @ CodeF0x, вам нужно использовать строку шаблона ES6.Следовательно, вам нужно использовать обратные кавычки или обратные кавычки ` вместо одинарных кавычек ', которые можно найти по ключу ниже esc key
Однако строка не будетПравильно интерполируйте в аргументах вызова функции в вашем случае функцию querySelector().
Следовательно, сохраните вывод строки шаблона в переменной и передайте эту переменную в вызове функции, и это решит вашу проблему.
Просто используйте как это
<html>
<head>
<title>Drumkit</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<audio data-key="65" src="audio/clap.wav"></audio>
<audio data-key="83" src="audio/hihat.wav"></audio>
<audio data-key="68" src="audio/kick.wav"></audio>
<audio data-key="70" src="audio/openhat.wav"></audio>
<audio data-key="71" src="audio/boom.wav"></audio>
<audio data-key="72" src="audio/ride.wav"></audio>
<audio data-key="74" src="audio/snare.wav"></audio>
<audio data-key="75" src="audio/tom.wav"></audio>
<audio data-key="76" src="audio/tink.wav"></audio>
<script>
window.addEventListener('keydown',function(e){
var selector = `audio[data-key="${e.keyCode}"]`;
const audio = document.querySelector(selector);
console.log(audio);
});
</script>
</body>
</html>
Вывод: Как вы хотели
Пожалуйста, обратитесь Получение буквально с помощью строк шаблона ES6 для получения дополнительной помощи