2010-07-10 169 views
1
<audio src="http://upload.wikimedia.org/wikipedia/commons/8/82/Riddle_song.ogg"></audio> 

<ul id="lyrics"> 
    <li>line 1</li> 
    <li>line 2</li> 
    <li>line 3</li> 
    <li>and so on...</li> 
</ul><!-- end #lyrics --> 

問題所以我想:關於HTML5音頻

  1. 突出顯示正在播放的行(改變顏色或背景)。
  2. 將當前時間保存到Cookie並在下次訪問時繼續。

我不確定這些是否可能在HTML5中,但即使在Flash或其他技術,我想知道是否以及如何可能。我明白#2要求太多,但#1真的很重要。

所以幾乎與此類似:http://randallagordon.com/jaraoke/但所有行都可見,只是當前行被高亮顯示。

非常感謝您的幫助。

回答

1

我認爲#2可能非常簡單,只需在適當的時刻抓住currentTime並將其存儲在cookie中即可。

如果您知道音頻中每行出現的時間偏移,則只需在setTimeout內輪詢currentTime並根據需要更新突出顯示的行。您可能還對正在開發的WebSRT spec感興趣。