Why the sound stops everytime I reload?

Question

I'm doing a simple project and I'm adding a background sound to the main page. I don't know what I'm doing wrong because everytime I reload my page, the sound stops. Does chrome blocks "autoplay" ? is there a way to do it? Basically I want my sound to be playing on loop, and when I go to another page and go back to the main, the sound should start again.

Here's my code:

/* 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);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Dice with Hover Effect</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://db.onlinewebfonts.com/c/4b19a85c501674eefea5b25f9ede2702?family=GaramondPremrPro-Capt" rel="stylesheet">
</head>

<body>
    <!-- Background Music (this will persist across pages) -->
    <audio id="background-music" loop>
        <source src="./audio/chuva.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

    <h1 class="title">Várias Frêquencias</h1>
    <div class="dice-container">
        <div class="initial-dice">
            <span></span><span></span><span></span>
            <span></span><span class="dot"></span><span></span>
            <span></span><span></span><span></span>
            <p class="dice-text">In January 2025, we held a workshop with the Cooperativa Vários in Tondela, in collaboration with thesound director Jules Valeur. The workshop focused on creating a board game that integrated different sounds from the region: the rain, fireworks, wind turbines, and many others. Playing this game involves listening carefully and trying to identify these sounds... <a class="dice-link" href="/dice.html">Ready to roll the dice?</a></p>
        </div>
    </div>

    <script>
        // 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();
            }
        });
    </script>
</body>
</html>