如何避免在JS代码上使用Chrome自动播放策略?

问题描述：

我正在构建一个游戏来帮助孩子们学习字母，该游戏非常简单，可以发音并且用户应该在3种不同的选择之间选择正确的字母

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

问题是我无法使用Chrome的自动播放策略来自动播放字母的音频文件，因为该策略会阻止自动播放的音频/视频以避免添加

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

我在Google上找到的一种方法是在具有固定src的HTML上插入音频/视频标签，但这对我不起作用，因为音频的路径会随着新的回合而改变

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

另一种方法是将chrome标志自动播放设置为启用，这只会影响我的浏览器，而不会影响其他用户

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

JS上是否有一种方法可以避免chrome的自动播放策略，并使音频文件自动播放，或者我必须在每个新回合中将音频路径注入到音频标签中?

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

答

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

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.

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

Also you should set audio.autoplay property to true

如何避免在JS代码上使用Chrome自动播放策略?

相关推荐