将文本与音频文件同步

Question

我在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();
  }
}

对于HTML代码，经文是在分开的div元素中，其中诗句的编号为id。

这是我到目前为止所得到的但是没有用。

任何想法都可以在javascript或Angular2中完成

Answer 1

我建议你有一个时间映射的映射，你指定哪一行在哪个时间开始。之后，您只需查找相应的div元素并将其移至顶部或隐藏所有先前的元素。