Read Out Loud

v0.0.0

To create a Read Out Load button use the following data-attributes on a Button:

data-rol-title the title displayed in player.
data-rol-source the source of the mp3 file (required).
data-rol-labels i18n label json object with following keys:
- close, default: Close
- play, default: Play
- pause, default: Pause
- loading, default: Loading

<!-- Read Out Loud  -->
<!-- Button type: solid  -->
<button data-rol-title="Exercise With Asthma? Yes You Can!" data-rol-source="/assets/sounds/file_example_MP3_5MG.mp3" data-rol-labels='{"close":"Close","play":"Play","pause":"Pause","loading":"Loading"}' type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn"><!-- Icon video-play (mods: --button-start) -->
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
  Listen A
  <span class="sr-only">One can always add a description if it fits the needs.</span></button>
<hr>
<!-- Read Out Loud  -->
<!-- Button type: solid  -->
<button data-rol-title="4 ways men can become better caregivers" data-rol-source="/assets/sounds/other.mp3" data-rol-labels='{"close":"Close","play":"Play","pause":"Pause","loading":"Loading"}' type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn"><!-- Icon video-play (mods: --button-start) -->
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
  Listen B
  <span class="sr-only">One can always add a description if it fits the needs.</span></button>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Read Out Loud JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  RTL progress offset reversed (TVB-4657)
  Bullet RTL problem (TVB-4049)
  Sticky playhead (TVB-4624)
  Out of box scrolling (focus back to initiator) (TVB-4625)


Changed

  Pause on video play


Added

  Initial draft