Help with adding a Pause/Play button to triggered audio (508 compliance)

[mtorocsik]

I am building a module that has to be 508 compliant. The audio currently launches when the user clicks a "Listen to Audio" button. This all works great. I'm not using slide-level audio at all. My problem is now I have to figure out a way for the user to be able to Pause that audio, and then resume where the audio left off. I haven't been able to find any tutorials about this. I've found ways to pause slide-level audio, mute slide-level audio, or to add a button that would stop the audio and when pressed again would start the audio from the beginning, but I really need a Pause/Resume solution. Help!

[Paul Wilson CTDP]

When you create an object that triggers something asynchronous in your eLearning you will run into problems with 508 compliance. It's best to have something like an audio clip to be synchronous for the purposes of adding closed captioning. This would also apply to adding event video instead of synchronous video.

One solution would be to have the button navigate to another slide where that audio is attached at the slide level. You could add a "Back to previous slide" button for your user to return to where they started when they are finishing listening to the audio. With the audio on slide level you can have closed captioning and your play/pause button will work for pausing and playing back the audio. You could design the slide to appear as if the user is still on the preceding page and this is merely a popup of something.

[mtorocsik]

Thank you for your reply! This seems like a good solution, however, aren't the Captivate playbars non-508-compliant? In order to be fully accessible my presentation must be output in HTML5 for screenreader access and the Captivate playbars are all swfs.

[TLCMediaDesign]

The playbars for HTML5 or HTML not swf.

[mtorocsik]

Forgive me for not knowing what you're referring to, I'm coming into my project late in the game and I am by no means a Captivate expert. From what I gather, i can turn the playbar on for this one audio slide using the command Assign cpCmndShowPlaybar 1?

[Lilybiri]

David (TLCMediaDesign) was referring to the HTML playbars, which are not SWF.

Are you using exclusively object audio?

[mtorocsik]

Thank you for your reply! My module MUST be 508 compliant, and the client does not want to use Captivate's playbars. My solution was to trigger audio to play when clicking on an object. The audio starts fine, but in order to be compliant, I have to add pause/resume capabilities. So far I've come up empty.

[TLCMediaDesign]

Here is how you can do it. You will need to create three buttons and one smartshape:

play_btn

play_btn_2

pause_btn

1. Create a smartshape with the opacity set to 0 and set the border to 0.

2. Import the audio to the smartshape object.

3. On your Play button (play_btn) create an advanced action:

• show the smartshape with the audio
• show a pause button (pause_btn)
• hide the play button (play_btn)

4. On the Pause button (pause_btn) create an advanced action

• execute JavaScript = pauseAudio()
• hide pause button (pause_btn)
• show a second play button (play_btn_2)

5. On the Second Play button create an advanced action

• execute JavaScript = playAudio()
• hide  (play_btn_2)
• show pause button (pause_btn)

Now insert this JavaScript in the head of your html document or in an external JS file and include it in the index.html file. There are plenty of posts on here that describe how to do it. If you put it in the head it needs to be inside of the first script tag, just above function initializeCP().

var slideElems= [ ];
var cSlide;
var audioObject = null;
var currentAudioObject = null;

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

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {    
    cSlide = 'Slide' + e.Data.id;
    slideElems = e.Data.si
            });
  }
}
}

function pauseAudio()
{
if ( currentAudioObject )
{
  audioObject = cp.movie.am.objectAudios[ cSlide ][ currentAudioObject ];
}
else
{
  for ( var i = 0; i < slideElems.length; i++ )
  {
   if ( cp.model.data[ slideElems[ i ].n ].ia != undefined )
   {
    if ( cp.model.data[ slideElems[ i ].n + 'c' ].visible == 1 )
    {
     currentAudioObject = cp.model.data[ slideElems[ i ].n ].ia;
    }  
   }
  }
 
  audioObject = cp.movie.am.objectAudios[ cSlide ][ currentAudioObject ];
}

audioObject.pause();
}

function playAudio()
{
if ( currentAudioObject )
{
  audioObject = cp.movie.am.objectAudios[ cSlide ][ currentAudioObject ];
}
else
{
  for ( var i = 0; i < slideElems.length; i++ )
  {
   if ( cp.model.data[ slideElems[ i ].n ].ia != undefined )
   {
    if ( cp.model.data[ slideElems[ i ].n + 'c' ].visible == 1 )
    {
     currentAudioObject = cp.model.data[ slideElems[ i ].n ].ia;
    }  
   }
  }
 
  audioObject = cp.movie.am.objectAudios[ cSlide ][ currentAudioObject ];
}

audioObject.play();
}