Как воспроизвести тот же звук ⇐ CSS

[Anonymous]

Я делаю простую звуковую кнопку для нижнего колонтитула моего сайта. сама кнопка работает, но когда я перехожу на другую страницу моего сайта, она перестает воспроизводиться. Не могу понять, что я делаю не так.
Дело в том, что я добавляю свой футер на все свои страницы со скриптом...
Кстати, это мой правильный первый проект кодирования.
Вот мой код нижнего колонтитула:

Код: Выделить всё

// audio.js

// Get the audio element and button
const audio = document.getElementById("background-audio");
const audioButton = document.getElementById("audio-toggle");

// Add click event listener to toggle playback
audioButton.addEventListener("click", () => {
if (audio.paused) {
audio.play();
sessionStorage.setItem("audioPlaying", "true"); // Store the audio playing state
audioButton.textContent = "||"; // Change the button text to "Pause"
} else {
audio.pause();
sessionStorage.setItem("audioPlaying", "false");
audioButton.textContent = "▷"; // Change the button text to "Play"
}
});

// When the page loads, check if the audio was previously playing
if (sessionStorage.getItem("audioPlaying") === "true") {
audio.play();
audioButton.textContent = "||"; // Set button text to "Pause"
} else {
audioButton.textContent = "▷"; // Set button text to "Play"
}

// Save the playback state when leaving the page
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("audioPlaying", audio.paused ? "false" : "true");
});

Код: Выделить всё

/* Footer */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: inherit;
padding: 1rem 2rem;
border-top: 1px solid black;
font-size: 16px;
line-height: 1.6;
background: #fffff2;
font-family: 'Times New Roman', Times, serif;
}

/* Flexbox container for footer content */
.footer-content {
display: flex; /* Enables flexbox layout */
justify-content: space-between; /* Space between text and button */
align-items: center; /* Align items vertically */
width: 100%; /* Full width of the footer */
margin-bottom: 4px;
}

/* Footer text */
.footer-text {
text-align: center; /* Keeps text centered */
flex-grow: 1; /* Allows the text to take up remaining space */
}

/* Audio button */
.audio-button button {
margin-left: auto; /* Pushes the button to the right */
background-color: #4CAF50; /* Green background */
color: black; /* White text */
padding: 0.5rem 1rem; /* Button padding */
border: none; /* Remove borders */
border-radius: 4px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
}

/* Button hover effect */
.audio-button button:hover {
background-color: #45a049; /* Slightly darker green on hover */
}

Код: Выделить всё

It is 14:24:24 on a Monday in Molelos (PT) right now
the cats sleep


Play












 

Подробнее здесь: https://stackoverflow.com/questions/793 ... same-audio