Skip to main content
Participating Frequently
July 8, 2014
Question

How to add closed captioning to audio not on the timeline?

  • July 8, 2014
  • 2 replies
  • 2098 views

Cp 7 - I'm using a drag and drop and am triggering audio to start when the user passes/fails the interaction. How can I add closed captioning to this audio as it's not on the timeline?

Thanks,

Angela

    This topic has been closed for replies.

    2 replies

    Known Participant
    March 22, 2016

    Hi! Old post I know, but here's a JavaScript solution I just worked out for adding CC text for triggered audio:

    This code inserts a new <p> element into the default CC text element and populates it with the CC text for your triggered audio clips. In my case there is slide audio that plays before the click boxes appear that trigger the "popup" audio. They were set to stop slide audio, but the default CC text was staying up, so my code had to hide it.

    Add Functions in a Common on Enter Slide Action:

    I put this (and other custom functions my course uses) in an advanced action that is is called by every slide in the on Enter action.

    - The CC text function:

    $('p.hideCPel').removeClass('hideCPel');//restore CC text to default style on other slides

    $('#altCCtxt').remove();//remove any previous alt CC text

    function createAltCC(cc) {

      var ccTxt = $('#ccText').find('p')[0];//link to default CC text element

      if(!$(ccTxt).hasClass('hideCPel')) {

      $(ccTxt).addClass('hideCPel');

      }

      $('#altCCtxt').remove();//remove previous CCs

      var altCCtxt=document.createElement('p');

      $('#ccText').prepend(altCCtxt);

      altCCtxt.id='altCCtxt';

      altCCtxt.innerHTML=cc;

    };//end createAltCC

    - Adding CSS styles:

    I discovered you can't just overwrite the existing CC text <p> element (you can but it keeps reverting), so my code adds a CSS class that hides it (the only way I've found to overwrite a Captivate element's inline styles).

    So this must be added to main slideEnter code (the addCSSRule function was generously offered by another forum user--this is just my utilization of it):

    if(!window.custCSS) {
    function addCSSRule(sheet, selector, rules, index) {
    if("insertRule" in sheet) {
    sheet.insertRule(selector + "{" + rules + "}", index);
    } else if("addRule" in sheet) {
    sheet.addRule(selector, rules, index);
    }
    }

    addCSSRule(document.styleSheets[0], "#altCCtxt", "margin-left:8px;margin-right:8px;margin-top:2px", 1);

    addCSSRule(document.styleSheets[0], ".hideCPel", "display:none !important; opacity: 0;", 1);

    window.custCSS=true;

    }//end custCSS if

    That custCSS if statement prevents the action from repeatedly adding the styles to your course's index.html file.

    Invoking the Function:

    - The alt CC text is applied by adding this code to an advanced action (the one that is triggering your audio):

    var ccText = 'This is your CC text for you triggered audio. It must be a simple text string like this--sorry, no line breaks or html tags.';

    createAltCC(ccText);

    Hope that helps somebody. ~t

    BTW, I actually also include these styles which re-positions the CC box into a scrollable sidebar:

    addCSSRule(document.styleSheets[0], "#cc", "background: #F0F0F0; opacity: 0.9;float: right !important; position: absolute !important; top: 64px !important; left: 1021px !important; width: 200px !important; height: 506px !important; bottom: 0px; z-index: 4; overflow-y: scroll; pointer-events: all !important", 1);

    addCSSRule(document.styleSheets[0], "#ccText", "padding-top: 5px", 1);

    addCSSRule(document.styleSheets[0], "#ccClose", "display: none", 1);

    rpck
    Participant
    April 26, 2018

    Thank you so much! This helped me immensely! I have an interaction that triggers audio for each button on the screen. I used your CC Text function to write the CC for each button. Then, on the next slide, I called the function again and it removed the last AltCC so the regular CC could function again.

    xr42nv
    Inspiring
    July 9, 2014

    Hi Angela,

    Unfortunately you can't place captions on audio that is not assigned to the slide timeline. (so for example if your button 'plays audio' you cannot apply CC).

    The only way is the pause the slide timeline and add a continue button. Unfortunetly that won't help you with your situation.

    It has been one thing that has always annoyed me about CP, because all programs i build need to have CC under my accessibility requirement.

    anick421Author
    Participating Frequently
    July 9, 2014

    We have accessibility requirements, as well. Hopefully this is addressed in a future version of CP. Thanks,

    Angela

    xr42nv
    Inspiring
    July 10, 2014

    Accessibility and mobile devices.  This is something I'm rather curious about.

    How does a blind person use a touch screen?  How do they know where to tap, swipe, or pinch?


    Yeah accessibility is a big thing here in Australia. We have some of the toughest requirements in the world in the context of developing web based content.

    IOS and Android Smartphones have accessibility mode, which can act as a screen reader. They are able to read things like app names, websites, e-mails and messages. They can also use apps as long as the screen reader can support the content (in general HTML5 apps)


    It can guide them in using a mobile application. They use different gesture control to interact with the phone.

    I have built a couple of basic apps using jQuery Mobile and the accessibility mode on Android was working reasonably well. I have never tested a CP module to see if it works.

    This is an old video but it gives you a general overview of accessibility on iphone.

    iPhone VoiceOver Function For People With Disabilities - YouTube