不断出错 - 尝试播放音频时 - 为什么？答案

【问题标题】：Keep getting error - when trying to play audio - why?不断出错 - 尝试播放音频时 - 为什么？
【发布时间】：2021-04-21 13:57:39
【问题描述】：

当我尝试使用下面的 Js 在我的 chrome book 上播放音频时，我不断收到此消息：

“DOMException: play() 失败，因为用户没有先与文档交互。”

<script>  
      window.addEventListener('load', (event) => {  
        console.log('page is fully loaded');  
         
        console.log('playing music');  
          
        var audioElement = new Audio('indie.mp3').play();  
  
        if (audioElement !== undefined) {  
          audioElement.then(_ => {  
            // Autoplay started!  
          }).catch(error => {  
            // Autoplay was prevented.  
            // Show a "Play" button so that user can start playback.  
            console.log(error);  
          });  
        }  
  
         
      });  
</script>

【问题讨论】：

html.spec.whatwg.org/multipage/…

标签： javascript audio

【解决方案1】：

进行Web开发时的第一条规则是show your browser console ...一旦你这样做，我在运行你的代码时会看到以下控制台错误（你会看到一个错误，措辞类似于我在firefox上其他浏览器显示不同的措辞)

DOMException: 当前上下文中用户代理或平台不允许播放方法，可能是因为用户拒绝了权限。

在英文中，这意味着网页会在未经最终用户许可的情况下在加载后立即播放音频……几年前，业界对自动播放音频的网页产生了强烈反对，因此所有浏览器都同意阻止自动播放的代码音频...下面的作品，一旦你点击按钮就会播放音频

<!DOCTYPE html>
<html>

    <!-- https://www.w3schools.com/jsref/met_audio_play.asp -->
    <!-- https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play -->
    <!-- http://www.html5rocks.com/en/tutorials/webaudio/intro/ -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
        <audio id="myAudio">
            <!-- <source src="horse.mp3" type="audio/mpeg" /> -->
            <!-- above also works if mp3 file is local to same dir as this html file  -->
            <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">

            Your browser does not support the audio element.
        </audio>

        <button onclick="playAudio()" type="button">Play Audio</button>
        <button onclick="pauseAudio()" type="button">Pause Audio</button>

        <script>
            var x = document.getElementById("myAudio");

            function playAudio() {
                x.play();
            }

            function pauseAudio() {
                x.pause();
            }
        </script>
    </body>
</html>

以上代码取自作为评论嵌入的链接...... webdev 是一个流动的工作体，因此从符合当今现实的当前教程中学习很重要......享受并欢迎音频处理

【讨论】：

好的，谢谢 - 所以音乐不会在没有最终用户许可的情况下播放 - 然后工作完成......我将事件更改为点击后意识到它是基于用户的文档交互 - 我只希望页面我被错误所指，解释的事情就像你做的那样。
音频最近在这里停止工作。几周前就获得了许可。在我明确阻止页面的音频并重新授予权限后，声音再次开始工作（Firefox）。
你是如何阻止音频在页面上播放的？