Chrome移动端在交互后出现NotAllowedError（未被允许的错误）

移动开发 2026-07-11

我在应用中有一段代码，旨在确保只有在浏览器允许时才播放音频。然而在Android Chrome的本地网络环境下，每次重新加载页面都会在touchstart处理程序中抛出NotAllowedError：

Uncaught (in promise) NotAllowedError: play() 失败，因为用户没有先与文档进行交互。

我需要在用户交互后能够可靠地启动音频。能否有人帮我解决？以下是最小可重现示例。

<body>
    <script language='javascript'>
        let audio = new Audio('assets/intro/intro.mp3');   

        audio.play().catch (e => {

            let tapHandler = () => {
                audio.play(); // <<===================== NotAllowedError HERE!
            }

            document.addEventListener('touchstart', tapHandler, {'once': true});
        });
    </script>
</body>

解决方案

我来回答自己的问题。似乎 'touchstart' 并不是重新启动音频的正确事件。把它改成 'click' 就解决了

<body>
    <script language='javascript'>
        let audio = new Audio('assets/intro/intro.mp3');   

        audio.play().catch (e => {

            let tapHandler = () => {
                audio.play(); // <<===================== NotAllowedError HERE!
            }

            document.addEventListener('click', tapHandler, {'once': true});
        });
    </script>
</body>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。