Разработка
Vitaly
1431

Yandex Music Controls — плагин для управления «Яндекс.Музыкой» из любой вкладки

Привет, TJ. Я Виталий Ризо, фронтенд-разработчик. Расскажу о своём плагине для Firefox, который позволяет управлять «Яндекс.Музыкой» из любой вкладки: переключать и перематывать треки, ставить «лайки» и «дизлайки» горячими клавишами, получать уведомления о песнях.

В закладки

В 2015 году я перешёл с музыки во «ВКонтакте» на Яндекс.Музыку. Подкупила возможность легально слушать музыку по доступной цене (тогда это стоило 169 ₽ в месяц, сейчас 149 ₽). А ещё «Яндекс» присылал открытки и стикеры на Новый год:

Мой рабочий день проходит в браузере, я пользуюсь Firefox. По работе мне приходится постоянно переключаться между аккаунтами в «Яндексе», и слушать музыку из-за этого было неудобно! Открываешь в одной вкладке аккаунт с купленной подпиской, а в другой рабочий аккаунт, возвращаешься во вкладку с «Музыкой» — страница обновляется, музыка перестаёт играть, подписка отключается.

Техническая поддержка не могла помочь, поэтому пришлось самому сделать плагин для переключения треков из «Яндекс.Музыки» в любой вкладке.

Как я делал и дорабатывал плагин

У меня не было опыта написания плагинов, но благодаря WebExtensions всё оказалось довольно просто. Любой разработчик может написать свой плагин на JavaScript.

Собрав на коленке первую версию, я отправил её в магазин дополнений Firefox Add-ons. Делал в первую очередь для себя, но оказалось, что людям такой плагин нужен. Кому интересно, вот ссылка на Гитхаб с исходным кодом.

Уже через месяц появилась первая сотня пользователей и первые положительные отзывы.

Каждый день плагином пользуются больше 600 человек

Испытатели плагина начали приносить пожелания по улучшению, так за три года в последующих версиях появились:

  • Дизайн по стайлгайдам от Mozilla — Photon Design System;
  • Горячие клавиши. Здесь Firefox расстроил некорректной поддержкой мультимедиа-клавиш, отсутствием глобальных комбинаций — они работают только, когда браузер в «фокусе»;
  • Уведомление о текущем треке. И здесь Firefox не позволяет настраивать ни длительность уведомления, ни его формат, ни добавить туда кнопок. В Chrome всё это давно уже есть;
  • Локализация. Оказалось, что «Яндекс.Музыка» бывает и на английском языке — ею пользуется 21% пользователей плагина;
  • Ненавязчивые уведомления об ограничениях и новых функциях. Например, плагин может работать криво, если открыто несколько вкладок с «Музыкой» — он не понимает, в какой вкладке менять треки. Я добавил подпись, чтобы пользователи были в курсе.

Как работает и что умеет

Для работы плагина нужно открыть вкладку «Яндекс.Музыки» или нажать на иконку плагина — после этого к вкладке можно не возвращаться. Всё управляется с кнопок на панели управления и горячих клавиш. Корректно работает как с обычными плейлистами, так и с «Яндекс.Радио» и «Немузыкой».

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

На странице настроек можно включить уведомления, когда начинается новая песня, но по умолчанию они отключены, чтобы не раздражать слушателей. Там же настраиваются комбинации клавиш — можно перенастроить по своему усмотрению.

⌘⌘⌘

Надеюсь, плагин для «Яндекс.Музыки» найдёт место в вашем Firefox. Скачать его можно в Firefox Add-ons. Рассказывайте, как вам и подписывайтесь на мой Твиттер.

Спасибо Александру Марфицину за помощь в подготовке статьи.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы рассказать свою историю.

Написать
{ "author_name": "Vitaly", "author_type": "self", "tags": ["\u044f\u043d\u0434\u0435\u043a\u0441","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","\u043f\u043b\u0430\u0433\u0438\u043d"], "comments": 48, "likes": 40, "favorites": 3, "is_advertisement": false, "subsite_label": "dev", "id": 100480, "is_wide": false, "is_ugc": true, "date": "Wed, 05 Jun 2019 18:33:06 +0300", "is_special": false }
Объявление на TJ
Спорт
Главные спортивные новости — ежедневные изменения в мире спорта, актуальная новостная повестка, интересные статьи. Из…
Подписаться
Подписан
Отписаться
0
{ "id": 100480, "author_id": 242758, "diff_limit": 1000, "urls": {"diff":"\/comments\/100480\/get","add":"\/comments\/100480\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/100480"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 232424, "last_count_and_date": null }
48 комментариев
Популярные
По порядку
Написать комментарий...
9

Пожалуйста, не забывайте прописывать #яндекс, чтобы черный список, который изобрел Ширяев, не был такой пустышкой.

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
–2

Не совсем круто, новость о банкротстве Яндекс многих порадует, но не все смогут увидеть об этом новость

Ответить
0

Оно работает не только с Яндекс Музыкой, но и с ВК, Youtube, SoundCloud.

Ответить
3

Слушать музыку в браузере

Мне ещё 32 гига памяти прикупить?

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

У меня 8 Гб, живу же как-то

Ответить
1

который позволяет управлять «Яндекс.Музыкой» из любой вкладки

Зачем?

Ответить
2

Комментарий удален по просьбе пользователя

Ответить
6

Не знаю как там на маках, а на винде в магазине есть нативное приложение Яндекс.Музыки. Благодаря этому музыкой можно управлять нажатием соответствующих клавиш на клавиатуре, не открывая никаких вкладок, расширений и прочего. В крайнем случае можно на клаве же изменить громкость и в открывшемся меню сделать всё, что те хочется

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
2

Ладно, убедил. Готов отдать тебе свой компуктер с Яндекс.Музыкой в обмен на мак. Чисто из гуманистических соображений

Ответить
2

Комментарий удален по просьбе пользователя

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
1

Охуенно, спасибо!

Ответить
1

Здорово, спасибо) Сам пользуюсь приложением: http://tutra.ru/app/yandex.radio/

