如何在悬停时自动播放声音(使用 div)

Question

我正在使用以下代码：

 { box-sizing: border-box; }
        .specific:hover { background-image: url("example.jpg"); color:white }

使用此代码，我将其用于html：

div class="specific"

有了这些，我可以轻松地将鼠标悬停在段落上，背景图像会立即出现。但是我想要更像当我悬停时，它应该播放声音(即 mp3 文件(，当我移开光标时，声音将停止播放，当我再次悬停光标时，声音应该从第一个而不是从我离开的地方播放。

我

看过很多类似的帖子，但那里的代码，我无法将它们放入我的文件中。

Answer 1

您可以使用带有

内置JS方法，属性等的HTML音频标签轻松执行此操作。请参阅此页面。许多人不太喜欢W3Schools，但那里有很好的信息，而且非常简单。需要非常少量的 JS/jQuery 利用具有.play()和.pause()方法的hover事件侦听器来实现这一点。

这是一个使用 .play() 和 .pause() 的简单教程。

Answer 2

我费力地为你整理了一把小提琴。但说真的，尝试你自己的东西。

.HTML

<div class="specific">
  Listen to some <i>music</i>...
</div>

.JS

let specific = document.querySelector(".specific");
let audio = document.createElement("audio");
audio.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
document.body.appendChild(audio);
specific.onmouseover = () => {
  audio.play();
}
specific.onmouseout = () => {
    audio.pause();
}

别客气。

更新

---

更新的小提琴：https://jsfiddle.net/dLxkhogy/21/

.HTML

<div class="specific">
  <p>
    Listen to some <i>music</i>...
  </p>
</div>
<div class="specific">
  <p>
    Listen to some more music...
  </p>
</div>
<div class="specific">
  <p>
    Listen to even <i>more</i> music!
  </p>
</div>

.JS

let specifics = document.querySelectorAll(".specific");
let audios = ["https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"];
for(i = 0; i < specifics.length; i++){
    let specific = specifics[i];
  let audio = document.createElement("audio");
  audio.src = audios[i];
  document.body.appendChild(audio);
  specific.onmouseover = () => {
    audio.play();
  }
  specific.onmouseout = () => {
    audio.pause();
    audio.currentTime = 0;
  }
}