I have a js volume-adjusting function here.
<script>
function setVolume() {
var mediaClip = document.getElementById("background_audio");
mediaClip.volume = document.getElementById("volume1").value;
}
</script>
Which is later displayed via html as such
<html><input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value=1></html>
And I'd like the slider to save the volume each time, preferably to a session or something, so that each time the user refreshes the page, the audio slider does not automatically reset to '1' (range of 0 to 1).
Could that possibly be done? Thanks :)
Update: Use this as index.php, update.php not changed. This code is working for me.
<?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';
}
?>
Have fun!
you can use localStorage this is same as session but this is save though 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>