公开chrome: / /设置/内容/声音 设置不需要用户手势 重新启动浏览器

扩展DOM元素，处理错误，优雅地降级

下面我使用原型函数来包装原生DOM播放函数，获取它的承诺，然后在浏览器抛出异常时将其降级为播放按钮。这个扩展解决了浏览器的缺点，是即插即用的任何页面与目标元素的知识(s)。

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

就我而言，我必须这么做

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

在我的情况下，它只是一个点击声音，在开始时自动调用(我不介意它是否静音)。所以我用:

const clickSound = new Audio('click.wav');
clickSound.play().catch(function (error) {
    console.log("Chrome cannot play sound without user interaction first")});

来消除错误。

尝试使用鼠标移动事件监听器

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

我改变了我的UI，让用户按下一个按钮来加载网站(当他们点击按钮后，网站加载时，音频播放)

因为他们与DOM交互，然后音频播放!!