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

时间:2015-03-17 10:15:02

标签: jquery html5

我有一个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>
&#13;
&#13;
&#13;

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}

1 个答案:

答案 0 :(得分:0)

如果我理解你想做什么。您正以相同的速率更改所有数字(假设为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)