解决未捕获承诺DOMException: play() 失败，因为用户没有先与文档交互

问题描述

我尝试使用 javascript 制作 html 页面以在鼠标悬停时播放声音，但是当我尝试在 chrome 浏览器上首次重新加载代码时，它给了我这个错误。我如何在 chrome 中解决这个问题。

未捕获（承诺）DOMException：play() 失败，因为用户没有先与文档交互。

let searchData = cityData.filter { $0.firstName.range(of: searchTerm,options: .caseInsensitive) != nil ||
                                   $0.lastName.range(of: searchTerm,options: .caseInsensitive) != nil
}

解决方法

我建议您在 audio 事件上创建 onmouseover 节点：

HTML

<div class="container">
  <div class="row" style="margin-top: 30px;">
    <div class="col-md">
      <img id="thirsty" onmouseover="play('disability/sounds/water.mp3')" src="disability/images/hungry_icon.png" class="img-thumbnail" title="أنا جائع">
    </div>
  </div>
  <div class="row" style="margin-top: 130px;">
    <div class="col-md">
      <img id="music" onmouseover="play('isability/sounds/song.mp3')" src="disability/images/music_icons.png" class="img-thumbnail" title="شغل الموسيقى">
    </div>
 </div>
</div>
<script>
  const audio = document.createElement("audio");
  audio.muted = true;

  function play(src) {
    audio.pause();
    audio.muted = false;
    const source = document.createElement("source");
    source.src = src;
    audio.appendChild(source);
    audio.currentTime = 0;
    audio.play();
  }
</script>