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

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()元素上发生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="" />

图像更改时如何暂停音频的播放

3 个答案: