Audio spielt nicht auf Keyboard Event mit JS?

Ich habe eine Taste (n), die ich drücken möchte, um ein Tastaturereignis zu erstellen, das ein Sound wäre, den ich in meiner Datei verknüpft habe. Der Sound src ist korrekt, und von dem, was ich weiß, ist auch mein JavaScript. Gibt es einen Schritt, den ich nicht kenne, um Sound in einer HTML-Datei hinzuzufügen?Audio spielt nicht auf Keyboard Event mit JS?

Mein Code:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!-- Required meta tags --> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <!-- Bootstrap CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
     <link rel="stylesheet" href="style.css" type="text/css"> 
    </head> 
    <body> 

     <div class="container"> 
      <div class="row"> 

       <div class="col-12"> 
        <div data-key="83" class="key"> 
         <kbd>s</kbd> 
         <span class="sound">clap</span> 
        </div> 
       </div> 

      </div> 
     </div> 

     <audio data-key="83" src="jap/big_taiko.wav"></audio> 



     <script> 
      window.addEventListener('keydown', function(e) { 
       const audio = document.querySelector('audio[data-key="${e.keyCode}"]'); 
       if (!audio) return; 
       audio.play(); 
      }); 
     </script> 
    </body> 
</html>

Quelle

2017-01-31 YoungCoder

sollten Sie invertiert werden unter Verwendung von Zecken ` statt einzelner ' Anführungszeichen für String-Interpolation. Verwenden Sie den folgenden Selektor:

`audio[data-key="${e.keyCode}"]`

Quelle

2017-01-31 23:02:15 inker

Danke dies der Trick. Darf ich fragen, warum das so ist? Ich wusste nichts von invertierten Ticks in JavaScript. – YoungCoder

@YoungCoder, einfache Anführungszeichen ''' oder doppelte Anführungszeichen '" 'bewerten Sie Ihre Variablen nicht und behandeln Sie sie als Teil der Zeichenfolge. Back-Ticks wurden jedoch eingeführt, um das Problem mit dem durch Komplex verursachten Chaos zu lösen String-Verkettung Vergleich: ''start' + a + 'Mitte' + b + 'endstring'' gegen' 'id $ {a} Mitte $ {b} endstring''. Sie können mehr [hier ] (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals) – inker

Super, vielen Dank! – YoungCoder

ich, dass das Problem in dieser Linie vorstellen konnte:

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

Die Notation $ Variablen zu ersetzen in einem String arbeitet mit `nicht ', aber das ist ES6 Notation, sowohl das Schlüsselwort const als auch das `.

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

oder die ES5 Version

var audio = document.querySelector('audio[data-key="' + e.keyCode +'"]');

Quelle

2017-01-31 23:04:22

Verwenden document.addEventListener statt window.addEventListener.

auch geändert i querySelector audio[data-key="${e.keyCode}"] mit 'audio[data-key="'+e.keyCode+'"]'

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

<audio data-key="83" src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"></audio>

Quelle

2017-01-31 23:04:28

Audio spielt nicht auf Keyboard Event mit JS?

Antwort

Verwandte Themen