Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Жуэль

Дизайн декларативных АПИ

Опубликовали видос моего летнего доклада на Питер-ЦСС про декларативные АПИ (на английском):

Рассказываю о том, почему декларативные АПИ — это хорошо, и потом привожу в пример:

Тогда новый Жуэль-про ещё был в разработке, а сейчас его уже можно купить и использовать.

Ещё читайте «Как прошёл Питер-ЦСС» (офигенно). Большое спасибо организаторам!

Бесплатный Жуэль обновился до третьей версии

Жуэль

Недавно появился новый крутой платный Жуэль-про 3.0 с кастомными элементами управления. С тех пор он уже 3.0.4 — поправили несколько помарок.

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

Теперь Женя синхронизировал бесплатную и платную ветки. Бесплатная версия стала тоже 3.0.4, и теперь отличается от платной только поддержкой элементов управления. Все АПИ стали одинаковыми и работать стало лучше. Обновляйтесь!

2018   Жуэль

Жуэль-про

Жуэль-про

С недавних пор у меня в разделе миксов работают интерактивные плейлисты. Можно кликать в треки, и микс перемотается в нужное место, и наоборот: в плейлисте автоматически подсвечивается трек, который сейчас играет в миксе. Попробуйте.

Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.

Рассказываю.

Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП3-файл и дать ей класс jouele:

<a href="ilya-birman-use-me-mix.mp3" class="jouele">
  Илья Бирман: Юз ми
</a>

Но что, если рядом с плеером стоит обложка, и я хочу, чтобы микс начинал играть по клику в обложку? С Жуэлем-про это делается так:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
/>

Теперь в обложку можно кликать, и микс заиграет. И запаузится, если кликнуть ещё раз.

Если я хочу, чтобы в плейлисте можно было кликнуть на конкретный трек, и микс перемотался на его место, я делаю так:

<tr class="jouele-control"
  data-type="seek" data-to="0:45:38"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

Теперь клик в эту строчку таблицы будет перематывать микс куда надо.

Но это не главная прелесть. Я же ещё хочу, чтобы во время воспроизведения обложка выглядела активной. Для этого я просто пишу в ЦССе:

img.jouele-is-playing {
  outline: rgba(255, 255, 255, .2) 10px solid;
}

Всё! Жуэль-про сам даёт класс jouele-is-playing своим элементам управления во время воспроизведения, поэтому подсветка просто работает независимо от того, как именно я включил музыку — из плеера, обложкой или вообще клавиатурой. Мне снова не нужен Джаваскрипт.

И точно так же работает подсветка активной строчки в плейлисте. На самом деле ХТМЛ-код каждой строчки выглядит не так, как я показал выше, а вот так:

<tr class="jouele-control"
  data-type="seek" data-range="0:45:38...0:48:55"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

То есть строчка не только перематывает в определённую точку, но ещё и соответствует некоему отрезку. Чтобы она подсветилась, снова достаточно только ЦССа:

tr.jouele-is-within {
  background: rgba(255, 255, 255, .2);
  color: #fd0093;
}

Всё! Жуэль-про сам даёт класс jouele-is-within своим элементам управления, соответствующим диапазону, когда позиция воспроизведения находится внутри этого диапазона.

Я ещё хочу, чтобы у всех элементов, которые можно кликать или тащить, курсор мыши был пальчиком. Для этого я делаю так:

.jouele-is-interactive {
  cursor: pointer;
}

Если плееров на странице несколько, то элементы управления управляют тем, который играет или играл последним. А если такого ещё нет, то запустит первый на странице. Чтобы привязать к конкретному плееру, есть data-href:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
  data-href="ilya-birman-use-me-mix.mp3"
/>

На странице каждого микса у меня всегда один плеер, поэтому это там не нужно.

Жуэль-про стоит 1890 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.

Что посмотреть:

2018   Жуэль   продукты   проекты   релиз

Жуэль 2.3 доступен в НПМ

Новый Жуэль 2.3 теперь доступен в НПМ:

npm install ilyabirman-jouele

В отличие от сборки с моего сайта, версия в НПМе не содержит в себе Хоулер. Вместо этого он указан в качестве зависимости. Если вы делаете всё правильно, он подключится автоматически.

2017   Жуэль

Жуэль 2.3

Жуэль 2.2

Жуэль — нормальный аудиоплеер для веба. Его развитием занимается Женя Лазарев.

У нас вышла версия 2.3. Жуэль теперь использует Хоулер (встроен, а не идёт отдельным файлом) вместо Джейплеера. Благодаря этому изменению, трафик расходуется умнее, прелоудер работает точнее и ушло много мелких ошибок. Функция data-repeat стала работать у отдельных треков. Если файл недоступен, Жуэль показывает это, а не «висит». Вёрстка лучше смотрится в разных браузерах.

