Question

我在这里有一个js音量调节功能。

<script>
function setVolume() {
var mediaClip = document.getElementById("background_audio");
mediaClip.volume = document.getElementById("volume1").value;
}
</script>

后来通过html显示

<html><input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value=1></html>

我希望滑块每次都能保存音量，最好是会话或其他东西，这样每次用户刷新页面时，音频滑块都不会自动重置为“1”（范围为0到0） 1）。

可能这样做吗？谢谢:)）

Answer 1

更新：使用此作为index.php，update.php未更改。这段代码对我有用。

<?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <?php
            if(!$_SESSION['volume']) {
                $_SESSION['volume'] =0.5;
            } 
            print_r($_SESSION);

        ?>
        <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value=<?php echo $_SESSION['volume']?>>
        <script
          src="https://code.jquery.com/jquery-2.2.4.min.js"
          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
          crossorigin="anonymous">
          </script>

        <script>
            function setVolume() {   
                mediaClip = document.getElementById("volume1").value;
                var update= 'volume=' + mediaClip;
                $.ajax({
                    type: "POST",
                    url: "update.php",
                    data: update,
                    dataType: 'json',
                    cache: false,
                    success: function(response) {
                        alert(response.message);
                    }
                });
            }
        </script>
    </body>
</html>

Update.php

<?php
    session_start();
    if($_POST['volume']) {
        $_SESSION['volume'] =$_POST['volume'];
        echo 'Success';
    }
?>

玩得开心！

Answer 2

你可以使用localStorage这与session相同，但这是通过javascript保存

<script>
window.onload = function() {
    // when  page is loaded restore your volume to it's save value
    if (localStorage.getItem('volume') != null) {
        var mediaClip = document.getElementById("background_audio")
        mediaClip.volume = parseInt(localStorage.getItem('volume')); // you restore your volume setting to your save volume
    }
}
function setVolume() {
    var mediaClip = document.getElementById("background_audio");
    mediaClip.volume = document.getElementById("volume1").value;
    localStorage.setItem('volume', mediaClip.volume); // you change your volume setting
}
</script>

保存卷滑块的音量设置

2 个答案: