keydown을 사용하여 오디오 재생

-1

이 코드를 작동시키지 못했습니다. 일어날 일은, 오디오 파일은 오디오에 해당하는 키를 누를 때마다 재생되어야합니다. 그러나 어떤 이유로 키를 누를 때마다 아무 일도 일어나지 않습니다. 도와주세요?keydown을 사용하여 오디오 재생

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

<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>

그게 내가 그것을 작동하게하기 위해서는하려면 어떻게해야합니까 어떤 경우라면 나의 접근 방식은 완전히 잘못 될 수 있는가?

출처

2017-12-11 Martin Zahariev

확인이 : https://createjs.com/soundjs 도움을 –

귀하의 문제가 쿼리 선택입니다 : 당신은 변수 대체를 사용하려는

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']

출처

2017-12-11 12:28:10 samanime

감사 :) –

답변

관련 문제