Question

我正在尝试在网页上创建一项功能，该功能允许用户通过按键盘上的数字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>

Answer 1

您的代码立即将localStorage变量设置为字符串“ isMusicPlaying”，但我不知道为什么。相反，您可以做的是仅检查它等于什么-如果它等于null，则表示尚未设置。

这是我建议的代码。首先，我们检查localStorage musicPlaying变量是否为null（表示未设置）或true（表示在重新加载之前已在播放）。然后，我制作了播放和暂停功能，它们执行您的代码已经执行的操作，但是它们还更新了localStorage musicPlaying变量。另外，我制作了一个playPause函数，用于检查localStorage musicPlaying变量是否设置为true或false，并相应地执行play()或pause()。

var audio = document.getElementById('music');
if (localStorage.getItem("musicPlaying") === null) play()
else if (localStorage.getItem("musicPlaying") === "true") play()


function play() {
    localStorage.setItem("musicPlaying", "true")
    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();
}
function pause() {
    localStorage.setItem("musicPlaying", "false")
    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();
}
function playPause() {
    var musicPlaying = localStorage.getItem("musicPlaying")
    if (musicPlaying == "true") pause()
    else if (musicPlaying == "false") play()
} 
document.getElementById("on").style.color = "red";

document.body.onkeypress = function(pressFour){
  if(pressFour.keyCode == 52) playPause();
}

希望有帮助！

Answer 2

那么您可以使用一个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)
    }
}

希望这会有所帮助。

允许用户控制网页上的音频播放

2 个答案: