• Registered: 2015-03-28
  • Posts: 15

Topic: Detect if audio is playing. [SOLVED]

Is there a way to detect if audio is playing or toggled 'on'? My reason for asking is that I launch JuicebBox in a jQuery dialog and the audio track carries on playing when it's closed. Calling remove() on the dialog div does not kill the audio. I would like to be able to turn the audio track off before closing the dialog. Any ideas?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Detect if audio is playing. [SOLVED]

Unfortunately, there are no startAudio() and stopAudio() methods in the Juicebox-Pro API, just toggleAudio().
Also, there is no Juicebox-Pro API event which is fired when the audio is toggled so that you can keep track of whether the audio is playing or not.

However, you could check the 'title' attribute of the Audio Button (which, unless you change the languageList, will be 'Play Audio' when the audio is paused and 'Pause Audio' when the audio is playing) and then use the Juicebox-Pro API method toggleAudio() to stop the audio only if the 'title' attribute is 'Pause Audio'.

To see an example of this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file (changing the audio URLs as appropriate). Click the 'Stop Audio' button to stop the audio.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                audioUrlMp3: "music.mp3",
                audioUrlOgg: "music.ogg",
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                showAudioButton: "TRUE"
            });
            $(document).ready(function() {
                $('#stop').click(function() {
                    var title = $('.jb-bb-btn-audio').first().attr('title');
                    if (title === 'Pause Audio') {
                        jb.toggleAudio();
                    }
                });
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="input">
            <input id="stop" type="button" value="Stop Audio" />
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).

  • Registered: 2015-03-28
  • Posts: 15

Re: Detect if audio is playing. [SOLVED]

Thank you for the speedy answer. This is the kind of solution I was hoping for. I will give it a try and get back to you.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Detect if audio is playing. [SOLVED]

Thank you for the speedy answer.

You're welcome.

I will give it a try and get back to you.

OK. Please do. It works well in my own tests so hopefully it will also work well in your own scenario.

  • Registered: 2015-03-28
  • Posts: 15

Re: Detect if audio is playing. [SOLVED]

Works perfectly, thank you.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Detect if audio is playing. [SOLVED]

That's great!
Thank you for posting back to let me know.