Hecho de diferentes piezas de código un reproductor de audio en JS. Él trabaja muy bien. Hay dos posiciones de botón para encender el sonido y apagar el sonido. Entonces, cuando abre otra página del sitio, la posición del botón siempre está activada. ¿Cómo agregar un método de cookies, si se debe apagar el botón para que se recuerde y no suene la música? Ayudame por favor.
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>Puede configurar la cookie para lo que necesite en su evento onClick .
document.cookie agrega una cookie al navegador.
<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>Será mejor que uses localStorage como en mi respuesta.
ps, no puede reproducir audio sin la acción del usuario (lea este documento )