我尝试使用 javascript 制作 html 页面以在鼠标悬停时播放声音,但是当我尝试在 chrome 浏览器上首次重新加载代码时,它给了我这个错误。我如何在chrome中解决这个问题。
Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互。
<html>
<head>
<title>ضمور العضلات</title>
<style>
.img-container {
text-align: center;
}
</style>
<!-- Font Awesome -->
</head>
<audio id="musicSound" preload="auto" src="disability/sounds/song.mp3"
>
</audio>
<audio id="hungrySound" preload="auto" src="disability/sounds/water.mp3"
>
</audio>
<body style="background: #E8E8E8;">
<div class="container">
<div class="row" style="margin-top: 30px;">
<div class="col-md">
<img id="thirsty" onmouseover="playHungry()" 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="playMusic()" src="disability/images/music_icons.png" class="img-thumbnail" title="شغل الموسيقى">
</div>
</div>
</div>
<script>
var music = document.getElementById("musicSound");
var hungry= document.getElementById("hungrySound");
function playMusic() {
music.play();
thirsty.pause();
thirsty.currentTime = 0;
}
function playHungry() {
hungry.play();
music.pause();
music.currentTime = 0;
}
</script>
</body>
</html>