• Registered: 2014-02-06
  • Posts: 1

Topic: Trigger Audio to play with Gallery Autoplay

When I looked through the config documentation and forums just now I couldn't see how to trigger audio to play automatically when someone starts a gallery slideshow.

It would be amazing if my OGG file could start playing when someone presses the play button to Autoplay the gallery and have the music stop playing when they pause the slideshow/'Autoplay gallery.'

Any ideas on how to do this? I'm sure someone's figured this out...

Thanks in advance,
Qasim

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

Re: Trigger Audio to play with Gallery Autoplay

It is not currently possible to synchronize the AutoPlay functionality with that of the Audio playback using the available configuration options.

It is also not possible to do so easily using the available Juicebox-Pro API methods and events. Ideally, you would listen for the AutoPlay (or Audio) button to be toggled by the user and then programatically toggle the Audio (or AutoPlay) button but there is no such event in the Juicebox-Pro API which could be used for this purpose. (New API events such as onAutoPlay(advancing) or onAudio(playing) would need to be introduced.)

It is also not possible to change the core functionality of Juicebox to achieve this as Juicebox does not come with source code and the 'juicebox.js' file (where all the logic is housed) is packed and obfuscated and cannot be modified. Please see this FAQ for details.

You could create your own HTML link (or button) outside the gallery and, when clicked, you could fire the Juicebox-Pro API methods toggleAutoPlay() and toggleAudio() together. However, it would be very difficult to keep the two features synchronized. You would need to ensure that the user could not manually switch either of these features off individually. Any manual image navigation (via navigation arrows, thumbnail selection or keyboard controls) would switch AutoPlay off (but the Audio would continue to play).
You would need to disable all manual navigation (using configuration options) and disable keyboard controls (using JavaScript).

The following is the closest I can get to achieving your goal.
Create a sample gallery in JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the following code (using your own audioUrlMp3 and audioUrlOgg values).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <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',
                autoPlayOnLoad: 'FALSE',
                containerId: 'juicebox-container',
                enableAutoPlay: 'TRUE',
                galleryHeight: '400',
                galleryWidth: '600',
                imageClickMode: 'NONE',
                playAudioOnLoad: 'FALSE',
                showAudioButton: 'FALSE',
                showAutoPlayButton: 'FALSE',
                showImageNav: 'FALSE',
                showNavButtons: 'FALSE',
                showSmallThumbsButton: 'FALSE',
                showSmallThumbsOnLoad: 'FALSE',
                showThumbsButton: 'FALSE',
                showThumbsOnLoad: 'FALSE'
            });
            jb.onInitComplete = function() {
                document.getElementById('juicebox-container').firstChild.removeAttribute('tabIndex');
            };
            $(document).ready(function() {
                $('#toggle').click(function() {
                    jb.toggleAudio();
                    jb.toggleAutoPlay();
                });
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="input">
            <input type="button" id="toggle" value="Toggle Audio and AutoPlay">
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this helps.

Please feel free to post suggestions for future versions in the Feature Requests forum thread.
It keeps them all together and ensures that they are not overlooked.