Skip to main content
Inspiring
December 4, 2017
Answered

How to Display Current Slide Audio Time Variables (Current Position/Duration)?

  • December 4, 2017
  • 2 replies
  • 725 views

I would like to display a simple text field that shows how far I am into a current slide's audio track, followed by the total audio duration in seconds, for example, if a user is 18 seconds into a 60-second slide, it would display:

"Current position: 18/60"

...and this would tick along with the slide, counting up to 60/60.

Certainly, there must be variables for this, but I can not find them.  Any suggestions?

    This topic has been closed for replies.
    Correct answer TLCMediaDesign

    Well, it's close!  I added a console.log to your script as follows:

    function runSlideTimer()

    {

    window.audioDuration = cp.movie.am.slideAudios[slideData.audioName].duration.toFixed(0);

    window.audioTime = cp.movie.am.slideAudios[slideData.audioName].nativeAudio.currentTime.toFixed(0);

    console.log(window.audioTime);

    console.log(window.audioDuration);

    }

    I am seeing the correct information in the console, but cannot seem to get it into the captions.  I tried both of the following:

    $$audioTime$$

    $$audioDuration$$

    $$window.audioTime$$

    $$window.audioDuration$$

    Thanks again for your help.


    Did you create the variables in Captivate under Project/variables? You need to create them first and give them a value of 0.

    In the caption use:

    $$audioTime$$

    $$audioDuration$$

    Also you need to wrap some of the code in this if statememt to prevent an error if there isn't any audio:

    function runSlideTimer()

    {

    if ( slideData.audioName != undefined )

    {

    window.audioDuration = cp.movie.am.slideAudios[slideData.audioName].duration.toFixed(0);

    window.audioTime = cp.movie.am.slideAudios[slideData.audioName].nativeAudio.currentTime.toFixed(0);

    console.log(window.audioTime);

    console.log(window.audioDuration);

    }

    }

    2 replies

    TLCMediaDesign
    Inspiring
    December 4, 2017

    You'll need to put this JavaScript in the head of the index.html page inside of <script> tags.

    Create 2 variable and use them in your text captions:

    audioDuration

    audioTime

    <script>

    var interfaceObj, eventEmitterObj, slideData;

    window.addEventListener( 'moduleReadyEvent', function ( e )
    {
    interfaceObj = e.Data;
    eventEmitterObj = interfaceObj.getEventEmitter();
    initializeEventListeners()
    });

    function initializeEventListeners()
    {
    if ( interfaceObj )
    {
      if ( eventEmitterObj )
        {
              eventEmitterObj.addEventListener( "CPAPI_SLIDEENTER", function( e )
          {
    slideData = e.Data;  

    eventEmitterObj.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', runSlideTimer, 'cpInfoCurrentFrame' );
          
       });
      }
    }
    }

    function runSlideTimer()
    {
    window.audioDuration = cp.movie.am.slideAudios[ slideData.audioName ].duration.toFixed(0);
    window.audioTime = cp.movie.am.slideAudios[ slideData.audioName ].nativeAudio.currentTime.toFixed(0);
    }

    </script>

    Inspiring
    December 4, 2017

    Thanks very much for the extremely thorough answer!  I will give it a try and let you know how it works for me.  

    Inspiring
    December 4, 2017

    Well, it's close!  I added a console.log to your script as follows:

    function runSlideTimer()

    {

    window.audioDuration = cp.movie.am.slideAudios[slideData.audioName].duration.toFixed(0);

    window.audioTime = cp.movie.am.slideAudios[slideData.audioName].nativeAudio.currentTime.toFixed(0);

    console.log(window.audioTime);

    console.log(window.audioDuration);

    }

    I am seeing the correct information in the console, but cannot seem to get it into the captions.  I tried both of the following:

    $$audioTime$$

    $$audioDuration$$

    $$window.audioTime$$

    $$window.audioDuration$$

    Thanks again for your help.

    RodWard
    Community Expert
    Community Expert
    December 4, 2017

    Achieving what you want is not as simple as you might like with default Captivate Advanced Actions and Variables.  Your best option would probably be to use JavaScript instead.

    Here's why:

    Captivate's timeline is based on frames.  There are usually about 25-30 frames per second, depending on how you have it set up.  There is a System Variable called cpInfoCurrentFrame that allow you to display the actual frame number of the entire project at any given moment.

    But in order to display the exact second at any point you would need to divide that current frame number by the number of frames per second configured in Preferences for that particular project.  However, the next problem is that you can only perform one of these types of calculations with an Advanced Action using the Expression action, and you can only trigger one of these actions with an Event.  And events are things like On Slide Enter or at the click of a button etc.  There is no default event that you can trigger automatically to perform this calculation every second or at every frame change.

    So although you can definitely use Advanced Actions to find out the frame number at the beginning of a slide's timeline,and then display the frames/seconds at points where you have an event available to trigger the action, displaying a changing value of the exact number of seconds at any point in that slide would only be possible with some custom JavaScript programming.