Ответить
–2

Но ведь яндекс отдает ключи шифрования?!

Ответить
2

Комментарий удален по просьбе пользователя

Ответить
–1

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

Ответить
4

Комментарий удален по просьбе пользователя

Ответить
–2

Кажется, рунет проиграл войну Яндексу и теперь вот такие Виталии будут делать плагины на всё вплоть до пакетов для Яндекс.Шеф.

Ответить
2

Комментарий удален по просьбе пользователя

Ответить
0

А где тут претензия? Я не вижу, тыкни пальцем.

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

Ты не тупой, не огорчайся.

Это не претензия. Яндекс наоборот, молодцы, что порабощают рунет, не сильно-то претендуя начинать продаваться на Западе. А всё потому, что они-то понимают, что когда Россию снова куполом оградят, то они будут одними из немногих, кто приготовился заранее к подобному. Молодцы одним словом.

Ответить
1

Комментарий удален по просьбе пользователя

Ответить
0

Не придумывать, потому что даже у русской сверхрассы есть пределы терпению? Ну увидим, я не спешу например.

Ответить
0

Ох уж эти голландцы все предусмотрели, их то точно нахуй не пошлют!

Ответить
0

Ничего не понял.

Ответить
0

Ну типа Яндекс в Нидерландах зарегистрирован

Ответить
0

Если что-то куполом оградят, то нидерландская контора пойдет нахуй в первых рядах, я об этом.

Ответить
0

для фаерфокс.хм..дальновидно

Ответить
0

Поправь меня, не заглядввая нникуда пишу рейтинг браузеров с меньшего
Explorer
Mozila
Opera
Crome

Ответить
3

Комментарий удален по просьбе пользователя

Ответить
1

Статистика за год:

Chrome 66.21%
Firefox 9.59%
Internet Explorer 9.20%
Edge 4.57%
Safari 3.65%
Opera 1.60%
Sogou Explorer 1.46%
QQ 1.44%
Yandex 0.72%
UC Browser 0.50%

https://www.netmarketshare.com/

Ответить
1

Фига опера сосет, я бы все равно не стал делать ничего на мазилу. Слишком большой гандикап.
Експлореры и сафари они по умолчанию, думаю статистика тут кривая. Везде хром стоит

Ответить
1

Tor Browser основан на Firefox. Для некоторых - это интереснее.
IE стоит по умолчанию, но кто ими пользуется? Если только по работе с древними инструментами.
Safari много кто пользуется на маках. Зачем ставить другой браузер, когда стандартный хороший?

Ответить
0

Статистика за месяц

Chrome 66.75%
Firefox 9.85%
Internet Explorer 8.08%
Edge 5.45%
Safari 3.45%
Sogou Explorer 1.55%
Opera 1.54%
QQ 1.37%
Yandex 0.92%
UC Browser 0.38%

Ответить
0

Ну у тебя какой браузер?

Ответить
0

Последние пару месяцев доля файрфокса растет.

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

Я бы для хрома поставил, а ради этого на др браузер идти, не спасибо.

Ответить
–1

поставь тег яндекс

Ответить
Обсуждаемое
Новости
Путин поручил правительству регулярно исследовать поведение молодёжи в интернете
Президент также поручил начать создавать контент, направленный на духовно-нравственное воспитание.
Новости
Фигурант «московского дела» Айдар Губайдулин уехал из России. Он находится под подпиской о невыезде
Его обвинили в том, что он бросил в сторону силовика пластиковую бутылку.
Новости
Патриарх Кирилл назвал «греховной» либеральную идею: в её центре — человек, а не Бог
По мнению главы РПЦ, либерализм является формой отказа от власти.
Популярное за три дня
Новости
Патриарх Кирилл назвал «греховной» либеральную идею: в её центре — человек, а не Бог
По мнению главы РПЦ, либерализм является формой отказа от власти.
Истории
Пропускной режим, медведи и ядерные боеприпасы: жизнь в закрытом челябинском городе Снежинске
Быт и сложности жизни с дикими животными, колючей проволокой и заводом по изготовлению оружия массового поражения.
Интернет и мемы
Це pain

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovy", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfk" } } }, { "id": 6, "disable": true, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byswn", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "cndo", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223677-0", "render_to": "inpage_VI-223677-0-130073047", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=cndo&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudv", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "ccydt", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvc" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "chfbk", "p2": "gnwc" } } } ]