javascript - 播放 mp3 时突出显示文本

Question

我想知道他们是怎么做到的: http://al-quran.info/#1:1

当您弹奏一段时，第二段将在其后播放。它还突出显示正在“播放”的文本。有没有我可以使用的示例或任何东西？

所以我想要的是点击 A 节的播放，然后它会自动播放、突出显示和滚动 B、C 等。

我该怎么做？我知道这是用 Jplayer 完成的，但我不太了解。

提前谢谢你。

Answer 1

大多数 HTML5 音频播放器都使用 HTML5 audio elements .从 javascript 的 Angular 来看，您可以访问 HTMLMediaElement Interface 中定义的大量有用的方法和属性。

只是为了给你一张图片，这里是一些使用朴素算法的示例代码:

var audioElement;
audioElement = document.getElementById('audioElementID');
while(isPlaying()){
    if(audioElement.ended){ //Indicates whether the media element has ended playback.
        playAndHighlightNext();
    }
}