Караоке на HTML5 canvas

[kentilini]

Закрашивание текста, это только начало. В реализации веб караоке наибольшую трудность представляют:
1) Синхронизация закрашивания текста и музыки
2) Реализация для мобильных устройств и планшетов

Не сочтите за грубость, но проблем остаётся еще очень много

[and7ey]

Конечно. Пункт 1 реализован. Пункт 2 — на мобильных и планшетах работает, но с мобильными пока есть проблема с версткой.

[kentilini]

как вы делали синхронизацию на устройствах с низкой производительностью или fps?
по ключевым кадрам с пропуском анимации, или за счет ускорения оной?

[and7ey]

Пропуск анимации.

Сейчас вообще сделано достаточно примитивно. Если есть строка текста

[00:12.4]Ой <00:13.1>то <00:13.5>не <00:13.8>ве<00:14.2>чер <00:14.6>

то как только наступает время, соответствующее метке времени, весь предыдущий текст тут же закрашивается и начинается новая анимация. А анимация пока всегда идет с одинаковой скоростью (т.е. нет расчета скорости анимации в зависимости от разницы во времени между метками).

[kentilini]

Понятно. А что делаете если загрузка аудиодорожки происходит слишком медленно?

[and7ey]

Воспроизведение начинается лишь тогда, когда аудио полностью загружено.

[kentilini]

Здравое решение, мы как правило делили на какие-то логические единицы и загружали в фоне. Но это уже от потребностей.
Успехов, развивайте свой продукт.

[and7ey]

Спасибо! А можно ссылку на ваше решение?

[kentilini]

Это было 2 коммерческих видеоплеера с 2мя разными подходами, лупами и прочими плюшками. Код закрытый, так что не могу помочь.

[and7ey]

Меня скорее конечный результат интересовал, а не код. Но — ясно.

[random13]

мне кажется что все это легко укладывается в просто css + html, canvas здесь больше мешает чем работает

[and7ey]

В CSS чуть менее красиво :).
А так — это больше для изучения canvas было сделано.

Но чем мешает canvas? Отсутствием поддержки в старых браузерах? Производительностью? Или чем-то другим?

[Serator]

Так в CSS можно же сделать тоже самое, что и в примере на Canvas'е, хоть побуквенно, хоть попиксельно.

[and7ey]

Не могли бы вы показать попиксельный пример на CSS?

[Serator]

Эм, уже поздно и фантазия неахти, но, на вскидку, пара варианртов:
jsfiddle.net/vgo0bmdt/1/ — в теории, для всех браузеров.
jsfiddle.net/8bL5g0cm/ — для браузеров из мира Chrome'ых и иже с ними (более красивое решение).

Еще можно попробвоать функцию element(), которую пока только Firefox освоил. Можно попробовать функцию clip(), которую пока только Chrome'ые освоили. А еще есть SVG…