React Lectorem
lectorem - Latin, Acc. /lehk-TOR-ehm/ (for/to the) reader
This is a React module to synchronize text and speech. A small player allows the user to play the audio and the corresponding text will highlight as it is being read.
This was built to help teaching foreign languages.
Install
npm install --save react-lectorem
or
yarn add react-lectorem
See It in Use
There is a live site here where you can see a demo.
Sample Code
;; const App = <Lectorem data=storyData configuration= isTranslationShown isTranslationBelow isBySentence />; ;
Data
The data are urls for the relevant files (audio and images) and the text broken up into strings ("lects") with associated time codes. The text is broken up into groups of sentences (basically paragraphs) with optional headers and images. The sentences header can have it's own highlighted text. Each sentence is an array of objects. Those objects have a property "lects" and a property "sentenceTranslation".
The shape of the data will be:
audioPath: './frere.mp3' subtitle: '(Are You Sleeping)' title: 'Frère Jacques' paragraphs: header: imagePath: './frere.png' sentences: lects: start: 4424 end: 5511 text: 'Frère' translation: 'Brother' explanation: '"Brother" in this sense means the title of a monk. "Frère" is also where we get our word "friar"' start: 551 end: 6533 text: 'Jacques' translation: 'James' explanation: 'In the English version of the song this is rendered as "John" but a more accurate translation would be "James" or "Jacob", from the Latin "Iacobus".' text: '.' sentenceTranslation: 'Brother James.' lects: start: 6618 end: 7683 text: 'Frère' translation: 'Brother' explanation: '"Brother" in this sense means the title of a monk. "Frère" is also where we get our word "friar"' start: 768 end: 879 text: 'Jacques' translation: 'James' explanation: 'In the English version of the song this is rendered as "John" but a more accurate translation would be "James" or "Jacob", from the Latin "Iacobus".' text: '.' sentenceTranslation: 'Brother James.' sentences: lects: start: 8831 end: 10857 text: 'Dormez-vous?' translation: 'Are you sleeping?' sentenceTranslation: 'Are you sleeping?' lects: start: 11025 end: 1271 text: 'Dormez-vous?' translation: 'Are you sleeping?' sentenceTranslation: 'Are you sleeping?' sentences: lects: start: 1321 end: 13706 text: 'Sonnez' translation: 'Ring' start: 13704 end: 15399 text: 'les matines' translation: 'the morning bells' explanation: 'These were the bells to wake the monks for the "matins", the first chants in the day, very early in the morning.' text: '!' sentenceTranslation: 'Ring the morning bells!' lects: start: 1539 end: 15924 text: 'Sonnez' translation: 'Ring' start: 15923 end: 17572 text: 'les matines' translation: 'the morning bells' explanation: 'These were the bells to wake the monks for the "matins", the first chants in the day, very early in the morning.' text: '!' sentenceTranslation: 'Ring the morning bells!' sentences: lects: start: 1757 end: 19319 text: 'Ding, dang, dong.' explanation: 'An onomatopoeia for bells, like our "ding dong".' sentenceTranslation: 'Ding, dang, dong.' lects: start: 19784 end: 21632 text: 'Ding, dang, dong.' explanation: 'An onomatopoeia for bells, like our "ding dong".' sentenceTranslation: 'Ding, dang, dong.'
Interested in contributing? See our guidelines.