Greasemonkey скрипт для скачивания музыки из Вконтакте

Привет. Давно я не появлялся, соскучились?:) Сегодня дам всем желающим скачать скрипт для скачивания музыки из вконтакте бесплатно. Идея скрипта родилась совершенно внезапно.

Мы сидели с девушкой и слушали музыку на вконтакте. Интернет работал нестабильно, поэтому мы захотели скачивать музыку на комп и слушать с него. Вспомнили что раньше был такой скрипт, который дорисовывал кнопочки "Save" ко всем трекам. Но потом он перестал работать, потому что изменился дизайн и вообще много чего изменилось на вконтакте.

Не долго думая, я наваял первую версию greasemonkey скрипта, который выполнял ту же задачу.

Скрипт скачивания музыки с вконтакте

Выглядит это дело после причесываний и применения моих дизайнерских талантов так:

Видим две составляющие. Во-первых, ссылки "DL" у каждой мелодии на странице. Если кликнуть по этой ссылке — браузер либо откроет музыкальный плеер и начнет играть мелодию, либо начнет скачивать файл. Если ваш браузер открывает медиа-плеер, а вам надо скачать — просто нажмите на эту ссылку правой кнопкой и нажмите "Сохранить объект как. ".

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

Второй элемент — это иконка ноты, появившаяся в шапке сайта. Если нажать на нее — появляются ссылки "DL" если их раньше не было. Это все ее функции, собственно.

Как установить скрипт

Установка простая, но скрипт требует наличия плагина Greasemonkey. Если он у вас уже есть — все отлично. Просто перетащите скрипт на окно браузера и подтвердите установку. Если грисманки у вас нет — установите. Это полезная штука.

После установки он сразу начнет работать.

Как работает скрипт

Для любознательных я опишу как скрипт устроен и работает. Ведь у меня тут блог про веб-разработку;) Кстати, я уже писал про greasemonkey-скрипты на этом блоге и давал один, которым пользуюсь до сих пор весьма успешно. Это скрипт выделения nofollow и noindex ссылок.

А сейчас поговорим про этот. Для начала, вот код.

Расскажу сначала идею. Ссылки для прослушивания файлов вконтакте доступны каждому залогиненому пользователю. Беда в том, что они зависят от сессий. То есть, пока сессия есть — ссылка работает и может быть открыта даже другим пользователем. Как сессия разрушается (пользователь выходит) — ссылка перестает работать. В этом одна из трудностей использования вконтакта в качестве медиа-сервера на своем сайте. А что, удобно было бы — музыка лежит там, ссылки получаешь, встраиваешь в свой сайт и играешь на нем. Ан нет.

Но мы-то выполняем JS будучи залогинеными! Так что ссылки у нас всегда есть. Осталось только найти их в коде и нарисовать ссылки на них в явном виде.

Трудности возникают из-за того, что вконтакт очень много чего грузит и обновляет аяксом. Поэтому ссылки могут пропадать или даже не рисоваться вообще. Чтобы обойти это можно пытаться ловить события окна, но проще сделать кнопку, которая делает означенное выше действие (поиск и отображение ссылок на музыку) по требованию. В конце концов, не всегда и не всем нужно видеть ссылки на скачивание, они довольно спецэфично выглядят.

Теперь по коду. Главная строчка в шапке greasemonkey — require. Она подключает jquery из репозитория Яндекса.

Дальше идет создание функции отладки GMlog. Если доступен объект console — его функция log становится доступна внутри GM-скрипта под именем GMlog. Эта функция просто выводит в консоль файрбага какие-то данные.

Дальше мы регистрируем функцию определения ссылок и рисования их в объекте окна, а не в локальном пространстве имен GM-скрипта.

А дальше мы определяем две функции. Одна — собственно нахождение музыки и отображение ссылок на скачивание. Вторая — рисование иконки в виде ноты.

Функция detect_audio делает следующее:

1. Находит и удаляет ссылки на скачивание музыки, если уже такие есть. Это нужно чтобы ссылки не плодились при повторном нажатии на кнопку.
2. Ищет все input, где id начинается с "audio_info" и перебирает их.
3. Для каждого такого элемента ищется значение атрибута value. Оно содержит ссылку на файл и какое-то число через запятую.
4. Поэтому мы разбиваем эту строку по запятой
5. И берем только первую часть.
6. Дальше формируем html-код ссылки, которую будем отображать.
7. И вставляем ее сразу после найденного input.

В общем, ничего сложного. Самый инетересный момент — это нахождение input с id, начинающимися с сaudio_info.

Функция true_load вообще не обязательна и сделана для красоты. Она делает вообще простую вещь. Если иконка еще не отображается — генерируется html-код этой иконки и вставляется в код страницы.

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

Второй момент — сама иконка. Я решил использовать иконку самого вконтакта. Но оказалось, что она является частью спрайта из двух иконок — знака плюс и ноты. Это был мой первый опыт работы со спрайтами) Ничего сложного на самом деле. Берем иконку, ставим ее в фон div-а и при помощи background-position добиваемся ее отображения.

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

Буду благодарен, если вы будете использовать этот скрипт и оставите свои отзывы и пожелания ниже. На вопросы тоже постараюсь ответить как можно оперативней. Еще, конечно, буду благодарен если поделитесь ссылкой на этот пост с друзьями вконтакте. Ну и подписывайтесь, не стесняйтесь, мне нравится писать GM-скрипты и я намерен раздавать их бесплатно. Не пропустите!