如何在图像更改时暂停音频 onmouseout

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><audio id="audio-play">    <source src="audio.mp3" type="audio/mpeg" />    </audio>    <img id="about-me-img" onmouseover="setNewImg()" onmouseout="setOldImg()" onclick="document.getElementById('audio-play').play(); return false;" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" width="200px;">javascriptjQueryhtmlCSS

Answer 1

拨打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 2

尝试将 paiseAudio() 函数中的“about-me-img”更改为“audio-play”。

Answer 3

要解决此问题，您只需在元素上发生这种情况时调用pause()该元素即可。audiomouseoutimg

但是您应该注意，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="" />