I’m making a simple audio button for the footer of my site, the button itself is working but when I go to another page inside my site it stops playing. I can’t figure out what I’m doing wrong.
Here’s my footer code:
The thing is that I add my footer to all my pages with the script…
BTW this is my proper first coding project.
// 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 */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Footer -->
<footer>
<div class="horizontallinefooter"></div>
<div class="footer-content">
<div class="footer-text">
It is <span id="time">14:24:24</span> on a <span id="day">Monday</span> in Molelos (PT) right now
<span id="activity">the cats sleep</span>
</div>
<div class="audio-button">
<!-- Play/Pause button for audio -->
<button id="audio-toggle" class="favorite styled" type="button">Play</button>
</div>
</div>
</footer>
<!-- Hidden audio player for persistent background sound -->
<audio id="background-audio" src="../audio/portugalsound.mp3" loop></audio>
<!-- Include the Clock Script -->
<script src="../clock.js"></script>
<!-- THE SOUND STOPS WHEN I CLICK A NEW PAGE FROM THE SITE FIX THIS! -->
<!-- Include the Audio Control Script (for Play/Pause functionality) -->
<script src="../audio.js"></script> <!-- Ensure this points to the correct location -->1