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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name           vk-get
// @namespace      http://vkontakte.ru
// @description    4>102;O5B AAK;:C "A:0G0BL" 25745 345 5ABL 0C48>70?8AL
// @include        http://vkontakte.ru/*
// @require        http://yandex.st/jquery/1.6.1/jquery.min.js
// ==/UserScript==
if(unsafeWindow.console){
   var GMlog = unsafeWindow.console.log;
}

unsafeWindow.detect_audio = detect_audio;


function detect_audio()	{
	$('.ifman_dl_link').remove();
	$('input[id*=audio_info]').each(function()	{
		var val = $(this).attr('value');
		var arr = val.split(',');
		var mp3 = arr[0];
		var html = '<a href="'+mp3+'" class="ifman_dl_link">DL</a>';
		$(this).after(html);
	});
}
function true_load()	{
	if($('ifman_tone').attr('rel')!='loaded')	{
		var btn = '<div id="ifman_tone" rel="loaded" style="background-image:url(http://vkontakte.ru/images/icons/audio_iconset.gif);
                height:11px;width:11px;background-position:bottom;position:absolute; top:15px; left:50%;cursor:pointer;"
                title="Показать ссылки для скачивания аудио" onclick="detect_audio()"></div>';
		$('#top_links').before(btn);	
	}
}
true_load();

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

Но мы-то выполняем 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-скрипты и я намерен раздавать их бесплатно. Не пропустите!