javascript - 将文本与音频文件同步

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 元素并将其移至顶部或隐藏所有先前的元素。