我正在尝试在网页上创建一项功能，该功能允许用户通过按键盘上的数字4来打开/关闭音频。
音频应在第一次加载网页时自动播放。但是，使用本地存储时，如果他们决定关闭音频，则应将其保存，并且如果要重新加载/刷新，则音频应保持关闭状态。
有人可以解释为什么这行不通吗？
localStorage.setItem("preference", "isMusicPlaying");
var audio = document.getElementById('music');
var musicPlaying = localStorage.getItem("preference");
if(musicPlaying == false) {
audio.play();
}
else {
audio.pause();
}
document.getElementById("on").style.color = "red";
document.body.onkeyup = function(pressFour){
if(pressFour.keyCode == 52) {
if(musicPlaying==false) {
audio.play();
document.getElementById("on").style.color = "red";
document.getElementById("off").style.color = "black";
document.getElementById("nosound").style.height = "0";
document.getElementById("nosound").style.width = "0";
document.getElementById("sound").style.height = "75";
document.getElementById("sound").style.width = "75";
document.getElementById('music').play();
}
else if(musicPlaying==true) {
audio.pause();
document.getElementById("on").style.color = "black";
document.getElementById("off").style.color = "red";
document.getElementById("nosound").style.height = "75";
document.getElementById("nosound").style.width = "75";
document.getElementById("sound").style.height = "0";
document.getElementById("sound").style.width = "0";
document.getElementById('music').pause();
}
}
}
的HTML
<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id ="titleimg"src = "images/titleimage.png">
<h1>Please click one of the following!</h1>
<div class = "navigation">
1. Travel the trail<img id="wagon"src = "images/wagon.png"></br></br>
2. Learn about the trail<img id="info"src = "images/info.png"></br></br>
3. See the Oregon Top 10<img id="ten"src = "images/top10.png"></li></br></br>
4. Turn Sound (<span id="off">Off</span>/<span id="on">On</span>)
<img id="sound"src="images/volume.png"><img id="nosound"src = "images/mute.png"></br></br>
</div>
<div class = "landscape">
<img id ="grass"src = "images/grassyfield.png">
</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/mainmenu.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/mainmenu.js"type="text/javascript"></script>
<script src="/JS/global.js"type="text/javascript"></script>
</html>
</body>
最佳答案
好吧，您可以使用flag变量，将其保存在本地存储中。因此，我建议遵循以下思路:
const audio = document.getElementById('music');
const musicPlaying = localStorage.getItem("preference");
// The flag variable.
let musicPlaying = false;
if(musicPlaying == false) {
audio.play();
}
else {
audio.pause();
}
document.getElementById("on").style.color = "red";
document.body.onkeyup = function(pressFour){
if(pressFour.keyCode == 52) {
if(musicPlaying==false) {
audio.play();
document.getElementById("on").style.color = "red";
document.getElementById("off").style.color = "black";
document.getElementById("nosound").style.height = "0";
document.getElementById("nosound").style.width = "0";
document.getElementById("sound").style.height = "75";
document.getElementById("sound").style.width = "75";
document.getElementById('music').play();
}
else if(musicPlaying==true) {
audio.pause();
document.getElementById("on").style.color = "black";
document.getElementById("off").style.color = "red";
document.getElementById("nosound").style.height = "75";
document.getElementById("nosound").style.width = "75";
document.getElementById("sound").style.height = "0";
document.getElementById("sound").style.width = "0";
document.getElementById('music').pause();
}
// This will toggle between false/true on each press of the button.
musicPlaying = !musicPlaying;
// NOW we save the flag variable into local storage
localStorage.setItem("preference", musicPlaying)
}
}
希望这可以帮助。
关于javascript - 允许用户控制网页上的音频播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52673199/