2017-12-11 7 views
-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>

それは私がそれを動作させるためにに何をする必要がありますどのような場合かどう私のアプローチは、完全に間違っているかもしれませんか?

+0

このチェック:https://createjs.com/soundjs助けを –

答えて

0

あなたの問題は、クエリのセレクタです:

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

+0

おかげで: ) –

関連する問題