and7ey Jan 26 2015 at 09:49

Караоке на HTML5 canvas

2 min

12K

JavaScript*Canvas*Browsers

+17

Comments 15

kentilini Jan 26 2015 at 11:28

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

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

and7ey Jan 26 2015 at 12:07

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

kentilini Jan 26 2015 at 12:21

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

and7ey Jan 26 2015 at 13:17

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

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

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

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

kentilini Jan 26 2015 at 15:38

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

and7ey Jan 26 2015 at 17:16

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

kentilini Jan 26 2015 at 17:25

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

and7ey Jan 26 2015 at 17:25

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

kentilini Jan 26 2015 at 17:33

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

and7ey Jan 26 2015 at 17:35

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

random13 Jan 26 2015 at 12:46

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

and7ey Jan 26 2015 at 13:18

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

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

Serator Jan 27 2015 at 14:24

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

and7ey Jan 27 2015 at 19:15

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

Serator Jan 28 2015 at 00:57

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

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