jquery - HTML 5 音频播放速率和当前时间

Question

我有一个 HTML 5 音频标签，我已经计算了每个单词的开始和结束时间。播放音频时，我获取音频的当前时间并比较每个单词的开始和结束时间(如果有任何单词匹配)然后突出显示该单词。

它工作正常。现在我想添加一个按钮来更改播放速率，例如 07、0.8、0.9、1.0、1.1、1.2。

那么我是否必须再次计算每个单词的开始和结束时间，或者它会在所有播放速率上给出相同的结果？

音频

<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}

Answer 1

如果我理解正确你想做什么。您正在以相同的速率更改所有数字(比方说 0.8)。为什么不简单地创建一个用新按钮分配的变量，然后将每个数字乘以该变量。例如:

r = 0.8

{id: "W1", start: 0*r, end: 1.266*r, highlighted: false},

{id: "W2", start: 1.266*r, end: 1.326*r, highlighted: false},

当然乘法必须看起来更像:

parseFloat(1.266)*parseFloat(r)