Как поставить аудио на паузу при смене изображения

Question

У меня есть изображение, которое, когда пользовательская мышь над изображением меняется на новое изображение. После щелчка по новому изображению воспроизводится аудиофайл. Когда пользовательская мышь находится вне изображения, изображение возвращается к значению по умолчанию. Проблема в том, что звук все еще играет. Я не так хорош с js, как мне сделать паузу звука, когда пользовательская мышь тоже отключена? Любая полезная обратная связь высоко ценится. Ниже приведен код.

<script type="text/javascript">
    function setNewImg() {
        document.getElementById("about-me-img").src = "https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg";
    }
    function setOldImg() {
        document.getElementById("about-me-img").src = "imgs/about-me.png";

    }
    function pauseAudio() {
        document.getElementById("about-me-img").pause();
    }
</script>

Answer 1

Попробуйте изменить "about-me-img" в функции paiseAudio () на "audio-play".

Answer 2

Позвоните pauseAudio в setOldImg и измените document.getElementById("about-me-img").pause(); на document.getElementById("audio-play").pause();

function setOldImg() {
    document.getElementById("about-me-img").src = "imgs/about-me.png";
    pauseAudio();

}
function pauseAudio() {
    document.getElementById("audio-play").pause();
}

Answer 3

Чтобы это исправить, вам просто нужно вызвать pause() на элементе audio, когда mouseout происходит на элементе img.

Однако вы должны заметить, что атрибуты события onX сейчас очень устарели и больше не являются хорошей практикой. Вместо этого вы должны ненавязчиво прикреплять свои события. Таким образом, попробуйте это:

document.addEventListener('DOMContentLoaded', () => {
  let audio = document.querySelector('#audio-play');
  let img = document.querySelector('#about-me-img');

  audio.volume = 0.1; // just for testing, so it doesn't deafen you

  img.addEventListener('mouseover', () => img.src = 'https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg');
  img.addEventListener('mouseout', () => {
    img.src = 'imgs/about-me.png';
    audio.pause();
  });
  img.addEventListener('click', () => audio.play());
});

img {
  display: block;
  width: 200px;
  height: 200px;
  background-color: #C00;
}

<audio id="audio-play" controls>
  <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg" />
</audio>

<img id="about-me-img" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" />