Предыстория
В 2012-2013 годах я нашёл одно онлайн-радио, которое «зацепило» меня большим выбором хорошей музыки и тем, что там (почти) не было рекламы.
По своей должности я — web-разработчик, да ещё интересуюсь различными технологиями и происходящим в науке, и посему у меня довольно часто открыто большое количество вкладок в браузере, а зачастую ещё и несколько профилей в браузере. А если ещё добавить к этому среду разработки, графический редактор, открытые папки, то хоть заводи навигатор по всем открытым окнам и вкладкам.
Музыка во вкладке в браузере у меня играла большую часть времени. Когда мне нужно было приостановить воспроизведение, чтобы ответить на звонок или посмотреть интересный видеоролик, приходилось сначала найти нужное окно браузера, потом — нужную вкладку и только после этого можно было нажать заветную кнопку паузы.
Такое происходило часто, и я всё чаще стал задаваться мыслью найти решение этой проблемы.
Недолго думая, решил написать расширение для браузера, которое позволяло бы с помощью горячих клавиш (в терминологии некоторых браузеров — быстрые клавиши) контролировать воспроизведение.
А ещё часто мне было интересно узнать исполнителя и название произведения, поэтому было решено добавить всплывающие оповещения с этой информацией.
Готовое расширение
Сегодня моё расширение позволяет контролировать воспроизведение уже на нескольких сайтах (SoundCloud, Digitally Imported, ВКонтакте, Одноклассники, Онлайн-радио 101.ru, VGM Radio), а также некоторые другие действия (добавлять текущий трек в плейлист, отмечать трек как понравившийся, изменять громкость звука). Делается это как с помощью быстрых клавиш, так и при помощи кнопок в оповещении (кнопки не отображаются в Opera).
Ещё есть (отключаемые) оповещения с информацией о треке при изменении статуса плеера либо по нажатию быстрых клавиш.
Также ведётся список десяти последних треков с возможностью поиска оных ВКонтакте, в Google и Amazon.
API
У расширения имеется API для добавления поддержки других сайтов.
Каждый сайт (плеер) добавляется как модуль. Имеются встроенные и внешние модули.
Встроенные модули
Встроенные модули являются частью моего расширения и их настройки доступны на странице параметров расширения. Для того, чтобы подключить модуль, пользователь должен дать расширению своё разрешение на доступ к вкладкам и содержанию страниц соответствующих доменов.
Внешние модули
Внешние модули являются отдельными расширениями, которые подсоединяются к моему расширению посредством API и имеют доступ ко всем возможностям моего расширения (управление плеерами посредством быстрых клавиш и кнопок в оповещении, а также список последних треков). Их настройки тоже доступны на странице параметров моего расширения.
Для чего нужны внешние модули
- Некоторые модули могут требовать доступ ко всем доменам (например, модуль для виджета SoundCloud на любых сайтах), и чтобы не пугать пользователя моего расширения запросом такого разрешения (чтобы сохранить доверие пользователя).
Такие модули могут получать это разрешение сразу при установке либо в любое другое время (на усмотрение разработчика). - Внешние модули позволяют сторонним разработчикам публиковать расширения под своим именем. Разработчики, которые хотят пополнить своё портфолио, вместо того, чтобы участвовать в чужом проекте, создают свой собственный проект.
Где найти API и как с ним работать
API доступен по лицензии MIT на GitHub (см. Ссылки ниже).
Написан он на ES5, чтобы понизить входной барьер для сторонних разработчиков, но это не должно остановить тех, кто хочет написать свой модуль на более современных спецификациях и технологиях.
Примеры использования API
Имеется: два внешних модуля (доступны в качестве отдельных расширений), а также один встроенный модуль, использующий API.
Встроенный или внешний модуль
Встроенный или внешний модуль? «… вот в чём вопрос», — как говорил классик.
Если вы хотите воспользоваться API и добавить поддержку нового плеера, воспользуйтесь следующими подсказками:
- встроенный модуль:
— ваш модуль поддерживает плеер только на одном или небольшом количестве доменов (например, модуль для youtube.com, модуль для play.google.com/music/listen);
— вас устроит упоминание о вашем вкладе на странице readme моего расширения и в социальных сетях; - внешний модуль:
— вы хотите опубликовать свой модуль под своим именем;
— ваш модуль требует доступ к содержанию страниц на большом количестве или всех доменах.
Ссылки
- Моё расширение.
- API (пока только на английском).
- Примеры использования API:
— встроенный модуль;
— внешние модули: раз, два.
Обратная связь
Вопросы, жалобы и предложения приветствуются. Оставляйте их в комментариях либо воспользуйтесь одним из других способов.
Комментарии (19)
Apathetic
20.07.2016 21:48Было бы интересно увидеть сравнение с аналогичными расширениями. Например, StreamKeys.
PoziWorld
20.07.2016 22:05StreamKeys — молодцы. Я о них узнал после того, как начал разрабатывать своё расширение. Они немного по-другому работают: у них нет оповещений и списка последних треков (это именно то, чего мне не хватало, для чего я изначально разработал своё расширение).
В чём они по-настоящему опережают моё расширение, так это в числе поддерживаемых плееров. Снимаю перед ними шляпу, как говорится.
Поэтому я и обращаюсь к сторонним разработчикам за помощью, потому что самому не хватает времени, чтобы добавить поддержку большего числа плееров.
svekl
20.07.2016 21:52Восхитительное расширение, огромное спасибо, ровно то, чего не хватало при прослушивании di.fm и его сородичей, оповещений, поставить на паузу хоткеем и поиск текущего трека вконтакте одной кнопкой.
А случаем не знаете, как хром заставить понимать медиа-клавиши?PoziWorld
20.07.2016 22:09Восхитительное расширение, огромное спасибо
Благодарю Вас за добрые слова! Очень приятно.
А случаем не знаете, как хром заставить понимать медиа-клавиши?
Хороший вопрос. У меня на одном компьютере клавиатура новее — её кнопки в Chrome поддерживаются. На другом старее — её кнопки не поддерживаются.
Если найду способ это исправить, я отпишусь.svekl
20.07.2016 23:06Попробуйте снести софт от производителя, судя по всему это проблема не только Logitech
https://bugs.chromium.org/p/chromium/issues/detail?id=405366
Romanych
21.07.2016 09:06Долгое время использую https://github.com/borismus/keysocket — свою работу делает хорошо. Список поддерживаемых сервисов очень большой. Автор плагина ищет кому передать во владение.
PoziWorld
21.07.2016 09:54Здорово, что есть альтернативы. Жалко, что проекты часто любительские и долго не живут…
Deliaz
21.07.2016 09:49В свое решал подобную задачу, однако основным источником музыки для меня являются радио и миксы на pdj.com
Мне достаточно было функционала для приоостановки и запуска музыки.
Собрал простейшее расширение playstop для Chrome.
Исходник имеется.PoziWorld
21.07.2016 09:52Учитывая доступность платформы, таких расширений становится всё больше и больше.
Вот если бы их все объединить под одной крышей для удобства пользователей…
Вы на ES5 писали?
DnAp
26.07.2016 14:53Прочитал заголовок и возникла мысль про путь создания универсального управления.
По факту у нас имеется 2 способа воспроизвести музыку это тег audio и AudioContext(web audio api).
Если с первым все достаточно просто по событию нужно найти тег audio во всех окнах, проверить играет он или нет и запаузить.
То AudioContext потребует заинжектиться на страницу раньше чем начался исполнятся ее код и подменить AudioContext на наш объект адаптер. После этого уже можно перехватывать управление на себя.
Конечно такой варварский способ скорее всего поломает ваш любимый плеер но с задачей поставить трек на паузу в любом плеере справится.
Если кто напишет такую штуку — напишите мне, я ее с удовольствием поставлю.PoziWorld
26.07.2016 17:36Это было бы так всё просто в идеальном мире. :)
Но мы живём в мире ином: многие до сих пор используют Flash-плееры, а другие пишут нестандартную логику.
ВКонтакте создаёт виртуальный тег audio (он на страницу не помещается, поэтому доступа к нему нет) для каждого трека.
У SoundCloud логика смены трека не совсем однозначная.
Логика вывода названия трека и исполнителя у каждого также написана по-своему.
Единственный из всех поддерживаемых моим расширением плеером, использующим тег audio, является VGM Radio.
С ним работа проста. Остальные требуют «костылей».
С AudioContext я не экспериментировал, потом попробую. Благодарю Вас за идею!
BlackMetal
Очень сомнительная расширяемость, а про работу только в одном браузере уже молчу.
PoziWorld
Что именно Вы имеете ввиду?
Почему один? Chrome, Opera, Яндекс.Браузер, Амиго и другие, построенные на движке Chromium.
Плюс Firefox всё ближе и ближе к тому, что расширения, разработанные для Chrome, будут работать и в нём.
Edge тоже переходит на светлую сторону.
BlackMetal
Имел ввиду поддержку плееров.
А наcчёт «ближе и ближе» — без портирования разработчиком всё-равно не обойтись, как и в данном случае.
PoziWorld
Прошу прощения, всё равно не понял, что Вы пытаетесь сказать.
Сделано это во многом для того, чтобы «подстегнуть» сторонних разработчиков к разработке их собственных модулей, которые они могут опубликовать под своим именем и занести себе в портфолио как небольшой, но всё же, проект, нежели быть просто контрибутором (участником, соавтором) в чьём-то проекте.
На самом деле, Firefox неплохими темпами движется. Просто это огромный труд для них.
Со временем будет общая «платформа» Web Extensions, которая будет поддерживаться основными браузерами одинаково (в идеале).