Pause HTML audio when particular element is clicked

Question

I want to implement background music on a site i'm creating. Theres also a music video thats pops out when a user hits the play button. How can I pause the background music once the play button is clicked on?

Play button html - The play button triggers a fancybox video popup. This is when I'd like to pause the background sound below.

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

Audio file

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

How should I approach this?

An onclick event listener and `.pause()` on the audio element (and maybe a variable to store `isPlaying` in order to play the music back again) should do the job, but you'll have to try coding a bit yourself. — yuriy636, Aug 30 '16 at 11:27

score 1 · Accepted Answer · answered Aug 30 '16 at 11:32

1

You can use pause() Method,

try with the following code.

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

answered Aug 30 '16 at 11:32

Raunak Gupta

10,412
3
58
97

This worked fine. Though the music doesn't resume once the video is closed. – Samuel Aug 30 '16 at 11:43
for that you have to use vimeo api, check this [link](http://stackoverflow.com/questions/14625367/fire-event-when-vimeo-video-stops-playing). – Raunak Gupta Aug 30 '16 at 11:50
`if (aid.paused) {aid.play();} else {aid.pause();}` try this – impregnable fiend Aug 30 '16 at 12:16
@samsos: if this answers was helpful for you then please upvote. – Raunak Gupta Dec 05 '16 at 07:00

Beneris · Answer 2 · 2016-08-30T11:36:02.797

-1

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

edited Aug 30 '16 at 11:36

answered Aug 30 '16 at 11:28

Beneris

627
4
11

Do you have jquery included? – Beneris Aug 30 '16 at 11:33
2

Have you tested it ? – Rayon Aug 30 '16 at 11:33

Pause HTML audio when particular element is clicked

2 Answers2