Javascript 向上滚动文本并在使用html5音频读取文本时将其隐藏

我使用一个代码来突出显示html5音频读取的文本单词，并且在单击相邻句子时也会读取音频

我需要的是使正在阅读的行从页面中消失，而正在阅读的下一行在其位置跳转，以此类推。。所以到了最后，页面上除了：1-音频播放器，2-“突出显示开/关”按钮，3-“滚动开/关”按钮之外什么都没有了

因此，页面中有两个选项，用户是想在阅读时看到所有文本，还是只想看到听到的行（以及下面的行）

使用的代码是：

var textHighlightOn=true，
btnToggle=document.getElementById（'toggleTxt'），
textDiv=document.querySelector（“.text highlight”）
spns=document.querySelectorAll（'span'），
奥迪=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
//删除所有以前的活动；
[]forEach.call（SPN，函数（e）{
e、 classList.remove（'active'）；
e、 classList.remove（'active-prev'）；
});
var i；
对于（i=0；i0）{
spns[i-1].classList.remove（'active'）；
spns[i-1].classList.add（'active-prev'）；
}
spns[i].classList.add（'active'）；
}
}
}
//倾听跨距上的咔嗒声。
[]forEach.call（spn，函数（spn）{
addEventListener（“单击”，函数（）{
用于（SPN中的var i）{
}
var time=Number（this.id.slice（2））；
audi.currentTime=时间；
});
});
//切换文本高亮显示
btnToggle.addEventListener（“单击”，函数（）{
如果（文本高亮显示）{
textDiv.classList.add（'off'）；
}否则{
textDiv.classList.remove（'off'）；
}
this.innerHTML='Highlight'+（textHighlightOn？'off'：'on'）；
textHighlightOn=！textHighlightOn；
});
正文{
背景：#008000；
}
.文本高亮显示span.active-prev{
背景：#fff；
}
.文本高亮显示span.active{
背景#03a9f4；
}
.text-highlight.off span{
背景：透明；
}

突出显示
好的，我们这是第二次尝试，

测试能力

上传一个MP

3文件。

希望这能奏效！
这应该可以


var
//控制
textHighlightOn=true，
showAllTxt=true，
btnToggle=document.getElementById（'toggleTxt'），
btntogleshowtxt=document.getElementById（'toggleShowTxt'），
textDiv=document.querySelector（'.text highlight'），
spns=document.querySelectorAll（'span'），
奥迪=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
//删除所有以前的活动；
[]forEach.call（SPN，函数（e）{
e、 classList.remove（'active'）；
e、 classList.remove（'active-prev'）；
});
var i；
对于（i=0；i0）{
spns[i-1].classList.remove（'active'）；
spns[i-1].classList.add（'active-prev'）；
}
spns[i].classList.add（'active'）；
}
}
}
//倾听跨距上的咔嗒声。
[]forEach.call（spn，函数（spn）{
addEventListener（“单击”，函数（）{
用于（SPN中的var i）{
}
var time=Number（this.id.slice（2））；
audi.currentTime=时间；
});
});
//切换文本高亮显示
btnToggle.addEventListener（“单击”，函数（）{
如果（文本高亮显示）{
textDiv.classList.add（'off'）；
}否则{
textDiv.classList.remove（'off'）；
}
this.innerHTML='Highlight'+（textHighlightOn？'off'：'on'）；
textHighlightOn=！textHighlightOn；
});
// 
btntogleshowtxt.addEventListener（“单击”，函数（）{
如果（showAllTxt）{
textDiv.classList.remove（'show-all'）；
}否则{
textDiv.classList.add（'show-all'）；
}
this.innerHTML='查看所有文本'+（showAllTxt？'off'：'on'）；
showAllTxt=！showAllTxt；
});
正文{
背景：#008000；
}
跨度{
填充：0；
保证金：0；
}
.文本突出显示范围{
显示：块；
边缘底部：1px；
}
.文本高亮显示span.active-prev{
显示：无；
背景：#fff；
}
.文本高亮显示span.active{
背景#03a9f4；
显示：块；
}
.text-highlight.show-all span{
显示：块！重要；
}
/*关闭高光*/
.text-highlight.off span{
背景：透明；
}

突出显示
请参阅上的所有文本
好的，我们这是第二次尝试，
测试能力
上传一个MP
3文件。
希望这能奏效！
你好！谢谢你的回答。。然而，我想从NewButton中默认显示所有行，当一行完成读取时，它将消失（通常从5行开始，然后读取后第一行消失，然后有4行，依此类推）。没有新的#ffc107突出显示。。事实上，在这种情况下，我们也可以删除白色突出显示，因为读取的行消失了，所以现在才是第一行的蓝色突出显示。@Mike，如果我花了很多时间回复，对不起（我尽量利用周末）。复习更新后的答案。谢谢你，祝你周末快乐，编码快乐！我知道程序员是如何享受挑战的：）它现在工作得很好，但它删除了以前突出显示的白色阅读文本的选项。。当用户没有单击“查看所有文本”按钮时，它应该始终存在，当用户单击它时，它将自动消失，因为以前读取的行已消失。@Mike，现在查看吗？超级。。谢谢我不想再提了