cccisd-readhtml

cccisd-readhtml

cccisd-readhtml Highlights words in transcript tagged with , synchronized with the given audio file

Installation

Run this command:

npm install cccisd-readhtml --save

Usage

import ReadText from 'cccisd-readhtml';

var MyComponent = React.createClass({
    render() {
        return (
            <ReadHtml
                text="The quick brown fox jumps over the lazy dog."
                audioURL="http://www.somedomain.com/rickroll.mp3"
                autoplay={true}
                clickplay={true}
                highlight={true}
                onEnded={myCallbackFunction}
            />
        );
    },
});

Props

• text - (type: string, default: "")
  The line of text to display. Spaces are used to determine word boundaries.

• timings - (type: Array, default: [])
  Word timings in an expected format:
  

[
  {
    start: 0  /* milliseconds from start of audio file to highlight this word */
  },
  {
    start: 150
  },
  {
    start: 350
  },
  ...
]

Any other properties in the contained objects are ignored. The nth object in the timings object is used to highlight the nth word (as defined by spaces) in the text property.

• audioURL - (type: string, default: "")
  URL of the audio file. This component uses the HTML tag to play the audio. Any file format supported by the browser's tag will work.

• autoplay - (type: boolean, default: false)
  Whether to begin playing the audio/highlighting immediately. This component will make sure the audio is loaded enough to play without interruption before beginning if autoplay is turned on.

• highlight - (type: boolean, default: false)
  Whether to highlight words as the audio plays

• clickplay - (type: boolean, default: true)
  Whether to play the audio file (if not already playing) on click

• onEnded - (type: function, default: null)
  User-provided callback function which will run after audio has completed playing.

Contributing

To contribute:

1. Clone repo http://git.3cisd.corp/react-components/cccisd-readhtml
2. Create your feature branch (git checkout -b my-new-feature)
3. Add your changes.
4. Commit your changes (git commit -am 'Added some feature')
5. Push to the branch (git push origin my-new-feature)
6. Create new Merge Request