如何在按住键盘按钮时只播放一次声音?

时间:2015-05-01 12:10:45

标签: javascript jquery html5 audio

最近我使用JavaScript创建了一个简单的代码。基本上,它是一个播放声音节目的媒体。声音长达3-4秒。一切正常,直到我发现如果我按住一个键,声音会反复播放。他们没有完成他们的长度,但在开始时继续重新开始。我想要的只是它播放到最后并停止,并且如果按键启动并再按一次将再次播放。

这是我的代码:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
</head>

<body>
    <audio id="fart" source src="" type="audio/mpeg"></audio>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
        var player = document.getElementById("fart");
        //var keyIsDown = true;

        var getCommand = function (pressedChar) {
            var command = null;
            if (keyIsDown) {
                switch (pressedChar) {
                    case 'a':
                        //alert("I'm A.");
                        player.setAttribute("src", "1fart-07 C7.mp3");
                        player.play();
                        //keyIsDown = false;
                        break;
                    case 'b':
                        player.setAttribute("src", "2fart-05 D7.mp3");
                        player.play();
                        break;
                    case 'c':
                        player.setAttribute("src", "3fart-01 E7.mp3");
                        player.play();
                        break;
                    case 'd':
                        player.setAttribute("src", "4fart-03 F7.mp3");
                        player.play();
                        break;
                    case 'e':
                        player.setAttribute("src", "5fart Na G7.mp3");
                        player.play();
                        break;
                    case 'f':
                        player.setAttribute("src", "6fart Na A7.mp3");
                        player.play();
                        break;
                    case 'g':
                        player.setAttribute("src", "7fart Na B7.mp3");
                        player.play();
                        break;
                    case 'h':
                        player.setAttribute("src", "fart-07 C8.mp3");
                        player.play();
                        break;
                    default:
                        alert("OUT");
                        break;
                }
                return command;
            } else {
                command = null;
            }
        };
        /////
        /*$(document).keyup(function(e){
         keyIsDown = true;
         });*/

        //////
        $(document).keypress(function (e) {
            var code = e.keyCode || e.which;
            var pressedChar = String.fromCharCode(code).toLowerCase();
            var command = getCommand(pressedChar);
            keyIsDown = true;
        });

        $(document).ready(function () {
            console.log("ready!");
        });
        ///////
    </script>
    </body>
</html>

我用Google搜索并找到this forum所以我试图让它适应我的,但仍然没有成功。有人有什么建议吗?我也在Jquery中找到了一种方法,但没有用。我觉得现在我已经接近了答案,但可能是我编写了错误的代码。请帮我。感谢。

2 个答案:

答案 0 :(得分:1)

答案就在这里...... 1)为你使用的每个键创建一个变量并设置为true,如var q = true;在开始。 2)通过使用keyDown函数的相同变量,创建一个函数来检测键盘按钮是否已启动。然后,将您在(1)中设置的变量设置为true。

$(document).keyup(function (e) {
    console.log("One of the keys is up");
    var code = e.keyCode || e.which;
    var pressedChar = String.fromCharCode(code).toLowerCase();
    switch (pressedChar) {
        case'q':
            q = true;
            break;
        default:
            console.log("Nothing");
    }
});
<3>在播放音乐的主要功能中,在开关盒内部给出if-else功能,以检测按键是否仍在按下。 play()之后;将变量设置为false;

case 'q':
    if (q) {
        //alert("I'm A.");
        player.setAttribute("src", "1fart-07 C7.mp3");
        player.play();
        q = false;
    } else {
        command = null;
        console.log("q is holded"); // if the keyboard is pressed before it will be here. 
    }
    break;

答案 1 :(得分:0)

将每个player.play();替换为player.stop().play();