Адаптивный Waveform для вашего аудиосервиса

Скрипты и советы | 23 июля 2018

Уроки CSS на Хабрахабре, habrahabr.ru, Обработка изображений



Когда мне понадобилось для сайта одной радиопередачи наладить выкладку аудио архива, помимо админки нужен был еще и аудиоплеер. Радиопередача шла 40 минут плюс две музыкальные паузы. Использовать Waveform в таких длинных форматах особенно удобно, поэтому как и многие музыкальные сервисы, я решил использовать это решение в оформлении плеера.

При планируемом будущем редизайне сайта и, возможно, будущих мобильных приложений, растровый waveform тут просто клином упирался. Он не адаптивен, его крайне ресурсоемко редизайнить, если он в растре.
Читать дальше →
как я осваивал iTunes в качестве музыкального плеера

ктобы мог подумать, я всегда использовал для прослушивания музыки на ноуте максимально простой аудиоплеер, фаворитом...

Подробнее
[Перевод] Шпаргалка по Flexbox (CSS3 Flexible Box)

Мне не нова магия Flexbox, но я не часто ее использую, и поэтому после паузы в использовании мне приходится открывать...

Подробнее
Жизнь фронтендера в Spotify

Изображения — это, как правило, самая «тяжелая» статика в вебе. Многие фронтендеры знают об адаптивных изображениях,...

Подробнее
Маркетинг своими руками / 18 способов понравиться оптимизатору сайтов

Сайт это инструмент получения прибыли. И самый оптимальный инструмент заставить сайт приносить должную прибыль —...

Подробнее
[Из песочницы] Как я создал «визард» для WordPress от своей глубокой лени

Привет всем. Все мы любим автоматизацию процессов в нашей жизни. Я также не стал исключением. Ведь лень двигатель...

Подробнее
Оптимизируем производительность веб-страницы: CSS

В наше время скорость интернета довольно высока. Казалось бы, можно забыть о тех временах, когда нам приходилось ждать...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями