Воспроизведение звука при наведении курсора на изображение

#javascript #html

#javascript #HTML

Вопрос:

На моей странице есть несколько изображений, и при наведении курсора на них каждое из них должно воспроизводить определенный звук. Кроме того, я не хочу, чтобы аудиоплееры были видны.

Я пробовал это, но это работает только тогда, когда я нажимаю на аудиоплеер перед наведением курсора на изображение:

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

1. Вы проверили, загружены ли аудиофайлы? Возможно, путь неверен.

2. Нет, это потому, что у него отсутствует controls атрибут в теге audio

3. @SandrinJoy, я пытался сделать это с его помощью, но это работает, только если я нажимаю на этот проигрыватель перед наведением курсора мыши на изображение.

4. хорошо, я проверю это

5. и это работает для меня, кстати

Ответ №1:

Вы должны добавить controls атрибут в тег audio, чтобы активировать функции управления, такие как воспроизведение, пауза и т.д. Для этого элемента

      <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>

1. Одна функция может работать так же, как при использовании нескольких?

2. да, с помощью одной функции мы можем сделать то же самое. Но я не знаю, что будет эффективным

Ответ №2:

Я не знаю, будет ли это работать на чистом javascript, но уверен, что это будет с jQuery

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


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