Javascript 将文本与音频文件同步

我在HTML页面中插入了一首诗。这首诗的每一节都被插入一个div中，其id对应于这首诗的编号

我的愿望如下：

每个韵文都有一个匹配的音频文件，当用户单击“播放”按钮时，播放开始，相应韵文的音频也会播放，背景颜色也会改变以显示当前韵文。此外，当前的韵文div必须在窗口顶部滚动

下面的javascript代码没有按预期工作，它更改了所有div的颜色，并且没有正确播放声音

function lecture() {
  var nbDivs = 28;
  for (i = 1; i <= nbDivs.length; i++) {

    location.href = '#'+i;
    var div = document.getElementById(i);
    div.style.backgroundColor = 'green';
    var audio = new Audio(i + '.mp3');
    audio.play();
  }
}

函数讲座（）{
var nbDivs=28；
对于（i=1；i我建议使用时间韵文映射，其中指定哪一行在什么时候开始。之后，您只需查找相应的div元素并将其移动到顶部或隐藏所有以前的元素。
我建议使用时间韵文映射，其中指定哪一行在什么时候开始。之后，您可以可以简单地查找相应的div元素并将其移动到顶部或隐藏所有以前的元素