Event Javascript with sound when I press a key

Question

I use datakey to make a sound when I press a touch.

Can you explain why my code doesn't work?

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>day1 javascript</title>    
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="minireset.css">
    </head>

    <body>

        <div class="keys">
            <div class="key" data-key="65"><kbd>A</kbd><span class="sound"><br/>Clap</span></div>
            <div class="key" data-key="90"><kbd>Z</kbd></div>
            <div class="key" data-key="69"><kbd>E</kbd></div>
            <div class="key" data-key="82"><kbd>R</kbd></div>
            <div class="key" data-key="84"><kbd>T</kbd></div>
            <div class="key" data-key="89"><kbd>Y</kbd></div>
            <div class="key" data-key="85"><kbd>U</kbd></div>
            <div class="key" data-key="73"><kbd>I</kbd></div>
            <div class="key" data-key="79"><kbd>O</kbd></div>
            <div class="key" data-key="80"><kbd>P</kbd></div>
        </div>

        <audio data-key="65" src="sound/clap.wav"></audio>

        <script>
            window.addEventListener('keydown', function(e){
                var key=e.keyCode;
                const audio = document.querySelector('audio[data-key=' +key+']');
                if (!audio)  return;

                audio.play();
            });

        </script>
    </body>
</html>

I have this error:

index.html:30 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'audio[data-key=65]' is not a valid selector.

score 4 · Accepted Answer · answered Nov 16 '19 at 17:41

4

You need add extra quotes like this:

document.querySelector('audio[data-key="' +key+'"]')

answered Nov 16 '19 at 17:41

Loppik

328
2
8

thank s a lot for your quick answer it s work and yes i forgot the double quote have a nice week-end – cedric godard Nov 16 '19 at 17:47

score 0 · Answer 2 · answered Nov 16 '19 at 17:48

The result of your query selector is,

document.querySelector('audio[data-key=' + key +']');
// audio[data-key=45]

Here you are missing '' for the value, So you code should be like,

document.querySelector('audio[data-key="' + key +'"]');
// audio[data-key="45"]

score 0 · Answer 3 · answered Nov 16 '19 at 17:55

Try look this two answers

Playing audio with Javascript?

How to register document.onkeypress event

Probably you should have something like this:

var audio11 = new Audio('audio_file.mp3');
var audio12 = new Audio('audio_file.mp3');
var audio13 = new Audio('audio_file.mp3');


document.addEventListener("keydown", keyDownTextField, false);

    function keyDownTextField(e) {
      var keyCode = e.keyCode;
      if(keyCode==12) {audio12.play();}
      if(keyCode==11) {audio13.play();}
      if(keyCode==110) {audio110.play();}       
      else {audio12.play();}
}

Depending on how many auto files i actually use Switch Case

i little help in keycodes: http://gcctech.org/csc/javascript/javascript_keycodes.htm

Event Javascript with sound when I press a key

3 Answers3