播放音频 html答案

【问题标题】：Play audio html播放音频 html
【发布时间】：2022-02-10 21:31:42
【问题描述】：

我怎样才能像通知一样播放音频。

页面一打开，通知音频就会开始发出哔哔声。

它必须每 3 秒发出一次哔声

<!DOCTYPE html>
<html>
    <head>
       <script>  
     var aSound = document.createElement('audio');
     aSound.setAttribute('src', '/path/beep.wav');
     aSound.play();
 </script>  
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>

【问题讨论】：

将其分解为离散的步骤。你能得到一个声音播放吗？有很多教程展示了如何在网页上播放声音。之后，你可以让一些 JS 代码每 3 秒运行一次吗？有很多教程展示了如何做到这一点。然后把它们放在一起！
你应该使用 setInterval 函数

标签： javascript html

【解决方案1】：

您的代码的主要问题是，音频元素从未添加到 DOM。通过调用document.createElement，您只是创建了元素，但它永远不会添加到您的页面中。

为此，您可以使用以下代码行：

    document.getElementsByTagName('body')[0].appendChild(aSound);

这会将音频元素添加到body 元素的末尾。但是，您只能在创建 DOM 之后执行此操作。目前，您的代码在任何元素完全存在之前执行。代码必须等到页面完全加载后。

要重复播放声音，如果音频文件的长度小于三秒，您可以简单地使用window.setInterval。

下面是一个完整的例子：

<!DOCTYPE html>
<html>
    <head>
       <script>
            // Execute the code inside, after the page was loaded
            window.addEventListener("load", () => {
                var aSound = document.createElement('audio');
                aSound.setAttribute('src', '/path/beep.wav');
                // Append element to the DOM
                document.getElementsByTagName('body')[0].appendChild(aSound);
                aSound.play()
                // Execute the code inside every 3 seconds
                window.setInterval(() => {
                    aSound.play()
                }, 3000);
            })
            
        </script>  
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>

请记住，如今许多浏览器都阻止自动播放音频和视频内容。我必须在 Firefox 中为我的测试页面允许这个，所以这不适合公共页面。

【讨论】：

是的样本对我有用，但问题是在所有浏览器中播放它。是的，所有浏览器都不再支持自动播放音频
大多数浏览器只有在用户交互触发时才允许播放音频或视频，例如单击按钮或类似操作。根据您的用例，这可能会起作用。我不知道像上面的例子那样重复播放会发生什么。如果它不起作用，则可以通过拥有超过 3 秒的音频文件并将播放时间简单地重置为零来规避它。 @JoeMike