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

Удалить все треки из «Мне нравится» в Яндекс.Музыке

Задача — очистить плейлист «Мне нравится» в Yandex.Music Пока не вижу вариантов кроме как написать скрипт для удаления каждого из треков. В коде вижу, что jQuery подключен.

Отслеживать
задан 14 авг 2023 в 9:04
Vasin Yuriy Vasin Yuriy
396 1 1 серебряный знак 19 19 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Можете попробовать вот так, у меня получилось

var tmtime = 0; for (var i = 0; i < 10000; i++) < tmtime = tmtime + 500; setTimeout(function()< jQuery(document).find('.d-track__delete').first().click(); >, tmtime); > 

Отслеживать
ответ дан 14 авг 2023 в 9:07
Julia Belova Julia Belova
34 5 5 бронзовых знаков
14 авг 2023 в 9:21

Спасибо @Julia Belova. Доработал ее ответ. Получился букамрклет, который можно сохранить в закладки — https://codepen.io/ink-jet/pen/MWzNyWd

Но выяснил, что функция реализована в расширении — YaMuTools, его использовать проще.

// Основано на https://dzen.ru/a/YisilaW0EVL0Utft // TODO: confirm PopUp $("#clone").click(function() < /* //console.group('intr') $('html,body').animate(,"slow") let intr = setInterval(function() < let el = document.querySelector(".page-playlist__tracks-list").querySelectorAll('.d-track__delete')[0] if (. el) clearInterval(intr) else el.click() console.info("Removing track. ") >, 512) //console.groupEnd('intr') */ // === https://minify-js.com/ === $('html,body').animate(,'slow');let intr=setInterval((function()),512); >) for (let i = 0; i < 6; i++) < function draw() < let k = i setTimeout(function() < let p = $(".page-playlist__tracks-list").find('.d-track__delete').first() p.clone().appendTo(p.parent()) >, 200*k) > draw() > $(document).on('click', '.d-track__delete', function () < $(this).remove() >);

     
Just drag&drop the link below to the bookmark bar to save Yandex.Music clear playlist script as bookmarklet
,'slow');let intr=setInterval((function()),512);">Yandex.Music Clear PL bookmarklet
 
 
 
Push me to test the script that helps to remove all tracks from Yandex Music 
 
 
This is a track delete emulation button like in Yandex.Music PL
 
 
Яндекск Музыка — удалить все треки из плейлиста.
 
Букмарклет в ссылке выше позволяет быстро удалить все треки из "Мне нравится" в Яндекс.Музыке.





 
Просто перетащите ссылку в панель закладок и пользуйтесь.
 
 
 
  

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

Яндекс Музыка регулярно радует пользователей улучшениями, поэтому даже за 2023 год можно насчитать минимум 5 крутых функций. Однако постоянные пользователи уже заметили, что стриминговый сервис давно не обновлял интерфейс, хотя ему бы это точно не помешало. Внимательные владельцы Айфонов обратили внимание на то, что в описании к обновлениям в App Store разработчики давно анонсировали большое обновление Яндекс Музыки. Оно уже вышло, а мы расскажем, как им пользоваться, если внезапно обнаружили новый интерфейс в давно знакомом приложении.

Яндекс Музыка круто обновилась. Вот как пользоваться новым приложением

Обновление Яндекс Музыки 2023

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

Новая иконка Яндекс Музыки выполнена в стиле Кинопоиска!

В Телеграм-канале Яндекс Музыки уже вовсю соревнуются пользователи, выкладывая мемы про новую иконку! Кстати, чтобы сделать новый ярлык у Яндекс Музыки, нужно перезагрузить Айфон.

Новая иконка Яндекс Музыки уже превратилась в мем!

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

Рекомендации теперь не будут путаться с новой музыкой, которая, возможно, вам не по вкусу

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

Новые релизы стало слушать намного проще, чем в старой версии

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

Новые функции Яндекс Музыки

