时间戳

首页 > 解决方案 > 悬停图像时播放音频

javascript - 悬停图像时播放音频

问题描述

我的页面上有几张图片，当我将鼠标悬停在它们上面时，它们应该都会播放某种声音。另外，我不希望音频播放器可见。

我试过这个，但它只有在我悬停图像之前点击音频播放器时才有效：

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();
}

标签： javascripthtml

解决方案

您必须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>

推荐阅读