将文本与音频文件同步

Question

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

我的愿望是如下：

每节有一个匹配的音频文件，当用户点击播放按钮，开始播放和相应的诗句的音频播放还背景颜色的变化来显示目前的经文。另外，当前的div 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元素，并将其移至顶部或隐藏所有以前的元素。