Vkontakte API позволяет создавать интересные, интерактивные и популярные приложения. Встроенные средства монетизации позволяют приносить доход разработчикам приложений, начиная с первых дней запуска. У API имеется огромное количество различных методов - от получения личной информации пользователя до изменения его рейтинга и отправки смс. Рассморим пример работы с методом
audio.get и создадим простейший mp3 плеер, который будет проигрывать треки, которые вы добавили в "Мои Аудиозаписи". За основу возьмём плеер из урока
создание mp3 плеера с xml плейлистом.
Всю необходимую информацию и полнейшию документацию вы можете найти в группе №1 -
FLASH API. Там же находятся все новости и их обсуждения пользователями.
Страница с описанием метода
audio.get находится
здесь. Процитирую все параметры и описания сюда:
api_id (обязательный) - идентификатор приложения, присваивается при создании.
sig (обязательный) - подпись запроса по стандартной схеме.
v (обязательный) - версия API, текущая версия равна 2.0.
uid (необязательный) - id пользователя, которому принадлежат аудиозаписи. По умолчанию id текущего пользователя.
gid (необязательный) - id группы, которой принадлежат аудиозаписи. Если указан параметр gid, uid игнорируется.
aids (необязательный) - перечисленные через запятую id аудиозаписей, входящие в выборку по uid или gid.
need_user (необязательный) - если этот параметр равен 1, сервер возвратит базовую информацию о владельце аудиозаписей в структуре user (id, photo, name, name_gen).
format (необязательный) - формат возвращаемых данных – XML или JSON. По умолчанию XML.
test_mode (необязательный) - если этот параметр равен 1, разрешает тестовые запросы к данным приложения. При этом аутентификация не проводится и считается, что текущий пользователь – это автор приложения. Это позволяет тестировать приложение без загрузки его на сайт. По умолчанию 0.
РезультатВозвращает массив из объектов с аудиозаписями пользователя, каждый из которых имеет поля aid, owner_id, artist, title, duration, url. Если у аудиозаписи есть текст, возвращается идентификатор текста lyrics_id. owner_id равен id пользователя, если аудиозаписи принадлежат пользователю, или -id группы, если аудиозаписи принадлежат группе.
Особого внимания заслуживает параметр
sig, это "подпись" запроса, в которой передаётся серетный ключ приложения и все параметры. Для того, чтобы нельзя было их перехватить, используется md5 хэширование. Параметр sig равен md5 от конкатенации следующих строк:
viewer_id – id текущего пользователя, переданный SWF посредством flashvars при инициализации, пар "parameter_name=parameter_value", расположенных в порядке возрастания имени параметра (по алфавиту) и секрета приложения
api_secret.
Почему-то распостраненно мнение о том, что работать с вконтакте apa можно только при помощи actionscript 3. Это заблуждение, работать с api можно при помощи любой версии. Этот пример mp3 плеера будет на actionscript 2.
Итак, приступим к созданию плеера. В первом кадре сделаем простенький прелоадер. Так как плеер весит всего 11 кБ, я не вижу смысла показывать проценты при загрузке. Рекомендю вставить в кадр какую-нибудь анимацию, изображающую загруку и вставить в кадр код:
Stage.scaleMode = 'noScale';
stop(); // останавливаем ролик и ждём его полной загрузки
onEnterFrame = function() {
t = _root.getBytesTotal(); // полный вес swf ролика
l = _root.getBytesLoaded(); // загруженая часть (в байтах)
if (l==t) { // когда ролик загрузился полностью
gotoAndPlay(2); // переводим ролик на второй кадр
delete onEnterFrame; // и удаляем функцию
}
}
В моём примере второй и третий кадры пустые, они могут использованы в дальнейшем для проверки установил ли пользователь приложение и так далее. В четвёртом кадре находится код, который отправит запрос на скрипт vkontakte API (api.vkontakte.ru). Для формирования сигнатуры (sig) нам необходим алгоритм md5 хэширования. Для этого нужно создать экземпляр класса md5, который находится в файле md5.as и должен лежать в обной папке с флешкой. Код четвёртого кадра:
stop();
var m:md5 = new md5(); // экземпляр класса md5
api_id = 1694052; // номер, или id приложения
api_secret = '5HjCY7sRLA'; // секретный код приложения
method = 'audio.get'; // метод, который мы хотим вызвать
test_mode = 0; // при отладке можно поставить 1 и не приложение будет работать,
// даже не будучи загруженым на сервер
v = '2.0'; // версия API. В данный момент 2.0 - последняя версия
// формируем строку, от которой нужно получить md5 хэш
_sig = viewer_id+ 'api_id='+api_id+'method=audio.gettest_mode='+test_mode+'v=2.0'+api_secret;
sig = m.hash(_sig); // используем метод hash класса md5 и получаем сигнатуру
var sender:LoadVars = new LoadVars(); // Отправитель данных
var receiver:LoadVars = new LoadVars();// Получатель ответа
// Далее выполним запрос. Все переменные передадим прямо в адресной строке, методом GET
sender.sendAndLoad('http://api.vkontakte.ru/api.php?api_id='+api_id+'&sig='+sig+'&v='+v+'&test_mode='+test_mode+'&method='+method, receiver, "POST");// выполняем запрос
// опишем функцию, которая выполнится при загрузке данных
receiver.onData = function(text):Void {
xml = new XML(); // создаём экземпляр класса XML
xml.ignoreWhite = true;
xml.parseXML(text); // разбираем полученный ответ как xml документ
_root.gotoAndStop(5); // переводим фильм на 5-й кадр
}
Пример ответа от api vkontakte, который ам нужно будет распарсить:
<?xml version="1.0" encoding="utf-8"?>
<response list="true">
<audio>
<aid>60830458</aid>
<owner_id>1234</owner_id>
<artist>Unknown</artist>
<title>Bosco</title>
<duration>195</duration>
<url>httр://cs40.vkоntakte.ru/u06492/audio/2ce49d2b88.mp3</url>
</audio>
<audio>
<aid>59317035</aid>
<owner_id>1234</owner_id>
<artist>Mestre Barrao</artist>
<title>Sinhazinha</title>
<duration>234</duration>
<url>httр://cs510.vkоntakte.ru/u2082836/audio/d100f76cb84e.mp3</url>
</audio>
</response>
Код, который всё это аккуратно разложит по массивам, находится на пятом кадре.
stop();
xml = xml.firstChild.childNodes; // сохраним сюда данные из ноды response
// для удобной структуризации данных, полученых от вконтакте api,
// разложим информацию в несколько массивов:
artists = []; // массив с именами исполнителей
titles = []; // массив с названиями песен
durations = []; // массив с продолжительностью песен
urls = []; // массив для хранения ссылок на файлы
for (i in xml) { // переберём все элементы ответа
_audio = new XML(); // здесь будет новый xml, от <audio> до </audio>
_audio.ignoreWhite = true;
_audio.parseXML(xml[i]);
artists[i] = _audio.firstChild.childNodes[2].firstChild;
titles[i] = _audio.firstChild.childNodes[3].firstChild;
urls[i] = _audio.firstChild.childNodes[5].firstChild;
time = Number(String(_audio.firstChild.childNodes[4].firstChild));// время звучания песни в сеундах
min = Math.floor(time/60); // минуты
if (min<10) min = '0'+min;
sec = time%60; // секунды
if (sec<10) sec = '0'+sec; // если меньше 10, дописываем 0 впереди
durations[i] = min+':'+sec;
}
gotoAndStop(6);
Переводим фильм на 6-й кадр, с самим плеером. За основу взят урок
создание mp3 плеера с xml плейлистом, но здесь кое-что изменено. Не будем подробно останавливаться, если что-то непонятно - смотрите приведённый выше урок. Код:
stop();
current_time = '';
yy = 0; // эта переменная будет указывать координату по оси _y
// для следующего элемента при заполнении плейлиста
dif = 3; // расстояние по высоте между элементами в списке
/* в следующем цикле мы переберём все элементы xml,
полученого флешкой с помощью vkontakte API
со списком аудиозаписей пользователя */
for (i in xml) {
mc = _root.pl.container.attachMovie('item', 'item'+i, i);
// в клип-плейист добавляем мувиклип item из библиотеки
mc._y = yy; // назначаем его координату по оси y
yy += mc._height+dif; // пересчитываем координату следующего элемента
// определяем свойства клипа (название песни, с которой он связан
// продолжительность песни, порядковый номер элемента
mc.url = urls[i]; // ссылка на скачивание
mc.label = artists[i]+' - '+titles[i]; // исполнитель и название песни
mc.time = durations[i]; // время звучания песни
mc.i = i; // в каждый пункт списка пишем его номер
mc.playing = false; // значит, что текущая песня не является выбраной в данный момент
}
// здесь мы заончили формирование плейлиста с аудиозаписями
///////////////////////////
pl.container.setMask(pl.m); // применяем маску к клипу-плейлисту
// если список умещается в контейнер, то полоса прокрутки (скроллер) нам не нужен
// и его нужно скрыть
if (pl.container._height < pl.m._height) { // проверяем, сравниваем мувиклипы по высоте
scroll._visible = false;
}
scroll.bar.onPress = function() {
scroll.bar.startDrag(false, -5, 10, -5, scroll._height-scroll.bar._height -10);
scroll.onMouseMove = function () { // при движении курсора
pl.container._y = 0-((pl.container._height-pl.m._height+10) * scroll.bar._y / (scroll._height-scroll.bar._height -20));
}
}
scroll.bar.onRelease = scroll.bar.onReleaseOutside = function() {
scroll.bar.stopDrag();
}
////////////////
isPlaying = null;
function playSong(mp3) {
sound = new Sound();
sound.loadSound(urls[mp3], true); // вызываем метод loadSound
song_title = _root.pl.container['item'+mp3].label;
pl.container['item'+mp3].fon.gotoAndStop(3);
pl.container['item'+isPlaying].fon.gotoAndStop(1);
isPlaying = mp3;
// скрываем кнопку play, показываем кнопки pause и stop
play_but._visible = false;
pause_but._visible = true;
stop_but._visible = true;
sound.setVolume(vol.bar._width/vol._width * 100); // установим нужную громкость
// ставим шириниу индикатора загрузки mp3 равной 0
position.mp3_load._width = 0;
// точно то же для индикатора позиции mp3 файла
position.bar._width = 0;
}
// регулировка громкости
vol.onRelease = function() {
vol.bar._width = vol._xmouse;
sound.setVolume(vol._xmouse/vol._width * 100);
}
// изначально пользователь не видит кнопок play, pause и stop
play_but._visible = false;
pause_but._visible = false;
stop_but._visible = false;
// ставим шириниу индикатора загрузки mp3 равной 0
position.mp3_load._width = 0;
// точно то же для индикатора позиции mp3 файла
position.bar._width = 0;
// остановка воспроизведения (кнопка stop)
stop_but.onRelease = function() {
current_time = ''; // очищаем поле с отображением времени
song_title = ''; // очищаем поле с отображением названия текущей песни
sound.stop(); // останавливаем воспроизведение
// скрываем кнопки play, pause и stop
play_but._visible = false;
pause_but._visible = false;
stop_but._visible = false;
pl.container['item'+isPlaying].fon.gotoAndStop(1); // убираем "подсвечивание" песни в плейлисте
isPlaying = null; // отмечаем, что сейчас не играет не одна песня
position.mp3_load._width = 0;
position.bar._width = 0;
}
// пауза воспроизведения
pause_but.onRelease = function() {
pause_but._visible = false;
play_but._visible = true;
stop_pos = sound.position/1000;
sound.stop();
}
// продолжение воспроизведения (play)
play_but.onRelease = function() {
pause_but._visible = true; // показываем кнопку пауза
play_but._visible = false; // скрываем кнопку play
sound.start(stop_pos); // стартуем воспроизведение с позиции паузы
}
// функция, которая будет выполняться при каждой смене кадра (обновление позиции индикаторов)
onEnterFrame = function() {
if (isPlaying != null) { // если сейчас играет какая-либо песня
t = sound.getBytesTotal(); // получаем полный размер песни (в байтах)
l = sound.getBytesLoaded(); // число загруженых байт
// в зависимости от размера части загруженого mp3 трека, меняем ширину mp3_load
position.mp3_load._width = Math.round(l/t * position._width);
// также в зависимости от прогресса воспроизведения меняем ширину мувиклипа bar
position.bar._width = Math.round(sound.position/sound.duration * position._width);
min = Math.floor((sound.position/1000)/60);
sec = Math.floor((sound.position/1000)%60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0'+sec;
current_time = min+':'+sec;
}
}
// нажатие на бегунок Прогресс
position.onRelease = function() {
if (position._xmouse < position.mp3_load._width) { // если позиция, которую выбрал пользователь уже загружена
// то перематываем mp3 файл на нужное место
sound.start((sound.duration/1000) * position._xmouse/position._width );
}
}
Увидеть этот плеер в действии можно
здесь, скачать архив с исходником примера можно
отсюда. В архиве находится исходник, флешка и файл md5.as с классом md5. Для того, чтобы открыть исходник, вам понадобится Adobe Flash CS 3 или новее.