Пример песенки:

Документацию см. на Гитхабе.

Жуэль 2.2

Жуэль 2.2

Жуэль — нормальный аудиоплеер для веба. С прошлого лета его развитием занимается Женя Лазарев.

У нас вышла версия 2.2, и в ней появились плейлисты. Женя объясняет:

Все треки, которые лежат в одном блоке с классом jouele-playlist теперь будут играть друг за другом. Если добавить плейлисту атрибут data-repeat="true", этот плейлист будет играть бесконечно. Естественно, плейлистом можно сделать, в том числе, теги html и body.

В свежей бете Эгеи это используется. Я написал: «Если в заметке есть несколько аудиотреков, они будут играть друг за другом». Это реализовано как раз так, что заметки с аудиофайлами заворачиваются в плейлист. Пример — недавняя заметка про голосовые объявления в метро Стокгольма.

И ещё мы довели до ума управление пробелом. Женя продолжает:

Опции, связанные с пробелом, стали глобальными и управляются одним атрибутом data-space-control="true". Добавив его к любому плейлисту или треку, вы включите перехват нажатия пробела на всей странице. Если ничего не играет, заиграет последний игравший (или первый на странице) трек. Если что-то играет, оно остановится. При этом браузер не будет скроллить страницу, что он обычно делает при нажатии пробела.

Пробел по умолчанию не перехватывается, плейлисты тоже по умолчанию не включаются.

Потанцевать на радостях:

Документацию см. на Гитхабе.

Жуэль 2.1

Жуэль 2.1

Привет, с вами Дед Мороз!

Как вы знаете, у меня есть нормальный аудиоплеер для веба — Жуэль. С лета его развитием занимается Женя Лазарев.

У нас вышла версия 2.1. Теперь на странице всегда один экземпляр Джейплеера, сколько бы треков вы не ставили, поэтому адские аудиопростыни типа моего поста с голосовыми объявлениями лондонского метро не тормозят браузер. Ещё пробел теперь умеет останавливать трек и играть дальше (но только после того, как вы включили хоть какой-то трек мышкой).

Потанцевать на радостях:

Документацию см. на Гитхабе. Отдельное спасибо Саше Годун за перевод на английский.

Жуэль 2.0

Жуэль 2.0

Три года назад я сделал нормальный аудиоплеер для веба — Жуэль.

Женя Лазарев сделал версию 2.0. Плеер избавился от скеоморфизма и стал ещё приятнее на вид. И перекрасить его на свой вкус стало проще. Ещё у плеера теперь динамическая инициализация, и он стал правильным джейквери-плагином с АПИ (это всё типа значит хорошо). Я прикрутил его к сайту, в том числе к разделу «Музыка». Потанцевать на радостях:

Ссылки по теме:

Жуэль 0.6 и Эгея v2849

Недавно у людей перестал работать плеер Жуэль в Хроме. Я подложил в него более новую версию Джейплеера, и он заработал. Пропатченный Жуэль доступен для скачивания под номером версии 0.6.

Поскольку этот плеер встроен в Эгею, то её тоже пришлось обновить — в сборке v2849 лежит починенный. Для обновления достаточно заменить папку /system/library/jouele/.

2014   Жуэль   продукты   релиз   Эгея

Жуэль 0.5

Весной я выпустил свой красивый веб-плеер. Сегодня выложил версию 0.5:

  • дизайн изменился: полоса стала тоньше и переехала под строку с названием и временем, название выровнялось по левому краю, а время переехало в правый конец;
  • иконки стали векторными;
  • если положить плеер в контейнер с классом .jouele-option-progress-when-playing, то прогресс-бар будет отображаться только во время воспроизведения музыки (это удобно, если хочется поставить несколько треков подряд, тогда не будет чересполосицы прогрессбаров);
  • в вёрстке используется меньше элементов;
  • ещё какие-то мелкие мелочи.

Вот послушайте, например, мой последний микс «Сдвиг по фазе»:

Ещё я решил, что правильно будет всё-таки его произносить «Жуэль», а не «Жулё», так как всем это удобнее и склоняется.

Иконки в формате СВГ любезно «сверстал» Вадим Макеев. И пока делал их, написал целую статью о всяких хитростях, связанных с этим — читайте. Спасибо, Вадим!

Почему-то у меня нифига не работает в Опере. Если вы знаете, почему, расскажите, как починить, пожалуйста. Хром тоже непонятный. Иногда работает, иногда вдруг нет (видимо, от фазы Луны зависит, я не понял).

2012   дизайн   Жуэль   проекты