Как я могу выделить текст - строго по расписанию - а-ля караоке без Flash на веб-странице. Какой выбор технологии?

Question

Я хотел бы отобразить весь текст стихотворения, а затем выделить текст в соответствии с заранее установленной временной последовательностью.Что-то вроде караоке, но без какой-либо звуковой дорожки.Затем пользователь сможет прочитать его точно в «правильном» темпе.

Я полагаю, что могу сгенерировать дорожку субтитров (например, с чем-то вроде Aegisum - хотя на моем Mac это не работает) с данными синхронизации.Что-то построчно, например:

1 00: 00: 18,067 -> 00: 00: 20,067 Мерцание, мерцание, маленькая звезда

2 00: 00: 20,467 -> 00:00: 22,467 Как мне интересно, что вы

... или, еще лучше, слово или слог за один раз.

Я не хочу использовать Flash для iPad / iPhone.

Мой точный вопрос таков: я несколько наивен: какую технологию лучше всего использовать?Мне не нужно точное решение, просто несколько указаний на то, где я должен сосредоточить свои усилия.Есть ли у Timed Text в HTML5 (TTML) что-нибудь, что я мог бы использовать для этого?Или смайл?

Answer 1

Кто-то опубликовал сборку движка караоке в js: https://github.com/sk89q/ricekaraoke

Answer 2

Вы можете добиться эффекта караоке, используя библиотеку javascript от Mozilla под названием popcorn.js. Вы можете скачать ее с http://mozillapopcorn.org/

Вот учебник http://net.tutsplus.com/articles/news/a-look-at-popcorn/

Вот демонстрацияhttp://danharper.me/demo/a-look-at-popcorn/

Множество ссылок на связанную информацию внизу второй ссылки.

Answer 3

Вы можете использовать Javascript и CSS, чтобы выполнить то, что вы хотите.Вы можете обернуть каждое слово в промежуток, а затем применить стили к элементам промежутка в надлежащие интервалы времени.Если вы можете хранить информацию о времени, когда вы хотите выделить соответствующие слова, вы можете использовать setInterval для добавления стилей в соответствующее время.Если вы хотите использовать функции HTML5, вы можете использовать Canvas или SVG для включения более сложных анимаций.