How to play sound automatically when hovered (using div)? - html

Question

I am using this code:
{ box-sizing: border-box; }
.specific:hover { background-image: url("example.jpg"); color:white }
With this code I am using this for html:
div class="specific"
With these I can easily hover over a paragraph and the background image appears instantly. But I want a little bit more like when I will hover, it should play a sound (namely mp3 file) and when I will move away the cursor the sound will stop playing and when I will hover my cursor again the sound should play from the first not from where I left it.
I have seen a lot of similar posts but the code there, I cannot put them into my file.

Answer 1

You can do this very easily with an HTML audio tag with the built in JS methods, properties etc. See this page. Many people don't like W3Schools much but there's good information there and it's very straight forward. It would take a very small amount of JS/jQuery utilizing a hover event listener with the .play() and .pause() methods to make this happen.
Here's a simple tutorial using .play() and .pause().

Answer 2

I laboriously put together a fiddle for you. But seriously, try your own stuff.
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();
}
You're welcome.
UPDATE
Updated fiddle: 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;
}
}