Working on a project whereby a little creativity is called for. I have attached a zip file that contains the results of running forced alignment on a transcript using gentle that aligns an audio file to its transcript. I am looking for a way to "animate" the text as the speech is spoken in order to maximise the focus on the text being spoken as it is spoken. If someone looks away and comes back to it - they should be straight in. It is kind of like subtitles but for audio - except I want it to be as creative as possible. I originally had in mind - simply fading the text in and out whilst scrolling see the links to the examples I have tried out.
Please also bear in mind that the actual audio may be over an hour long, so the animation needs to take into account the stream effect of keeping only the current text in focus (related to what is being spoken at the playhead). Any text that is not within 20-25 words of the word being spoken is not really relevant - unless it is and I'm not seeing it.
Furthermore there are certain words that the forced-aligner does not pick up and marks them as <unk> - in the example "specialise" is an unknown word because it is spelt wrong. It is an American speaking so it should be spelt with a 'z'. However - there should still be a start and end number for the timeline.
{
"alignedWord": "<unk>",
"case": "success",
"end": 16.19,
"endOffset": 301,
"phones": [
{
"duration": 0.69,
"phone": "oov_S"
}
],
"start": 15.5,
"startOffset": 291,
"word": "specialise"
},
http://jsfiddle.net/wuj6xqpz/18/
https://codesandbox.io/s/fervent-villani-vbero
https://codepen.io/rustyleaf/pen/oNNwZpB
314a0bf1.zip
