Made from different pieces of code an audio player in JS. He works great. There are two button positions to turn on the sound and turn off the sound. So when you open another page of the site, the position of the button is always on. How to add a cookie method, if the button should be turned off so that it is remembered and the music does not sound? Help me please.
var radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;
radio.play();
document.querySelector('#muted').onclick = function() {
if (radio.muted === true) {
document.querySelector('#muted').innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />'
radio.muted = false;
} else {
document.querySelector('#muted').innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="On" />'
radio.muted = true;
}
}
.size_sound_alert{
width: 30px;
}
.sound_label{
position: fixed;
margin-bottom: %;
margin-left: 95%;
top: 90%;
z-index: 9999;
}
@media screen and (max-width: 768px) {
.sound_label {
position: fixed;
margin-bottom: %;
margin-left: 85%;
top: 90%;
}
}<div id="muted" class="sound_label"><img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" /></div>You can set the cookie to whatever you need in your onClick event.
document.cookie adds a cookie to the browser.
<script>
var radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;
let isMuted = document.cookie;
radio.muted = isMuted == "muteCookie" ? true : false;
radio.play();
document.querySelector('#muted').onclick = function() {
var soundAlert = document.querySelector('#muted');
if (radio.muted) {
soundAlert.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />'
radio.muted = false;
document.cookie = "";
} else {
soundAlert.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="On" />'
radio.muted = true;
document.cookie = "muteCookie";
}
}
</script>
// add elem to variable for single select from the dom;
const mutedElem = document.getElementById('muted');
var radio = new Audio();
radio.src = "https://site.dvasyl.com/wp-content/uploads/2022/05/preview.mp3";
radio.loop = true;
// you can't play audio without user action
// https://developer.chrome.com/blog/autoplay/
// radio.play();
// get value from localStorage and mute player if we need
if (!!localStorage.getItem('muted')) playerMute();
mutedElem.addEventListener('click', function () {
// toggle muted param
if (radio.muted) playerUnmute();
else playerMute();
})
// mute player function
function playerMute() {
mutedElem.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_off-1.svg" alt="On" />'
radio.muted = true;
localStorage.setItem('muted', 'true');
}
// unmute player function
function playerUnmute() {
mutedElem.innerHTML = '<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off" />'
radio.muted = false;
localStorage.removeItem('muted');
}body {
background: gray;
}<div id="muted" class="sound_label">
<img class="size_sound_alert" src="https://site.dvasyl.com/wp-content/uploads/2022/05/sound_on-5.svg" alt="Off"/>
</div>You had better use localStorage like in my answer.
p.s. you can't play audio without user action (please read this doc)