Wiedergabe von Audio mit Keydown

-1

Also ich bin nicht in der Lage, diesen Code arbeiten zu lassen. Was passiert, ist, dass eine Audiodatei abgespielt werden soll, wenn ich eine Taste drücke, die dem Audio entspricht. Aber aus irgendeinem Grund passiert nichts, wenn ich die Taste drücke. Bitte helfen Sie?Wiedergabe von Audio mit 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>

Mein Ansatz könnte völlig falsch sein, wenn das der Fall ist, was ich es tun, um Sie müssen dafür arbeiten?

Quelle

2017-12-11 Martin Zahariev

prüfen dies: https://createjs.com/soundjs –

Ihr Problem ist, Ihre Abfrage Selektor:

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

Sie versuchen, die Variablensubstitution zu verwenden, aber das funktioniert nur, wenn Backticks (``), nicht doppelte Anführungszeichen (""). In doppelten Anführungszeichen wird es nur als normaler Text behandelt (d. H. Es entspricht audio[data-key='${ev.keyCode}']).

Switch to Backticks und es sollte gut sein: audio[data-key='65']

Quelle

2017-12-11 12:28:10 samanime

Dank für die Hilfe

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

Dies um so etwas wie lösen wird:) –

Wiedergabe von Audio mit Keydown

Antwort

Verwandte Themen