javascript - 如何在按住键盘按钮的情况下只播放一次声音？-6ren

javascript - 如何在按住键盘按钮的情况下只播放一次声音？

转载作者：行者123 更新时间：2023-12-03 10:13:48

25

4

最近我使用 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>

我用谷歌搜索发现this forum所以我尝试让它适应我的，但仍然没有成功。有人有什么建议吗？我也在Jquery找到了方法，但没有用。我觉得现在我已经接近答案了，但可能是我编码错误。请帮我。谢谢。

最佳答案

答案在这里...1)为您使用的每个 key 创建一个变量并将其设置为 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 函数来检测按键是否仍在按下。播放后()；将变量设置为 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;

关于javascript - 如何在按住键盘按钮的情况下只播放一次声音？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29986611/

25

4

0

文章推荐： javascript - 带条件语句的 Highslide HTML 扩展方法

文章推荐： JavaScript 执行错误的函数

文章推荐： javascript - 重定向到 .scala.html 文件(Scala Play)仅显示纯文本

文章推荐： javascript - Indigojs Bootstrap 微调器中的浮点值

android - 播放->停止->播放->停止触摸音频
我做了一个项目，使用两个不同的textview进行触摸来播放两个音频。这是一个文本 View 的简单代码 tv.setOnTouchListener(new OnTouchListener() {
python - mp3 音频从交互式 python 播放，但不是从 bash 播放
我正在使用 pygame 模块在 python 中操作声音文件。它在交互式 python session 中工作正常，但相同的代码在 bash 中不会产生任何结果: 交互式Python $ sudo
JavaScript 页面旋转并暂停/播放
请注意它只能是 JavaScript。请参阅下面我当前的 HTML。我需要像当前代码一样在页面之间旋转。但是，我需要能够在页面之间暂停/播放。
javascript - 播放/暂停所有音频链接的常规功能
我有一个带有一堆音频链接的html。我正在尝试使所有音频链接都在单击时播放/暂停，并且尝试了here解决方案。这正是我所追求的，只是我现在不得不修改此功能以应用于代码中的所有音频链接(因为我不能为每个
python - 播放.wav文件x秒
在尝试进入我的代码中的下一个文件之前，我尝试随机播放.wav文件数毫秒。最好的方法是什么？我目前有以下代码: #!/usr/bin/env python from random import ran
matlab - 播放/停止按钮
我有2个回调函数，一个播放音频，另一个停止音频。 function Play_Callback(hObject, eventdata, handles) global path; global pla
ios - 播放/暂停按钮未出现在Carplay控制台中
我有一个电台应用程序，并与carplay集成。在Carplay仪表板中，我仅看到专辑封面图像和停止按钮。我想在仪表板上显示播放/暂停和跳过按钮。如果您对该站有任何了解，可以帮我吗？最佳答案您需要使
audio - 播放:音视频同步算法
我正在使用 ffmpeg 创建一个非常基本的视频播放器。库，我有所有的解码和重新编码，但我坚持音频视频同步。我的问题是，电影有音频和视频流混合(交织)，音频和视频以“突发”(多个音频包，然后是并列的
jquery - 音频暂停/播放
我不知道我在做什么错 $(document).ready(function() { var playing = false; var audioElement = document.
javascript - 加载本地音频文件并使用Audio()播放
我正在尝试通过(input:file)Elem加载本地音频文件，当我将其作为对象传递给音频构造函数Audio()时，它不会加载/播放。文件对象参数和方法: lastModified: 1586969
Qt 播放/暂停操作？
在 Qt 中创建播放/暂停按钮的最佳方法是什么？我应该创建一个操作并在单击时更改其图标，还是应该创建两个操作然后以某种方式在单击时隐藏一个操作？如何使用一个快捷键来激活这两个操作？ (播放时暂停，暂停
python - 仅当日期和时间不冲突时才保存新实体(播放)
我正在用 Python 和 SQLite 构建一个预订系统。我有一个 Staff.db 和 Play.db (一对多关系)。这个想法是这样的:剧院的唯一工作人员可以通过指定开始日期和时间来选择何时添
javascript - 如何保证跨浏览器AAC+播放？
我有一个服务于 AAC+ (HE v2) 的 Icecast 服务器。我在我的网页中使用 JPlayer 来播放内容。在没有 Flash Player 的 Chromium 中，它工作得很好。对于支
JavaFX 播放 mp3
当我运行我的方法时，我收到一个MediaException。我使用 playSound("src/assets/timeup.mp3"); 调用该方法。 private void playSound(
Android - 如何监听蓝牙暂停/播放
我有一项正在播放播客的服务。我希望该服务检测用户何时按下暂停或从他们的 BT radio 播放，以便我可以停止和启动它。对于我的生活，我无法弄清楚要向我的监听器添加什么过滤器(当我按下 BT 按钮时，
javascript - 播放/暂停按钮离线工作但不在线
我对 Java 不是很在行，在研究网站上的音乐循环的简单播放/暂停按钮后，我得到了这段代码。它可以很好地离线测试，但在上传到 FTP 服务器后，它不会在任何浏览器中播放音频，我得到 SyntaxErr
javascript - 如何控制轮播中视频的暂停/播放？
我有一个使用 flickity carousel library 创建的视频轮播, 见过 here on codepen .我想要发生的是，当用户滑动轮播时，所选幻灯片停止播放，然后占据所选中间位置的
JavaScript 播放/暂停音频切换
这是一个 JSFiddle: http://jsfiddle.net/8LczkwLz/19/ HTML: JS: var flashcardAudio = documen
html - 播放/暂停音乐播放器时保持文本行高
我的问题是我无法将歌曲标题文本保持在 line-height: 800px;当用户播放或暂停播放器时。我设法在 :hover 上做到了。这似乎是一件非常棘手的事情，这真的是我第一次遇到 CSS 如此困
javascript - 播放/暂停切换的问题
我还没有找到与我的完全一样的帖子，所以这就是问题所在。我正在制作一个 mp3 播放器，播放/暂停是两个单独的按钮。这是我的代码。 prevButton = document.getElementByI

首页

博学

6Ren·AI

商城

javascript - 如何在按住键盘按钮的情况下只播放一次声音？