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

Is it possible to have a button that can toggle the playing state of audio

本文关键字：音频 播放 状态 有一个 有可能 按钮 是否      更新时间：2023-09-26

我正在创建一个网页，我希望人们能够按下键盘上的按钮来播放声音，我已经得到了这部分工作通过谷歌周围的一点。现在我想在页面上添加一个开关可以关闭键盘按键发出的声音这样那些不想要按键发出声音的人就可以有这个选项，这可能吗?

现在我使用这个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>

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

下面是长版本:

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>

您可以删除侦听器并将其重新添加到按钮上，单击

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);
  }
});

我终于找到了一个解决方案后，谷歌周围的一切，我可以想象，最后我找到了这个问题的答案，别人问这个网站上的另一个问题!这就是我使用答案的方法:

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的工作原理有所了解……不过，还是谢谢你!

相关文章：