ऑडियो

Question

पर HTML पाठ को सिंक्रनाइज़ और हाइलाइट करें यदि आवश्यक हो तो मैं अधिक विस्तार से समझा सकता हूं लेकिन अनिवार्य रूप से मुझे जो करना है, वह है ऑडियो प्रभाव के साथ सिंक में HTML पाठ में प्रभाव सीएसएस परिवर्तन - यानी ऑडियो के साथ सिंक में शब्दों/वाक्यांशों को हाइलाइट करना प्लेबैक। मुझे टेक्स्ट पर क्लिक करके ऑडियो प्लेबैक को नियंत्रित करने की भी आवश्यकता है। मेरे पास अच्छा एचटीएमएल/सीएसएस चॉप है, लेकिन मैं कच्चे जेएस के साथ मजबूत नहीं हूं, इसलिए मुझे उम्मीद है कि एक jQuery दृष्टिकोण है। मुझे उम्मीद है कि कोई मुझे सबसे अच्छी दिशा में चला सकता है।

अग्रिम में बहुत धन्यवाद,

SVS

Answer 1

उपयोग में आसानी के लिए, मैं jQuery का एक संयोजन और कुछ भी है जहाँ आप HTML के साथ मीडिया एकीकृत करना चाहते हैं के लिए Popcorn.js, और वीजा विपरीत सलाह देते हैं। उदाहरण के लिए यह jsfiddle post देखें।

रिकॉर्ड के लिए, कभी jsfiddle चाहिए गायब हो जाते हैं, यहाँ कोड है:

एचटीएमएल

<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>​ 

सीएसएस

.word { 
    color: red; 
} 
.word:hover, .word.selected { 
    color: blue; 
    cursor: pointer; 
}​ 

जे एस

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(); 
});​