javascript - 悬停图像时播放音频

Question

我的页面上有一些图像，当我将鼠标悬停在它们上面时，它们应该每个都播放特定的声音。另外，我不希望音频播放器可见。
我试过这个，但它只在我在悬停图像之前单击音频播放器时才有效:
HTML

<a href="Okokoska.html"><img src = "Pkokoska.jpg" onmouseover="playSound1()"></a>
<a href="Okonj.html"><img src = "Pkonj.jpg" onmouseover="playSound2()"></a>

<audio controls id="audio1"><source src="Zkokoska.wav" type="audio/wav"></audio>
<audio controls id="audio2"><source src="Zkonj.wav" type="audio/wav"></audio>

JavaScript

var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");

function playSound1() {
sound1.play();
}

function playSound2() {
sound2.play();
}

Answer 1

您必须添加 controls音频标签中的属性，用于激活该元素的控制功能，如播放、暂停等

     <audio controls id="abc> ... </audio>

您还可以通过使用 css 属性 dsiplay:none 来隐藏控件选项卡。

var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");

function playSound1() {
sound2.pause();
sound2.currentTime = 0;
sound1.play();
}

function playSound2() {
sound1.pause();
sound1.currentTime = 0;
sound2.play();
}

audio{
     display:none;
}

<a href="Okokoska.html"><img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound1()"></a>

<audio id="audio1" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>

<a href="Okokoska.html"><img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound2()"></a>

<audio id="audio2" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>