在第一次加载 html 页面时播放声音答案

【问题标题】：play sound on first time html page load在第一次加载 html 页面时播放声音
【发布时间】：2020-02-05 12:54:41
【问题描述】：

我正在尝试在页面加载时播放音频，但我收到错误 Uncaught (in promise) DOMException

$(document).ready(function() {

        var sound = new Audio("audio.mp3"); 
        sound.play();  

});

【问题讨论】：

确保文件路径正确
路径正确。第一次当我点击该页面中的任何地方时它没有播放然后它正在播放
HTML autoplay 或在没有用户交互的情况下在 JavaScript 中执行 audioElement.play() 现在被大多数浏览器阻止。

标签： javascript php html

【解决方案1】：

这是我的示例代码。如果你可以使用cookie会更好

<audio id="my_audio" src="audio.mp3" loop="loop"></audio>
and add a script like this:

window.onload = function () {
    if (localStorage.getItem("hasCodeRunBefore") === null) {
         document.getElementById("my_audio").play();
        localStorage.setItem("hasCodeRunBefore", true);
    }
}

【讨论】：

这行得通吗，我收到错误 Uncaught (in promise) DOMException。
尝试为 promise 异常实现相同的逻辑
它不起作用，我收到错误 Uncaught (in promise) DOMException

【解决方案2】：

请这样尝试

HTML

<audio id="my_audio" src="bg.mp3" loop="loop"></audio>

jQuery

$(document).ready(function() {
   setTimeOut(function(){$("#my_audio").get(0).play();},1000)
});

var promise = document.querySelector('my_audio').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
$("#my_audio").get(0).play()
  });
}

请确保音频文件在同一路径中。

【讨论】：

我试过这个，但它第一次没有工作，得到错误 Uncaught (in promise) DOMException
大部分浏览器不支持自动播放：developers.google.com/web/updates/2017/09/…

【解决方案3】：

我终于找到了它的工作方式。

在谷歌浏览器上的链接下方运行页面加载时第一次启用声音

  chrome://flags/#autoplay-policy

然后选择“无需用户手势”选项。

最后点击“立即重启”按钮重启谷歌浏览器

【讨论】：