Обратите внимание, что изменился и сам плеер в Яндекс Музыке. Если раньше в свернутом режиме он отображался в виде небольшой полоски снизу, то теперь это целая панель, напоминающая поисковую строку в Safari. Промахнуться мимо нее практически невозможно да и выглядит она намного органичнее за счет полупрозрачного фона.

Новый мини-плеер стал еще удобнее, чем в прошлой версии

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

Вкладки можно закрепить, чтобы не потерять

Но больше всего изменений претерпела Коллекция в Яндекс Музыке. Хотите вы того или нет, но теперь вам придется привыкать к новому оформлению. Во главе страницы раздел «Мне нравится», точнее, 12 последних треков, список с которыми можно свайпать вправо, а при необходимости открыть его целиком. Вот только в нем не предусмотрено ползунка для быстрого пролистывания, хотя в разделе «Скачанное» он есть.

В некоторых разделах почему-то нет ползунка для быстрого скроллинга списка

Все остальные разделы в Яндекс Музыке теперь размещены внизу в виде вкладок. Их можно закреплять в определенном порядке, чтобы не потерять — достаточно нажать на значок и нажать «Закрепить» или «Открепить». Лично я пока не могу привыкнуть, что от раздела со всеми треками было решено избавиться — по привычке захожу в «Скачанное».

В целом, получилось довольно круто, но местами непривычно — нужно время для адаптации. Новый интерфейс Яндекс Музыки — далеко не все, что приготовил сервис: после обновления Моя волна будет подбирать в три раза больше исполнителей и треков, чем если бы вы делали это вручную. Кстати, совсем скоро сервис традиционно подведет итоги года — не забудьте проверить, что вы слушали в 2023. На данный момент, это уже можно сделать в Apple Music — смотрите, как посмотреть личную статистику за нынешний год.

Как удалить песню из плейлиста в яндекс музыке?

Из чужого — никак. Из своего — наводишь мышь на трек, появляется, в том числе, значок «урны»

Фарит ШакуровЗнаток (359) 3 года назад

Почему у меня такой функции нет?

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Интегрируем Яндекс Музыку в Visual Studio Code

Представьте, что вы можете слушать свои любимые песни на Яндекс.Музыке, прямо из своего любимого редактора кода, не переключаясь между приложениями. Это уже не мечта, а реальность! В этой статье мы рассмотрим, как интегрировать Яндекс.Музыку в Visual Studio Code и наслаждаться любимой музыкой прямо во время работы.

