时间戳

首页 > 解决方案 > 为什么无法使用具有自动播放属性的 HTML 音频标签获得声音

javascript - 为什么无法使用具有自动播放属性的 HTML 音频标签获得声音

问题描述

我试图为培训师制作一个 creat html 页面。所以我想要有自动播放的起始页声音音频。但是，当我打开起始页时，此音频文件不会自动播放。我用chrome浏览器测试过

这是我的代码：

<audio id="myautoload" autoplay>
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
</audio>
<script> document.getElementById('myautoload').play(); </script>

我用了另一种方式，它也不会自动播放

var myadido = document.getElementById("myautoload");
  myadido.addEventListener("canplay", function() {
     {
      setTimeout(function() {
      myadido.play();

      },500);

  });

我已经尝试了您的解决方案，但音频仍然无法播放。

希望大家帮帮我，非常感谢

标签： javascriptjqueryhtml

解决方案

音频标签需要id="myaudio"像这样：

<audio id="myaudio" autoplay>
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
</audio>
<script> document.getElementById('myaudio').play(); </script>

您在底部的脚本会查找带有 id 的标签，'myaudio'并调用play()它来播放音频剪辑。

在 chrome 70.0.3538 中测试

编辑

您遇到的错误基本上是因为调用 play 方法返回的承诺没有被捕获（请参阅下面的代码以处理承诺）。

然而，除此之外 ，Chrome 的自动播放政策将在本月发生变化，这将影响在 Chrome 上自动播放的能力。简而言之，如果您想在网页上自动播放音频，则需要权限，否则您需要等待用户交互才能播放音频。

下面是一个示例，它将检查您是否可以自动播放（AudioContext 的状态将立即转换为“正在运行”），否则它将在用户交互后开始播放（用户按下按钮）。

<!doctype html>
<html><head></head>
<body>
  <button> start</button>
  <audio id="myaudio" autoplay>
    <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg"/>
  </audio>
  <script>

    var context;
    window.onload = function() {
     context = new AudioContext();
      context.onstatechange = function() {
        //if you have permissions, the audioContext will transition to 'running' immediately
        if(context.state == 'running') {
          play();
        }
      }
    };

    function play() {
        //ensure the promise is handled here
        var promise = document.getElementById('myaudio').play();
        if (promise !== undefined) {
          promise.then(_ => {
            console.log("playing");
          }).catch(error => {
            // Autoplay was prevented.
          });
        }
    }

    //play after the user interacts with the page
    document.querySelector('button').addEventListener('click', function() {
      context.resume().then(function() {
        play();
      });
    });

  </script>
</body>
</html>

推荐阅读