Detect if HTML5 audio is playing using JQuery

Detect if HTML5 audio is playing using JQuery

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. Using JQuery I can control the audio like this:

Frameset of index.html:
  1. <frameset rows="100%, 0%" frameborder="0">
  2. <frame src="content.html" name="content" noresize>
  3. <frame src="audio.html" name="audio" noresize>
  4. </frameset>
content.html, for our purposes this isolated code and the styles are loaded on every page:
  1. <style>
  2. .play {
  3. display: block;
  4. }
  5. .pause {
  6. display: none;
  7. }
  8. </style>
  9. <button onclick="parent.audio.play()" class="play">Play</button>
  10. <button onclick="parent.audio.pause()" class="pause">Pause</button>
audio.html:
  1. <script type="text/javascript">
  2. function play() {
  3. $("audio").trigger("play");
  4. $(".play", parent.content.document).css("display", "none");
  5. $(".pause", parent.content.document).css("display", "block");
  6. }
  7. function pause() {
  8. $("audio").trigger("pause");
  9. $(".play", parent.content.document).css("display", "block");
  10. $(".pause", parent.content.document).css("display", "none");
  11. }
  12. </script>
  13. <audio>
  14. <source src="audio_file.mp3" type="audio/mpeg">
  15. </audio>
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.