How to avoid chrome autoplay policy on JS code?

I'm building a game to help kids to learn alphabets, the game is simple it will pronounce the letter and the user should choose the right letter between 3 different choices

the problem is that I can't autoplay the letter's audio file because of chrome autoplay policy which blocks autoplayed audio/video to avoid adds

one of the ways I found on google is inserting an audio/video tag on the HTML with fixed src, but that didn't work for me because audio's path would change with each new round

the other way is to set chrome flag autoplay to enable which affects my browser only but not the other users

is there a way on JS to avoid chrome's autoplay polices and make the audio file play automatically or I have to inject the audio's path into the audio tag with each new round?

<html lang='ar' dir="rtl">

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' href='choose the right styles/style.css'>
    <link rel='stylesheet' href='choose the right styles/queries.css'>
    <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap" rel="stylesheet">
    <title></title>
</head>

<body>
    <nav class="choose-the-right">
        <div class="score-container">
            <span class="score score-line">  score: <span class="score score-value"></span></span>
        </div>
    </nav>
    <main class="container">
        <div class="items-menu-div container">
            <div class="bird-image">
                <img id="bird" src="../resources/images/undraw_happy_music_g6wc.svg" alt="a bird wearing a headphone hearing alphabets">
            </div>
            <ul class="items-menu">
                <li class="alpha-item">A</a></li>
                <li class="alpha-item">B</a></li>
                <li class="alpha-item">C</a></li>
            </ul>
        </div>
    </main>
    <script src="choose the right scripts/choose-game.js"></script>
</body>

</html>

window.addEventListener("load", init())

// DOM VARIABLES
const letterChoices = document.querySelectorAll(".alpha-item");
const bird = document.querySelector("#bird");
const path = document.querySelector("#src-path");

// PRIMITIVES VARIABLES
// const alphabets = ["أ","ب","ت","ث","ج","ح","خ","د","ذ","ر","ز","س","ش","ص",
//                     "ض","ط","ظ","ع","غ","ف","ق","ك","ل","م","ن","ه","و","ي"];

const alphabets = ["A","B",'C','D','E','F','G','H','I','J','K','L','M',
                    'N','O','P','Q','R','S','T','U','V','W','X','Y','Z']

function init(){
    let randomNum = Math.floor(Math.random()*alphabets.length);
    let audio = new Audio(`../../resources/AR-alphabets/${randomNum}.mp3`);
    audio.play();
}

Solution

You just cant play sound in browser unless user has interacted with it. I would suggest to add a start button which user can click thus satisfying the chrome security condition and it will play sound.

Also you should set audio.autoplay property to true