프리이미지
사이트 내 전체검색

mp3,동영상 자막 연동 / synchronize and highlight HTML text to audio

페이지 정보

작성일12-06-04 07:59

본문


2
down voteaccepted

For ease of use, I recommend a combination of jQuery and Popcorn.js for anything where you want to integrate media with HTML, and visa versa. See this jsfiddle post for an example.

For the record, should jsfiddle ever disappear, here's the code:

HTML

<audio id="greeting" src="http://dl.dropbox.com/u/17154625/greeting.ogg" controls></audio>

<div id="text">
   
<span id="w1" class="word" data-start="1.0">Hello</span>,
   and
<span id="w2" class="word" data-start="2.0">welcome</span>
   to Stack
<span id="w3" class="word" data-start="3.0">Overflow</span>.
   Thank you for asking your question.
</div>

CSS

.word {
   color
: red;
}
.word:hover, .word.selected {
    color
: blue
추천 0