The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> Detect if HTML5 audio is playing using JQuery
post May 6 2020, 02:50 PM
Post #1

Group: Members
Posts: 1
Joined: 6-May 20
Member No.: 27,324

Hello and thank you for reading my topic. I'd like to detect whether or not the HTML5 audio tag is playing, and control it across every page from within a frameset. What I'm not after is a suggestion to not use framesets. Using JQuery I can control the audio like this:

Frameset of index.html:
<frameset rows="100%, 0%" frameborder="0">
<frame src="content.html" name="content" noresize>
<frame src="audio.html" name="audio" noresize>

content.html, for our purposes this isolated code and the styles are loaded on every page:
.play {
display: block;
.pause {
display: none;
<button onclick="" class="play">Play</button>
<button onclick="" class="pause">Pause</button>

<script type="text/javascript">
function play() {
$(".play", parent.content.document).css("display", "none");
$(".pause", parent.content.document).css("display", "block");
function pause() {
$(".play", parent.content.document).css("display", "block");
$(".pause", parent.content.document).css("display", "none");
<source src="audio_file.mp3" type="audio/mpeg">

So, pressing the Play button will both play the audio in the other frame, hide the play button, and show the pause button. The pause button pauses the Audio, hides the pause button, and shows the play button. If the user clicks a link within content.html, it will replace that frame with that page, and the audio will continue playing. This is the desired functionality, but the play button is seen on this new page, since the CSS defaults were loaded.

What I want is a function using JQuery that can detect whether or not the audio in the other frame is playing, and if so, hide the play button, and show the pause button using those classes. If it's not, take no action - the CSS default actions are okay.
The HTML5 audio tag has a "paused" boolean property, it seems. I don't know where to start on harnessing it and using JQuery.

I've read a few other results online similar to my problem but none of them worked or worked properly, including setting cookies. I'm sure the problem seems simple to more experienced designers like yourselves and I'd like to learn what's going on. Thank you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 6th March 2021 - 12:58 AM