悬停图像时播放音频

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>

Answer 2

我不知道这是否适用于纯 javascript，但我确定它适用于 JQuery

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


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