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>

Answer 2

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

<script>
 $('.play-btn').on('click', function(){
    $('#bgmusic').get(0).pause(); 
 });
 </script>

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

2 个答案: