CODEWITHSUNDEEP
pluginsjavascript
malhar
malhar

Reputation: 592

Play pause background audio on click and load events

I am newbie JS and Wordpress user/developer. I want to play an audio in background when a page loads. Also, would like to pause the same audio if I click few set of buttons. I tried using plugins (obviously being a noob), however I can get a sound bar, and a play pause button. But, cannot connect set of buttons to the action. How to do I achieve this for events like on load or on click?

Upvotes: 0

Views: 771

Answers (1)

Adam
Adam

Reputation: 1304

Pause button:

<button onclick="pauseAudio()" type="button">Pause Audio</button>

Audio:

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

JS Script:

var audio = document.getElementById("audio"); 

function pauseAudio() { 
    audio.pause(); 
} 

audio.play();

I think the code is all pretty straight forward. Basically, you get the video element, and just run .play() on it. Add to a button's onclick pauseAudio() which will run the function and pause the video.

Hope that helps!

Or...

  <button onclick="document.getElementById("audio").pause();" type="button">Pause Audio</button>

and on the <body> tag:

<body onload="document.getElementById("audio").play();">

Something similar to that should get you going!

This works for videos or audio, I've update this to be more for audio, though the premise is the same.

Upvotes: 1

Related Questions