是否可以有一个可以切换音频播放状态的按钮答案

【问题标题】：Is it possible to have a button that can toggle the playing state of audio是否可以有一个可以切换音频播放状态的按钮
【发布时间】：2016-11-07 21:51:34
【问题描述】：

我正在创建一个网页，如果我希望人们能够按下键盘上的按钮来播放声音，我通过谷歌搜索一下就可以完成这部分工作。但是现在我想要页面上的开/关开关，可以关闭键盘按键的声音，以便不希望按键发出声音的人可以使用该选项，这可能吗？

现在我正在使用这个 JavaScript 和 HTML 在按下按钮时播放声音（本例中为 A）：

JavaScript：

$(document).keydown(function(e){
    if (e.keyCode == 65) { 
        document.getElementById('A').play();
        return false;
    }
});

HTML：

<audio id="A" src="A.ogg"></audio>

【问题讨论】：

为什么要禁用整个脚本？为什么不在if 语句中添加另一个条件并使用一些代码来切换该标志？
对不起，我对 javascript 很陌生，我在网上找到了这个脚本，然后复制/粘贴了它。老实说，我不明白你的意思或我会怎么做，你能详细说明一下吗？
@Statzerx 你可能不应该问关于你没有首先努力理解的问题

标签： javascript html

【解决方案1】：

只需设置一个布尔标志来跟踪播放状态并检查标志以进行正确的操作：

这是长版：

var playing = false;
var playsound = function(e){
    if (e.keyCode === 65 && !playing) { 
        document.getElementById('A').play();
        playing = true;
        return false;
    } else if(e.keyCode === 65 && playing){
        document.getElementById('A').pause();
        playing = false;
        return false;
    }
}

或者，更精简的版本：

var playing = false;
var a = document.getElementById('A');

document.addEventListener("keydown", function(e){
    if (e.keyCode === 65){
       (!playing) ? a.play() : a.pause();
       playing = !playing;
       console.log("Sound is: " + playing);
       return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<audio id="A" src="" controls></audio>

【讨论】：

对不起，但也许我不明白我应该对代码做什么，或者我的问题不清楚（我现在已经编辑了这个问题，以便它更有意义）。如果我用这个替换 JavaScript 代码，a 按钮只会工作一次，然后它就会停止工作。我正在寻找的是一个开/关开关，我可以把它放在可以打开/关闭键盘按下声音的页面上。再次抱歉，我应该更清楚，但无论如何感谢您的快速回答！
@Statzerx 请参阅我的答案中的代码 sn-p。正如你所描述的那样工作。
几乎！而不是 A 键打开/关闭声音，我想要一个像这样的开关：proto.io/freebies/onoff 来代替它，这样当它打开时按钮会发出声音，而当它关闭时它们不会发出声音。跨度>
@Statzerx 这是一个自定义工件，但它不会更改我展示的代码或逻辑。您需要添加所需的任何元素，然后在 document 上添加 keypress，而不是使用元素的 click。

【解决方案2】：

您可以删除监听器并在单击按钮时重新添加它

var playsound = function(e){
    if (e.keyCode == 65) { 
        document.getElementById('A').play();
        return false;
    }
}
var soundEnabled = true;

$("body").on("keydown", playsound);

$(#button).click(function(){
  soundEnabled = !soundEnabled;
  if(soundEnabled){
    $("body").on("keydown", playsound);
  }else{
    $("body").off("keydown", playsound);
  }
});

【讨论】：

【解决方案3】：

在谷歌搜索了我能想象到的一切之后，我终于找到了解决方案，最后我找到了 this 回答其他人在本网站上提出的另一个问题！所以这就是我使用该答案的方式：

HTML

<audio id="A" src="A.ogg"></audio>

<button onclick="document.getElementById('A').muted=!document.getElementById('A').muted">Mute/ Unmute</button>

Javascript

$(document).keydown(function(e){
    if (e.keyCode == 65) { 
        document.getElementById('A').play();
        return false;
    }
});

因此，使用这种方法，我根本不需要更改 Javascript，它仍然可以完全按照我的意愿进行操作！

感谢所有试图提供帮助的人，但由于这是我第一次使用 javascript，所以我不明白我应该如何处理你的答案。我发现的这个答案对我来说也很有意义，因为我至少对 HTML 的工作原理有所了解......但是，是的，无论如何，谢谢！

【讨论】：