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:

• 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