javascript - 单击特定元素时暂停 HTML 音频

Question

我想在我正在创建的网站上实现背景音乐。当用户点击播放按钮时，还会弹出一个音乐视频。单击播放按钮后如何暂停背景音乐？

播放按钮 html - 播放按钮会触发 fancybox 视频弹出窗口。这是我想暂停下面的背景声音的时候。

   <div class="play-btn ">
        <a class="fancybox-media" href="https://vimeo.com/1741943434" >
            <img src="../img/play-btn.svg" alt="">
        </a>
    </div>

音频文件

 <audio autoplay>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
 </audio>

我应该如何处理这个问题？

Answer 1

您可以使用pause() Method ,

尝试使用以下代码。

<div class="play-btn " onclick="pauseAid()">
    <a class="fancybox-media" href="https://vimeo.com/1741943434" >
        <img src="../img/play-btn.svg" alt="">
    </a>
</div>


 <audio autoplay id="myAudio">
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
 </audio>

<script>
var aid = document.getElementById("myAudio"); 
function pauseAid() { 
    aid.pause(); 
}
</script>