Комментарии 15
Закрашивание текста, это только начало. В реализации веб караоке наибольшую трудность представляют:
1) Синхронизация закрашивания текста и музыки
2) Реализация для мобильных устройств и планшетов
Не сочтите за грубость, но проблем остаётся еще очень много
1) Синхронизация закрашивания текста и музыки
2) Реализация для мобильных устройств и планшетов
Не сочтите за грубость, но проблем остаётся еще очень много
Конечно. Пункт 1 реализован. Пункт 2 — на мобильных и планшетах работает, но с мобильными пока есть проблема с версткой.
как вы делали синхронизацию на устройствах с низкой производительностью или fps?
по ключевым кадрам с пропуском анимации, или за счет ускорения оной?
по ключевым кадрам с пропуском анимации, или за счет ускорения оной?
Пропуск анимации.
Сейчас вообще сделано достаточно примитивно. Если есть строка текста
то как только наступает время, соответствующее метке времени, весь предыдущий текст тут же закрашивается и начинается новая анимация. А анимация пока всегда идет с одинаковой скоростью (т.е. нет расчета скорости анимации в зависимости от разницы во времени между метками).
Сейчас вообще сделано достаточно примитивно. Если есть строка текста
[00:12.4]Ой <00:13.1>то <00:13.5>не <00:13.8>ве<00:14.2>чер <00:14.6>
то как только наступает время, соответствующее метке времени, весь предыдущий текст тут же закрашивается и начинается новая анимация. А анимация пока всегда идет с одинаковой скоростью (т.е. нет расчета скорости анимации в зависимости от разницы во времени между метками).
Понятно. А что делаете если загрузка аудиодорожки происходит слишком медленно?
мне кажется что все это легко укладывается в просто css + html, canvas здесь больше мешает чем работает
В CSS чуть менее красиво :).
А так — это больше для изучения canvas было сделано.
Но чем мешает canvas? Отсутствием поддержки в старых браузерах? Производительностью? Или чем-то другим?
А так — это больше для изучения canvas было сделано.
Но чем мешает canvas? Отсутствием поддержки в старых браузерах? Производительностью? Или чем-то другим?
Так в CSS можно же сделать тоже самое, что и в примере на Canvas'е, хоть побуквенно, хоть попиксельно.
Не могли бы вы показать попиксельный пример на CSS?
Эм, уже поздно и фантазия неахти, но, на вскидку, пара варианртов:
jsfiddle.net/vgo0bmdt/1/ — в теории, для всех браузеров.
jsfiddle.net/8bL5g0cm/ — для браузеров из мира Chrome'ых и иже с ними (более красивое решение).
Еще можно попробвоать функцию element(), которую пока только Firefox освоил. Можно попробовать функцию clip(), которую пока только Chrome'ые освоили. А еще есть SVG…
jsfiddle.net/vgo0bmdt/1/ — в теории, для всех браузеров.
jsfiddle.net/8bL5g0cm/ — для браузеров из мира Chrome'ых и иже с ними (более красивое решение).
Еще можно попробвоать функцию element(), которую пока только Firefox освоил. Можно попробовать функцию clip(), которую пока только Chrome'ые освоили. А еще есть SVG…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Караоке на HTML5 canvas