如何避免 JS 代码上的 chrome 自动播放策略？

Question

我正在制作一款游戏来帮助孩子们学习字母表，游戏很简单，它会发音字母，用户应该在 3 个不同的选项中选择正确的字母

问题是我无法自动播放信件的音频文件，因为 chrome 自动播放策略会阻止自动播放 audio/video 以避免添加

我在 google 上找到的一种方法是在具有固定 src 的 HTML 上插入一个 audio/video 标签，但这对我不起作用，因为音频的路径会改变每轮新一轮

另一种方法是设置 chrome 标记自动播放以启用它只影响我的浏览器而不影响其他用户

在 JS 上有没有办法避免 chrome 的自动播放策略并使音频文件自动播放，或者我必须在每个新回合中将音频的路径注入音频标签？

<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();
}

Answer 1

除非用户与之交互，否则您无法在浏览器中播放声音。我建议添加一个用户可以单击的开始按钮，从而满足 chrome security condition 并且它将播放声音。

您还应该将 audio.autoplay 属性设置为 true

如何避免 JS 代码上的 chrome 自动播放策略？

How to avoid chrome autoplay policy on JS code?

html

javascript

audio

html5-audio