cccisd-readhtml v1.0.2
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:
- Clone repo http://git.3cisd.corp/react-components/cccisd-readhtml
- Create your feature branch (
git checkout -b my-new-feature
) - Add your changes.
- Commit your changes (
git commit -am 'Added some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Merge Request