javascript - 如何在图像更改时暂停音频 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;">

Answer 1

在setOldImg中调用pauseAudio，并将document.getElementById("about-me-img").pause();更改为document.getElementById("音频播放").pause();

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

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