Подсветка текста с синхронизацией звука в Jquery - PullRequest
Новая
       13

Подсветка текста с синхронизацией звука в Jquery

3 голосов
/ 30 июля 2010

Мне нужно синхронизировать текст и аудио на многих веб-страницах.

Во время воспроизведения звука текст должен выделяться по фразам (а не по словам или по символам, поэтому синхронизация необходима только для начала фразы).

Мне бы хотелосьне использовать флеш-решение, и я бы предпочел использовать что-то более дружественное к HTML.

Я подумал использовать комбинацию из двух плагинов:

Затем я мог бы написать скрипт jquery для циклического выполнения различных фраз.Первая проблема заключается в том, что JPlayer имеет только проигранные события в процентах, а не события с точной временной шкалой, поэтому мне нужно было бы разделить полный mp3-файл разговорного текста на более мелкие аудио-файлы для каждой фразы (требуется длительная работа по редактированию и управление предварительной загрузкой).

Есть ли лучшее решение для этого?Должен ли я вернуться к более простому полному решению SWF?

1 Ответ

3 голосов
/ 30 июля 2010

То, что вы могли бы сделать, это сценарий временной шкалы в JavaScript. Когда звук начинает воспроизводиться, вы устанавливаете тайм-ауты для каждого действия на временной шкале. Это потребует воспроизведения звука без каких-либо задержек.

Это будет выглядеть примерно так: 

   <div>one</div>
   <div>two</div>
   <div>three</div>

<script>
// this is the timeline
var actions = [  { time : 1, action : function() { $('div:eq(0)').css('color','red') } },
                 { time : 1.5, action : function() { $('div:eq(1)').css('color','green') } },
                 { time : 2, action : function() { $('div:eq(2)').css('color','blue') } } ];

$(document).ready( function() {
        // execute the timeline
        for( var i in actions ) {
            setTimeout( actions[i].action, actions[i].time * 1000 );
        }
});

</script>
...