Вопрос по html5 – синхронизировать и выделить текст HTML для аудио

8

При необходимости я могу объяснить более подробно, но, по сути, мне нужно сделать так, чтобы CSS-изменения в тексте HTML синхронизировались с аудиодорожкой, т. Е. Выделялись слова / фразы синхронно с воспроизведением звука. Мне также нужно контролировать воспроизведение звука, нажав на текст. У меня есть хорошие варианты HTML / CSS, но я не так силен с необработанными js, поэтому я надеюсь, что есть подход jQuery. Я надеюсь, что кто-то может направить меня в лучшем направлении.

Спасибо заранее,

SVS

Ваш Ответ

1   ответ
18

Для простоты использования я рекомендую комбинацию jQuery иPopcorn.js для всего, что вы хотите интегрировать медиа с HTML, и наоборот. Видеть этопост jsfiddle для примера.

Для записи, если 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();
});​
На моем Mac я запускалsay "Hello, and welcome to Stack Overflow. Thank you for asking your question." -o greeting.ogg
Для этого примера я вставил его вручную.
@bouncingHippo Вы пытались поместить звуковой файл в свойpublic folder?
Супер - большое спасибо! Я буду полон своих рук, играя с этим ... Я надеюсь, что вы будете потворствовать мне, если мне нужно будет продолжить. Ура! shecky
постскриптум что вы использовали для генерации голоса в демоверсии jsfiddle? shecky

Похожие вопросы