Question

我有一个键要按，以便创建一个键盘事件，这将是我在文件中链接的声音。声音src是正确的，据我所知，我的JavaScript也是如此。是否有一个我不知道在HTML文件中添加声音的步骤？

我的代码：

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

Answer 1

您应该使用反向刻度`而不是单个'引号进行字符串插值。使用以下选择器：

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

Answer 2

使用document.addEventListener代替window.addEventListener。

我还使用audio[data-key="${e.keyCode}"]

更改了querySelector 'audio[data-key="'+e.keyCode+'"]'

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我可以想象问题出现在这一行：

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

替换字符串中变量的$表示法与`not＆＃39;但这是ES6表示法，关键字const和`。

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

或ES5版本

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

使用JS键盘事件不能播放音频？

3 个答案: