オーディオファイルとのテキストの同期化

Question

私はHTMLページに詩文を挿入しています。詩の各詩は、詩の番号に対応する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コードの詩は、詩の番号をidとして区切られたdiv要素です。

これまでのことですが、これは機能しません。

私はあなたがどの時点で開始する行を指定した時間、詩のマッピングを持って提案するJavaScriptでまたはAngular2

Answer 1

でそれを行うために、任意のアイデア。その後、対応するdiv要素を探して、その要素を上に移動するか、以前のすべての要素を非表示にすることができます。