• Обзор расширения
• API Яндекс Музыки
  • Авторизация
  • Плейлисты
    • Персональные плейлисты
    • Плейлист “Мне нравится”
    • Плейлисты пользователей
    • Создание очереди
    • Получение текущего проигрываемого трека
    • Основные компоненты
    • TreeView
    • Диалог подтверждения
    • Хранение паролей и настроек
    • Предыстория
    • Под капотом Microsoft Live Share Audio
    • Архитектура Electron
    • Воспроизведение трека
    • Загрузка Electron в рантайме

    Обзор расширения

    Перед тем перейти к описанию реализации давайте краем глаза взглянем на само расширение и его возможности.

    

    Я думаю, легко заметить, что левая панель по большому счёту просто повторяет реализацию главной страницы Яндекс Музыки. Здесь вам:

    • и персональные плейлисты
    • и ваши любимые песни и подкасты
    • и рекомендации
    • и поиск

    Подборки пока отсутствуют, но со временем и они должны появиться (если не хватает ещё чего-то — дайте знать ��).

    

    Конечно же, расширение — лишь урезанная версия Я.Музыки, поэтому вы можете быстро перейти к нужному треку, альбому или плейлисту с помощью кнопки “Открыть в браузере”.

    Не буду углубляться в детали, это всё-таки разбор реализации, а не демо. Если интересно поближе посмотреть на расширение — можете просто установить его.

    Как авторизоваться в расширении

    Есть два способа авторизоваться в расширении:

    

    • По токену
    • По логину и паролю

    Почему так? Яндекс постепенно уходит от авторизации по логину и паролю, ведь способ не очень безопасный, и всё меньше и меньше пользователей могут использовать данный способ. Если вы уверены, что ввели корректные данные, но всё равно видите данную ошибку, то вам стоит использовать второй вариант — вход с помощью токена.

    

    Существует 3 способа получить токен:

    1. С помощью расширения
       1. Для Google Chrome
       2. Для Firefox

       Оба браузерных расширения используют последний способ и просто перехватывают токен во время редиректа, поэтому вам нужно уже быть авторизованным в Яндекс.Музыке. Исходники всех способов собраны здесь в репозитории (спасибо Илье, что всё это дело собрал вместе).

       Самый простой способ — расширение для Хрома, установите его и нажмите на кнопку “Скопировать токен”.

       

       Теперь самое время взглянуть под капот. Реализация расширения будет состоять из 3-х частей:

       • Работа с API Яндекс Музыки
       • Разработка VS Code расширения, отображающее треки и плейлисты
       • Воспроизведение треков с помощью Electron

       API Яндекс Музыки

       Я думаю будет логично начать рассказ с базовой вещи, без которой это расширение не увидело бы свет — с API. Подробностей уже не помню, но мне кажется дело было так:

       • Погуглил, есть ли у Я.Музыки официальное API
       • Официального API нет, нашёл неофициальное API
       • К сожалению, библиотека заброшена, к тому же в ней отсутствуют нужные мне методы
       • Натыкаюсь на статью “Как я библиотеку для сервиса «Яндекс.Музыка» писал” и на библиотеку на питоне (Илья, если ты читаешь статью — Спасибо тебе, я не забыл про тебя!).
       • Начинаю самостоятельно писать клиент Яндекс.Музыки внутри расширения. Использую также как указано в статье HTTP Analyzer и виндовое приложение Яндекс Музыки.
       • Вручную пишу OpenAPI схему
       • Генерирую JavaScript-клиент yandex-music-client на основе OpenAPI схемы

       Работа над генерацией клиента всё ещё продолжается, и когда появится первая более-менее стабильная версия — я напишу отдельную статью.

       Теперь рассмотрим самые популярные методы.

       Авторизация

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

       Если для вашего аккаунта всё ещё работает вход по логину и паролю — используйте метод getToken как показано ниже, иначе — скопируйте токен с помощью Google Chrome Extension.

       import < getToken >from 'yandex-music-client/token'; import < YandexMusicClient >from 'yandex-music-client/YandexMusicClient' // Получение токена работает не для всех пользователей // Универсальный способ получения токена через Google Chrome Extension: // https://chrome.google.com/webstore/detail/yandex-music-token/lcbjeookjibfhjjopieifgjnhlegmkib const token = await getToken('your email', 'your password'); const client = new YandexMusicClient(< BASE: "https://api.music.yandex.net:443", HEADERS: < 'Authorization': `OAuth $`, >, >);

       Плейлисты

       Персональные плейлисты

       Большинство плейлистов, которые вы видите на главной странице, можно получить с помощью метода client.landing.getLandingBlocks (GET /landing3 )

       Есть разные типы лендинг блоков:

       • Например, чтобы получить плейлисты “плейлист дня”, “дежавю”, “премьера” и т.д. необходимо запросить блок типа personalplaylists — client.landing.getLandingBlocks(«personalplaylists»)
       • Плейлист с новинками — нужно запрашивать блок new-releases
       • Чарт Я.Музыки — chart
       • Новые плейлисты — new-playlists
       • Подкасты — podcasts
       • Интересно сейчас — promotions

       Можно получить сразу несколько блоков, указав их через запятую:

       client.landing.getLandingBlocks( "personalplaylists,promotions,new-releases,new-playlists,podcasts" )

       Именно такой запрос отправляет официальное приложение Яндекс.Музыки.

       

       Плейлист “Мне нравится”

       Все понравившиеся треки нужно получать в 2 захода:

       1. Получить идентификаторы понравившихся треков — (GET /users//likes/tracks )
       2. Получение треков по идентификаторам — (POST /tracks ). Идентификаторы должны выглядеть как строка “:”.

       Код будет выглядеть вот так:

       const result = await client.tracks.getLikedTracksIds(userId); const ids = result.result.library.tracks.map(track => `$:$`); const tracks = await client.tracks.getTracks(< "track-ids": ids >);

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

       Стоит упомянуть ещё несколько методов:

       • Лайкнуть трек — client.tracks.likeTracks (POST /users//likes/tracks/add-multiple )
       • Убрать лайк — client.tracks.removeLikedTracks (POST /users//likes/tracks/remove )
       • Список треков с дизлайками — client.tracks.getDislikedTracksIds (GET /users//likes/tracks/remove )

       Плейлисты пользователей

       Тут ничего интересного — просто перечислю существующие методы работы с плейлистами:

       • Создать плейлист — client.playlists.createPlaylist (POST /users//playlists/create )
       • Переименовать плейлист — client.playlists.renamePlaylist (POST /users//playlists//name )
       • Удалить плейлист — client.playlists.deletePlaylist (POST /users//playlists//delete )
       • Добавить/удалить треки из плейлиста — client.playlists.changePlaylistTracks (POST /users//playlists//change-relative )
       • Получить все плейлисты пользователя — client.playlists.getPlayLists (GET /users//playlists/list )
       • Получить плейлист по полю kind (такой идентификатор, уникальный внутри плейлистов пользователя, у других пользователей будут такие же айдишки) — client.playlists.getPlaylistById(userId, playlistKind) (GET /users//playlists/ )
       • Получить список плейлистов по kind , позволяет получить треки вместе с плейлистами, если передать rich-tracks как true — client.playlists.getUserPlaylistsByIds (GET /users//playlists )
       • Получить плейлист по kind — client.playlists.getPlaylistById (GET /users//playlists/ )

       Радио

       Методы работы с радио:

       • Получить информации о станции — client.rotor.getStationInfo (GET /rotor/station//info )
       • Получить треки для станции — client.rotor.getStationTracks (GET /rotor/station//tracks )
       • Получить списка радиостанций — client.rotor.getStationsList (GET /rotor/stations/list )
       • Получить рекомендации станций для текущего пользователя — client.rotor.getRotorStationsDashboard (GET /rotor/stations/dashboard )
       • Отправить фидбэк о событиях станции. Необходимо отправлять, когда включается радио и начинается/заканчивается/или пользователь пропускает трек — (GET /rotor/station//feedback )

       Если до этого, я просто перечислял запросы, то с радио всё сложнее. Тут мы остановимся поподробнее. Если мы включим HTTP Analyzer, и запустим радио в официальном виндовом приложении Я.Музыки (например “Моя волна” — user:anyourwave ) мы получим вот такую портянку запросов.

       

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

       

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

       В расширении пока реализовано только одно радио — Моя волна (исходники тут).

       

       Очереди

       Один из самых частых вопросов в чате по Яндекс.Музыке — как получить трек, который играет в данный момент. Мы уже шутили, что нужно интегрировать чат GPT, чтобы он отвечал на данный вопрос, но к сожалению он начал придумывать несуществующие методы. Так вот — получать текущий трек нужно именно на основе очередей.

       Создание очереди

       Очереди создаются при любом воспроизведении плейлиста, альбома или радио. Например, вот так происходит воспроизведение альбома.

       

       1. Получаем альбом с треками GET /albums//with-tracks
       2. Создание очереди POST /queue , куда мы передаём все треки из плейлиста
       3. Выставляем номер текущего трека — POST /queues//update-position?currentIndex=0

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

       

       и теперь могу продолжить слушать трек из браузера или со своего мобильного.

       

       Получение текущего проигрываемого трека

       Чтобы получить текущий проигрываемый трек, достаточно нескольких шагов:

       • Получить список очередей — client.queues.getQueues() (GET /queues)
       • Получить id последней воспроизводимой очереди — первая в массиве полученном на прошлом шаге.
       • Запросить эту очередь — client.queues.getQueueById() (GET /queues/)
       • Получить текущий трек в очереди — client.tracks.getTracks() (GET /tracks/)

       Код целиком будет выглядеть вот так:

       const < YandexMusicClient >= require('yandex-music-client'); const client = new YandexMusicClient(< BASE: "https://api.music.yandex.net:443", HEADERS: < 'Authorization': `OAuth `, >, >); client.queues .getQueues('os=unknown; os_version=unknown; manufacturer=unknown; model=unknown; clid=; device_id=unknown; uuid=unknown') .then(async () => < // Последняя проигрываемая очередь всегда в начале списка const currentQueue = await client.queues.getQueueById(result.queues[0].id); const = currentQueue.result; const currentTrackId = tracks[currentIndex ?? 0]; const currentTrack = (await client.tracks.getTracks(:$`]>)).result[0]; const supplement = await client.tracks.getTrackSupplement(currentTrack.id); console.log(JSON.stringify(supplement.result.lyrics.fullLyrics, null, 2)); >)

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

       Скачивание трека

       Никому не было бы интересно API, если бы не могли скачивать музыку, ведь это самое главное.

       Если вы используете библиотеку yandex-music-client, то для скачивания трека достаточно знать его id и использовать метод getTrackUrl. Но под капотом скачивание происходит вот так:

       

       Swagger и CORS

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

       В своём проекте с OpenAPI схемой я обхожу это ограничение с помощью proxy-сервера на NodeJS, но в этом случае некоторые запросы могут не работать из-за того, что proxy-server не находится в России.

       

       Если вы собираетесь писать своё приложение, в котором будет присутствовать бэкенд — то вы просто можете просто использовать yandex-music-client на бэке и, таким образом, не будет никаких проблем с крос-доменными запросами (но помните, что некоторые методы не доступны вне СНГ). Если вы пишите консольное приложение, телеграмм бота или мобильное приложение — то никаких проблем не будет, ведь CORS существует лишь в браузере.

       Разработка VS Code расширения

       Теперь, когда у нас есть API для Яндекс Музыки, мы можем всё это дело интегрировать в VS Code. Я не буду описывать всё очень подробно, поэтому, если вам интересна базовая структура расширений VS Code, можете почитать о ней здесь.

       Но есть одна из главных вещей, которую необходимо понимать. VS Code — обычное NodeJS приложение, поэтому вы можете использовать совершенно любые библиотеки, которые вы привыкли использовать, будь то axios для выполнения запросов или MobX для управления состоянием.

       Основные компоненты

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

       

       Создание большинства компонентов начинается с добавления так называемых contribution points. Все они описываются в package.json в поле contributes.

       

       Именно здесь необходимо определять:

       • Команды — что-то вроде обработчиков событий (contributes/commands)
       • Настройки вашего расширения (contributes/configuration)
       • Боковые панели и их содержимое (contributes/viewsContainers, contributes/views)
       • Горячие клавиши (contributes/keybindings)
       • Экшены для узлов дерева и контекстное меню (contributes/menus)

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

       TreeView

       Большая часть расширения представляет собой деревья с плейлистами, альбомами и треками. Прежде чем создать TreeView, необходимо определить соответствующий contribution point в package.json.

       

       Здесь мы определяем 4 дерева, которые будут использоваться в расширении:

       Далее для каждого дерева нужно определить data provider, который будет решать какие узлы необходимо отобразить в дереве. Для простоты возьмём дерево, отображающее Чарт.

       // Провайдер для Чарта Я.Музыки export class ChartTree implements vscode.TreeDataProvider  < constructor(private store: Store) < >getChildren(): vscode.ProviderResult  < // Каждый трек чарта рендерится как отдельный узел в дереве return this.store.getChart().then((items) => < return items.map((item) =>new ChartTreeItem(this.store, item, CHART_TRACKS_PLAYLIST_ID)); >); > > const api = new YandexMusicApi(); const store = new Store(api); // Создание провайдера const chartProvider = new ChartTree(store); // Создание дерева, объявленного во вью "yandex-music-chart" с провайдером chartProvider vscode.window.createTreeView("yandex-music-chart", < treeDataProvider: chartProvider >);

       Код немного упрощён, полную версию можно посмотреть тут и тут.

       Диалог подтверждения

       В VS Code есть альтернатива привычных нам alert/confirm, которые существуют в браузере (и которыми мы обычно не пользуемся) — window.showInformationMessage. Первым аргументом вы указываете сообщение, а затем передаёте сколько угодно кнопок.

       export async function showPrompt(title: string): Promise

       

       Хранение паролей и настроек

       VS Code предоставляет 2 возможности хранения данных, обе схожи с localStorage:

       • WorkspaceConfiguration
       • и SecretStorage

       Так как нам необходимо хранить пароли, то первый вариант нам не подходит. Все настройки хранятся в общем файле settings.json и доступны для любого расширения. Это именно те настройки VS Code, которые вы изменяете, чтобы настроить размер шрифта или темы.

       

       Мы же собираемся хранить токен авторизации, поэтому важно использовать именно второй вариант — SecretStorage. Хранится SecretStorage в контексте нашего расширения, который передаётся в метод activate, выполняющийся при запуске расширения. API такой же простой, как и API localStorage в браузере.

       

       Очень просто и понятно оба способа хранения настроек описаны в статье SecretStorage VSCode extension API. В ней же описывается тот же подход с реализацией класс-синглтона для настроек, который я использую в расширении.

       Воспроизведение музыки

       Предыстория

       Мы разобрались с получением и отображением треков и находимся на финишной прямой, теперь осталось самое главное — воспроизвести их. Кажется, что всё довольно просто — VS Code работает на электроне, значит мы легко сможем воспроизвести музыку, так же как и в браузере. Всё так, да немного не так, немного погуглив, я наткнулся на гитхаб ишью.

       

       В этом ишью есть две новости:

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

       После долгих поисков подходящего npm-пакета я нахожу play-sound. Но после недолгого использования я сразу же понимаю, что использовать этот пакет просто невозможно:

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

       Далее, я нахожу mplayer — обёртку для MPlayer, которая поддерживает все данные функции. Кажется, что всё гораздо лучше — но нет, через некоторое время использования я понимаю, что работает он ужасно:

       • Следующий трек воспроизводится с задержкой (библиотека не умеет в потоковое скачивание, поэтому трек необходимо полностью скачать, из-за чего происходит задержка)
       • Перемотка работает очень плохо, всё постоянно заедает
       • Из мелочей — у библиотеки нет тайпингов, их приходится писать руками

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

       Под капотом Microsoft Live Share Audio

       Все расширения в vscode находятся в /Users//.vscode/extensions и представляют собой обычное JavaScript приложение, где есть package.json и набор js файлов, которые можно изучать и даже дебажить. Интересующее нас расширение находится в папке ms-vsliveshare.vsliveshare-audio-0.1.93

       

       Как дебажить сторонние VS Code расширения

       На самом деле — всё очень просто. Открываете папку с нужным расширением в Vs Code, затем нажимаете F5 и выбираете “VS Code Extension Development” — готово.

       

       Немного подебажив исходники, несложно заметить, что расширение под капотом использует electron для совершения звонков с помощью Skype API. Для этого достаточно открыть файл ExternalAppCallingService — в котором одноимённый класс отвечает за запуск электрона.

       

       1. ./out/calling/externalApp/dist — путь к электрон приложению, с помощью которого будут осуществляться голосовые звонки
       2. При запуске электрона необходимо удалить переменные, которые устанавливает VS Code, чтобы запускаться в качестве NodeJS процесса. Нам не нужно, чтобы электрон запускался как NodeJS процесс, поэтому эти переменные нужно удалить, подробнее можно посмотреть вот в этом ишью.
       3. Непосредственный запуск электрона.

       Этот код показывает, как правильно запускать electron в качестве дочернего процесса vscode — это то, что нам нужно. Получается, чтобы воспроизвести музыку, нам нужно запустить электрон из электрона (VS Code тот же электрон).

       

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

       Архитектура Electron

       Теперь мы умеем запускать электрон — круто, теперь нам необходимо научиться воспроизводить треки, а для этого нужно понимать его архитектуру.

       Процесс электрона состоит из 2-х частей:

       

       • main — главная часть, в которой есть доступ к нативному API
       • renderer — часть в которой рендерится web-страница

       Взаимодействуют эти части с помощью межпроцессовых каналов коммуникации (inter process communication (IPC) channels) — ipcMain и ipcRenderer. По названиям очевидно, что:

       • Внутри main-процесса нужно использовать ipcMain
       • А внутри renderer-процесса — ipcRenderer (либо напрямую — небезопасно, либо через contextBridge — безопасно)

       Оба канала могут как отправлять, так и получать сообщения.

       Подробнее об архитектуре Electron можно почитать здесь, а о IPC-каналах здесь.

       Воспроизведение трека

       Для воспроизведения будем использоваться обычное Audio-API, поэтому здесь всё просто. Самая интересная часть — передача трека, который мы хотим воспроизвести, от VS Code в Renderer-процесс электрона. Передавать мы будем пейлоад следующего типа:

       export interface IPlayPayload

       Чтобы понять как это реализовать — давайте взглянем на диаграмму, сейчас нас интересуют лишь зелёные стрелки, начало процесса в VS Code extension ⇒ Store.

       

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

       • От Audio до Store, чтобы оповестить Store, что трек завершился
       • От Store до Audio, чтобы воспроизвести следующий трек

       При передаче данных от VS Code extension до Electron Process — необходимо их сериализовать в JSON, потому что между процессами мы не можем передавать JavaScript объекты.

       play(trackinfo?: IPlayPayload) < this.childProcess?.send(JSON.stringify(< command: "play", payload: trackinfo >)); >

       Загрузка Electron в рантайме

       Кажется можно уже радоваться, всё прекрасно работает, треки крутятся, а звёзды на гитхабе мутятся (нет!), но начали появляться ишью на гитхабе для мака и линукса.

       Изначально, я просто добавил electron, как зависимость к проекту и всё работало хорошо. Как оказалось, нужная версия электрона скачивается при установке npm пакетов, а я работал на винде и соответственно, расширение работало только на винде.

       Снова покопавшись в Live Share Audio, я обнаружил, что расширение cкачивает нужную версию электрона в рантайме с собственных серверов.

       

       Мне не хотелось хостить электрон для всевозможных версий, как это сделано в Live Share Audio, из-за чего приостановил работу над расширением.

       Мне не хотелось хостить электрон для всевозможных версий, как это сделано в Live Share Audio, из-за чего приостановил работу над расширением.

       Через некоторое время я понял, что если electron устанавливает необходимые бинарники в рантайме, то код скачивания должен быть где-то в их репозитории. Немного покопавшись, я нашёл пакет electron/get — именно он используется под капотом, когда вы устанавливаете электрон в зависимости. Также я нашёл почти готовый скрипт для установки нужной версии электрона в рантайме.

       Итог

       На этом всё. Спасибо, если смогли дочитать до самого конца, я думаю таких не много, статья получилась достаточно длинной. Если у вас есть какие-либо вопросы или предложения — обязательно пишите в личку или в комментариях. Буду признателен, если сможете поддержать проект любым способом:

       • Идеями в комментариях к статье или в ишью на гитхабе
       • Звёздочками на гитхабе
       • Отзывами в магазине расширений
       • Подпиской на мой телеграмм канал, где я рассказываю о программировании
       Похожие публикации:

       1. Как удалить анкету в дай винчике
       2. Как установить зрительные образы для проигрывателя windows media
       3. Какой компьютер нужен программисту
       4. Почему макбук не видит флешку