这是单击文本行并播放与文本相对应的音频部分。
我需要做的是当前部分结束时重播上一个音频部分（所有音频部分都是同一音频文件的一部分），然后 highlight 相应的文本行。重播仅应在目标
要突出显示的文本的
我希望我的描述有意义。非常感谢您的帮助和指导。
这是JSFiddle链接Demo
html
<!-- audio example (with due thanks) from:
https://www.storynory.com/the-wind-and-the-moon/-->
<audio id="myAudio" preload
src="https://20943.mc.tritondigital.com/OMNY_STORYNORY1_P/media-
session/c40d171b-865d-4a5e-b0a4-3dfdadd41173/d/clips/289ceca7-bef3-
48af-9f74-a4ba0095cab1/eaa2a7ac-aa4a-4143-a4de-
aa8500adc5ab/d44eff1d-a9c5-4310-812a-aa8500b4d544/audio/direct.mp3?
t=1562669974"
controls></audio>
<ol>
<li><span class="line" data-line="audioClip_0">Said the Wind to the Moon, "I will blow you out,</span></li>
<li><span class="line" data-line="audioClip_1" data-repeat="audioClip_1">You stare</span></li>
<li><span class="line" data-line="audioClip_1" data-repeat="audioClip_1">In the air</span></li>
<li><span class="line repeatLineBefore" data-line="audioClip_2">Like a ghost in a chair,</span><em> [Upon audio-end of this line repeat line 2 3 and 4 ]</em></li>
<li><span class="line" data-line="audioClip_3">Always looking what I am about—</span></li>
<li><span class="line" data-line="audioClip_4">I hate to be watched; I'll blow you out."</span></li>
<li><span class="line" data-line="audioClip_5">The Wind blew hard, and out went the Moon.</span></li>
<li><span class="line" data-line="audioClip_6" data-repeat="audioClip_6">So, deep</span></li>
<li><span class="line" data-line="audioClip_6" data-repeat="audioClip_6">On a heap</span></li>
<li><span class="line" data-line="audioClip_6" data-repeat="audioClip_6">Of clouds to sleep,</span></li>
<li><span class="line repeatLineBefore" data-line="audioClip_7">Down lay the Wind, and slumbered soon,</span><em> [Upon audio-end of this line repeat line 8 9 10 and 11 ]</em></li>
<li><span class="line" data-line="audioClip_8">Muttering low, "I've done for that Moon."</span></li>
<li><span class="line" data-line="audioClip_9">He turned in his bed; she was there again!</span></li>
<li><span class="line" data-line="audioClip_10" data-repeat="audioClip_10">On high</span></li>
<li><span class="line" data-line="audioClip_10" data-repeat="audioClip_10">In the sky,</span></li>
<li><span class="line" data-line="audioClip_10" data-repeat="audioClip_10">With her one ghost eye,</span></li>
<li><span class="line repeatLineBefore" data-line="audioClip_11">The Moon shone white and alive and plain.</span><em> [Upon audio-end of this line repeat line 14 15 16 and 17 ]</em></li>
<li><span class="line" data-line="audioClip_12">Said the Wind, "I will blow you out again."</span></li>
<li><span class="line" data-line="audioClip_13">The Wind blew hard, and the Moon grew dim.</span></li>
<li><span class="line" data-line="audioClip_14" data-repeat="audioClip_14">"With my sledge,</span></li>
<li><span class="line" data-line="audioClip_14" data-repeat="audioClip_14">And my wedge,</span></li>
<li><span class="line repeatLineBefore" data-line="audioClip_15">I have knocked off her edge!</span><em> [Upon audio-end of this line repeat line 20 21 and 22 ]</em></li>
</ol>
css
ul {
list-style-type: none;
}
.line {
cursor: pointer;
}
.line:hover {
color: #6C7;
border: solid 1px gray;
}
.hilite {
color: red;
}
em{color:lightgray}
脚本
$(function() {
var audio = document.getElementById("myAudio");
clipTimings = {
'audioClip_0': {
start: 28,
end: 33
},
'audioClip_1': {
start: 33,
end: 35
},
'audioClip_2': {
start: 35.5,
end: 37
},
'audioClip_3': {
start: 38,
end: 40.5
},
'audioClip_4': {
start: 41,
end: 45
},
'audioClip_5': {
start: 46,
end: 50
},
'audioClip_6': {
start: 50,
end: 54
}
};
$('.line').click(function() {
var line = $(this).data('line'),
start = clipTimings[line].start,
end = clipTimings[line].end;
audio.play();
audio.currentTime = start;
$('.line').removeClass("hilite");
var highlight = $('[data-line="' + line + '"]').addClass("hilite");
var line = $(this).data('line');
// If target has repeatLineBefore class and current audioClip ended Then
//go back and play previous clip
$(audio).on('timeupdate', function() {
if (this.currentTime >= end) {
$('.line').removeClass("hilite");
this.pause();
$(audio).off('timeupdate');
}
});
})
})
我需要能够返回并播放上一个音频部分， 突出显示其对应的文本行