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

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

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



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

При планируемом будущем редизайне сайта и, возможно, будущих мобильных приложений, растровый waveform тут просто клином упирался. Он не адаптивен, его крайне ресурсоемко редизайнить, если он в растре.
Читать дальше →
[Перевод] Шпаргалка по Flexbox (CSS3 Flexible Box)

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

Подробнее
[Перевод] Адаптивный дизайн высоты

Возможно, вы думаете о том, почему я выбрал такой заголовок. Адаптивный дизайн высоты, серьезно? Ну, термин адаптивный...

Подробнее
Модальное окно на чистом CSS и JS

Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего...

Подробнее
Как вписать блоки в страницу или в контейнер? Используйте css grid

Я на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о...

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

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

Подробнее
как я осваивал iTunes в качестве музыкального плеера

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

Подробнее

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

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

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

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

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

https://t.me/tcsecms

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