Uncaught (in promise) : DOMException: play() failed 因为用户没有首先在控制台中与文档交互答案

【问题标题】：Uncaught (in promise) : DOMException: play() failed because the user didn't interact with the document first in consoleUncaught (in promise) : DOMException: play() failed 因为用户没有首先在控制台中与文档交互
【发布时间】：2022-01-20 23:27:43
【问题描述】：

我使用 html、css 和 javascript 创建了一个游戏。在我的代码中播放音频时出现问题，我无法播放音频。每次在控制台中显示警告/错误“script.js:7 Uncaught (in promise) DOMException: play() failed because the user did not interact with the document first”：

score = 0;
cross = true;

audio = new Audio('music.mp3');
audiogo = new Audio('gameover.mp3');
setTimeout(() => {
    audio.play()
}, 1000);
document.onkeydown = function (e) {
    console.log("Key code is: ", e.keyCode)
    if (e.keyCode == 38) {
        dino = document.querySelector('.dino');
        dino.classList.add('animateDino');
        setTimeout(() => {
            dino.classList.remove('animateDino')
        }, 700);
    }
    if (e.keyCode == 39) {
        dino = document.querySelector('.dino');
        dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
        dino.style.left = dinoX + 112 + "px";
    }
    if (e.keyCode == 37) {
        dino = document.querySelector('.dino');
        dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
        dino.style.left = (dinoX - 112) + "px";
    }
}

setInterval(() => {
    dino = document.querySelector('.dino');
    gameOver = document.querySelector('.gameOver');
    obstacle = document.querySelector('.obstacle');

    dx = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
    dy = parseInt(window.getComputedStyle(dino, null).getPropertyValue('top'));

    ox = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('left'));
    oy = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('top'));

    offsetX = Math.abs(dx - ox);
    offsetY = Math.abs(dy - oy);
    // console.log(offsetX, offsetY)
    if (offsetX < 73 && offsetY < 52) {
        gameOver.innerHTML = "Game Over - Reload to Play Again"
        obstacle.classList.remove('obstacleAni')
        audiogo.play();
        setTimeout(() => {
            audiogo.pause();
            audio.pause();
        }, 1000);
    }
    else if (offsetX < 145 && cross) {
        score += 1;
        updateScore(score);
        cross = false;
        setTimeout(() => {
            cross = true;
        }, 1000);
        setTimeout(() => {
            aniDur = parseFloat(window.getComputedStyle(obstacle, null).getPropertyValue('animation-duration'));
            newDur = aniDur - 0.1;
            obstacle.style.animationDuration = newDur + 's';
            console.log('New animation duration: ', newDur)
        }, 500);

    }

}, 10);

function updateScore(score) {
    scoreCont.innerHTML = "Your Score: " + score
}

【问题讨论】：

问题/问题是？它没有比错误消息更准确。
您需要确保用户与页面进行交互（例如单击），然后才能播放音频。见developer.chrome.com/blog/autoplay

标签： javascript html css audio

【解决方案1】：

由于隐私原因，音频和视频无法在浏览器（现代浏览器）中自动播放。为了让他们玩，首先用户需要做一些事情。例如，按一个键或单击鼠标。

【讨论】：