I have an HTML 5 audio tag and I calculated the beginning and end of each word. when a sound is played, I get the current time of the sound and compare the start and end time of each word, if any word matches, and then selects that word.
Works great. Now I want to add a button to change the playback speed, for example, 07, 0.8, 0.9, 1.0, 1.1, 1.2.
Then will I need to calculate the start and end time of each word again or will it give the same result at all playback speeds?
Audio
<audio controls>
<source src="http://www.arbordalepublishing.com/eBooks2/AnimalHelpersRehab/AnimalHelpersRehab p5.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML CODE TO HIGHLIGHT :-
<span id="W1">Experts</span>
<span id="W2">who</span>
<span id="W3">care</span>
<span id="W4">for</span>
<span id="W5">sick</span>,
<span id="W6">hurt</span>,
<span id="W7">or</span>
<span id="W8">orphaned</span>
<span id="W9">wild</span>
<span id="W10">animals</span>
<span id="W11">are</span>
<span id="W12">called</span>
<span id="W13">wildlife</span>
<span id="W14">rehabilitators</span><span id="P15">.</span>
<span id="W16">They</span>
<span id="W17">are</span>
<span id="W18">far</span>
<span id="W19">more</span>
<span id="W20">than</span>
<span id="W21">critter</span>
<span id="W22">sitters</span>.
{id: "W1", start: 0, end: 1.266, highlighted: false},
{id: "W2", start: 1.266, end: 1.326, highlighted: false},
{id: "W3", start: 1.326, end: 1.606, highlighted: false},
{id: "W4", start: 1.606, end: 1.764, highlighted: false},
{id: "W5", start: 1.764, end: 2.203, highlighted: false},
{id: "W6", start: 2.203, end: 2.625, highlighted: false},
{id: "W7", start: 2.625, end: 2.901, highlighted: false},
{id: "W8", start: 2.901, end: 3.424, highlighted: false},
{id: "W9", start: 3.424, end: 3.736, highlighted: false},
{id: "W10", start: 3.736, end: 4.225, highlighted: false},
{id: "W11", start: 4.225, end: 4.388, highlighted: false},
{id: "W12", start: 4.388, end: 4.688, highlighted: false},
{id: "W13", start: 4.688, end: 5.402, highlighted: false},
{id: "W14", start: 5.402, end: 6.536, highlighted: false},
{id: "P15", start: 6.536, end: 7.147, highlighted: false},
{id: "W16", start: 7.147, end: 7.305, highlighted: false},
{id: "W17", start: 7.305, end: 7.49, highlighted: false},
{id: "W18", start: 7.49, end: 8.154, highlighted: false},
{id: "W19", start: 8.154, end: 8.787, highlighted: false},
{id: "W20", start: 8.787, end: 8.981, highlighted: false},
{id: "W21", start: 8.981, end: 9.372, highlighted: false},
{id: "W22", start: 9.372, end: 10.204, highlighted: false}