HTML 텍스트를 오디오와 동기화하고 강조 표시합니다.

Question

필요한 경우 더 자세히 설명 할 수 있지만 기본적으로 오디오 트랙과 동기화되어 HTML 텍스트에 CSS 효과가 적용됩니다 (예 : 오디오와 동기화 된 단어/구문 강조 표시). 재생. 또한 텍스트를 클릭하여 오디오 재생을 제어해야합니다. 나는 좋은 HTML/CSS 찹을 가지고 있지만 raw js만큼 강하지는 않으므로 jQuery 접근법이 필요하다. 나는 누군가가 나를 가장 좋은 방향으로 이끌 수 있기를 바라고있다. 사전에

많은 감사,

SVS 사용의 편의를 위해

Answer 1

, 나는 그 반대로 JQuery와의 조합은 HTML과 미디어를 통합하려는 아무것도 Popcorn.js 등을 추천합니다. 예를 들어 jsfiddle post을 참조하십시오.

기록을 위해

, 지금까지 jsfiddle 사라, 여기에 코드입니다 :

HTML

<audio id="greeting" src="https://dl.dropboxusercontent.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; 
    cursor: pointer; 
}​ 

JS

var pop = Popcorn("#greeting"); 

var wordTimes = { 
    "w1": { start: 1, end: 1.5 }, 
    "w2": { start: 1.9, end: 2.5 }, 
    "w3": { start: 3, end: 4 } 
}; 

$.each(wordTimes, function(id, time) { 
    pop.footnote({ 
     start: time.start, 
     end: time.end, 
     text: '', 
     target: id, 
     effect: "applyclass", 
     applyclass: "selected" 
    }); 
}); 

pop.play(); 

$('.word').click(function() { 
    var audio = $('#greeting'); 
    audio[0].currentTime = parseFloat($(this).data('start'), 10); 
    audio[0].play(); 
});​