Почему звук останавливается каждый раз, когда я перезагружаю? [дублировать] ⇐ Html

[Anonymous]

Я делаю простой проект, и я добавляю фона звука на главную страницу. Я не знаю, что делаю не так, потому что каждый раз, когда я перезагружаю свою страницу, звук останавливается. Хром блокирует «Автозаплят»? Есть ли способ сделать это? В основном я хочу, чтобы мой звук играл на цикле, и когда я перехожу на другую страницу и возвращаюсь к основному, звук должен начать снова.
Вот мой код:

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

/* Body Setup */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
height: 100vh;
background: #fffff2;
margin: 0;
font-family: "GaramondPremrPro-Capt";
}

/* 🎲 Title Styling */
.title {
font-family: "GaramondPremrPro-Capt";
font-size: 68px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
color: #fffff2;
text-shadow:
1px 1px 0px black,    /* Top-left shadow */
-1px -1px 0px black,  /* Bottom-right shadow */
1px -1px 0px black,   /* Top-right shadow */
-1px 1px 0px black;
}

/* Dice container: flex wrap */
.dice-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

/* Dice Styling */
.initial-dice {
width: 500px;
height: 500px;
border-radius: 10px;
border: 2px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
align-items: center;
justify-items: center;
position: relative;
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8); /* Strong offset shadow */
filter: contrast(120%) saturate(150%); /* Boost ink contrast */
}
.dice {
width: 100px;
height: 100px;
background: white;
border-radius: 10px;
border: 2px solid black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
align-items: center;
justify-items: center;
position: relative;
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.8); /* Strong offset shadow */
filter: contrast(120%) saturate(150%); /* Boost ink contrast */
}

.dice-text {
grid-column: span 3;
grid-row: span 3;
justify-content: center;
align-items: center;
color: black;
font-size: 26px;
font-weight: 100;
text-align: center;
position: absolute;
z-index: 1;
margin-left: 40px;
margin-right: 40px;
}

.dice-link {
display: block;
margin: 10px 0; /* Adds some space above and below the link */
padding: 10px;  /* Adds padding inside the link */
color: #e67e22;    /* Change the text color */
text-decoration: none; /* Removes underline */
}

/* Dots with Vibrant Colors */
.dot {
width: 12px;
height: 12px;
background: black;
border-radius: 50%;
display: none;
position: relative;
}

/* Dice Faces */
.dice:nth-child(1) .dot:nth-child(5) { display: block; } /* 1 */
.dice:nth-child(2) .dot:nth-child(1), .dice:nth-child(2) .dot:nth-child(9) { display: block; } /* 2 */
.dice:nth-child(3) .dot:nth-child(1), .dice:nth-child(3) .dot:nth-child(5), .dice:nth-child(3) .dot:nth-child(9) { display: block; } /* 3 */
.dice:nth-child(4) .dot:nth-child(1), .dice:nth-child(4) .dot:nth-child(3), .dice:nth-child(4) .dot:nth-child(7), .dice:nth-child(4) .dot:nth-child(9) { display: block; } /* 4 */
.dice:nth-child(5) .dot:nth-child(1), .dice:nth-child(5) .dot:nth-child(3), .dice:nth-child(5) .dot:nth-child(5), .dice:nth-child(5) .dot:nth-child(7), .dice:nth-child(5) .dot:nth-child(9) { display: block; } /* 5 */
.dice:nth-child(6) .dot:nth-child(1), .dice:nth-child(6) .dot:nth-child(3), .dice:nth-child(6) .dot:nth-child(4), .dice:nth-child(6) .dot:nth-child(6), .dice:nth-child(6) .dot:nth-child(7), .dice:nth-child(6) .dot:nth-child(9) { display: block;  } /* 6 */

/* 🎨 Risograph Hover Effect (Turns Yellowish) */
.dice:nth-child(1):hover {
background: #ffeb3b;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}

.dice:nth-child(2):hover {
background: lightblue;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}

.dice:nth-child(3):hover {
background: lightgreen;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}

.dice:nth-child(4):hover {
background: orange;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}

.dice:nth-child(4):hover {
background: red;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}

.dice:nth-child(5):hover {
background: #964B00;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}

.dice:nth-child(6):hover {
background: orange;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
}< /code>





Static Dice with Hover Effect






[url=/dice.html]Ready to roll the dice?[/url]




// Wait for the DOM to load completely before running the script
window.addEventListener('DOMContentLoaded', (event) => {
const audio = document.getElementById('background-music');

// Start audio on page load if it's not already playing
audio.play().catch((error) => {
// If the autoplay is blocked, show an alert or take appropriate action
console.log("Autoplay blocked or failed. Audio will not start automatically.");
});

// Check if audio was playing last time (if localStorage is set)
const audioState = localStorage.getItem('audioPlaying');
if (audioState === 'true') {
audio.play(); // Play the audio if it was previously playing
}

// Set up listeners to manage audio state (playing or paused)
audio.addEventListener('play', () => {
localStorage.setItem('audioPlaying', 'true'); // Save state as playing
});

audio.addEventListener('pause', () => {
localStorage.setItem('audioPlaying', 'false'); // Save state as paused
});

// Ensure that audio resumes after page reload
if (audioState === 'true') {
audio.play();
}
});

Подробнее здесь: https://stackoverflow.com/questions/794 ... e-i-reload