Question

所以我无法使这段代码工作。应该发生的是，每当我按下与音频对应的键时，都应该播放音频文件。但出于某种原因，每当我按下按键时，都没有任何反应。请帮帮忙？

＆＃13;

window.addEventListener("keydown", function (ev)
{
    const audio = document.querySelector("audio[data-key='${ev.keyCode}']");
    if (!audio) return;
    audio.play();
});

＆＃13;

<body>
<div class="container">
    <div data-key="65" class="key">
        <kbd>A</kbd>
        <span>CLAP</span>
    </div
    ><div data-key="83" class="key">
    <kbd>S</kbd>
    <span>HIHAT</span>
</div
><div data-key="68" class="key">
    <kbd>D</kbd>
    <span>KICK</span>
</div
><div data-key="70" class="key">
    <kbd>F</kbd>
    <span>OPENHAT</span>
</div
><div data-key="71" class="key">
    <kbd>G</kbd>
    <span>BOOM</span>
</div
><div data-key="72" class="key">
    <kbd>H</kbd>
    <span>RIDE</span>
</div
><div data-key="74" class="key">
    <kbd>J</kbd>
    <span>SNARE</span>
</div
><div data-key="75" class="key">
    <kbd>K</kbd>
    <span>TOM</span>
</div
><div data-key="76" class="key">
    <kbd>L</kbd>
    <span>TINK</span>
</div>
    <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>
</div>

<!-- Main Script -->
<script src="js/script.js"></script>
</body>

＆＃13;

我的方法可能完全错误，如果是这样的话，我需要做些什么才能使其发挥作用？

Answer 1

您的问题是您的查询选择器：

const audio = document.querySelector("audio[data-key='${ev.keyCode}']")

您尝试使用变量替换，但只有在使用反引号（``）而不是双引号（""）时才有效。在双引号中，它只被视为普通文本（即等于audio[data-key='${ev.keyCode}']）。

切换到反引号，它应该没问题：

const audio = document.querySelector(`audio[data-key='${ev.keyCode}']`)

这将解析为：audio[data-key='65']

使用keydown播放音频

1 个答案: