javascript - 如何在[javascript或jquery]字段中显示播放声音的名称(在按键上)？

Question

我正在尝试解决此问题，但目前尚无法解决。所以我想在按键上触发声音，然后在字段中显示声音的名称。它必须显示QQ的ID作为其名称。我有两个代码，一个根本不起作用，一个可以让我在按键时听到声音，但没有显示声音的名称(我不知道该怎么实现)。到目前为止，我的代码是:

不适用于jQuery的解决方案:

$(".drum-pad").on('keydown', function (e) {
    if(e.keyCode === 81){
        $(e.target).children('audio.clip')[0].play();
        $("#track").text(e.target.id);
    }
});

使用纯JavaScript的半成品解决方案:

document.addEventListener('keydown', function(e) {
    if (e.keyCode == 81) {
        document.getElementById('Q').play();
    }
});

的HTML

<div id="drum-machine">
    <div id="display">
        <p id="track"></p>
    </div>
    <div id="QQ" class="drum-pad">
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
        Q
    </div>
</div>

Answer 1

keydown上的document可在jQuery中使用，因此以下代码应可用。 Javascript Key Codes

$(document).on('keydown', function (e) {
    if(e.keyCode === 81){
        $('#Q').get(0).play();

        var text = $("#Q").closest('div').attr('id');
        $("#track").text(text);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="drum-machine">
    <div id="display">
        <p id="track"></p>
    </div>
    <div id="QQ" class="drum-pad">
        <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
        Q
    </div>
</div>