MP3-плеер c XML-плейлистом

MP3-плеер c XML-плейлистом
Информация
Описание: 

Добрый день.

Сегодня я расскажу, как сделать простенький MP3-плеер.

Ну приступим...

Создаем новый файл АС3. И начинаем создавать графические элементы нашего плеера (я не буду тут указывать как это все делается вы должны это уже уметь, если не умеете, то это урок пока не для вас). Каждый пункт это отдельный слой:

1) фоновое изображение (у меня черный прямоугольник)

2) 3 динамических текстовых поля:

  • set_txt - для отображения % загрузки
  • time_txt - для отображения времени проигрывания трека
  • name_txt - для отображения названия трека

3) кнопки (как делать кнопки я уже писал тут:)

  • Prev_btn - предыдущий трек
  • Play_btn - играть трек
  • Pause_ btn - пауза ( эта кнопка должна находится над или под предыдущей кнопкой)
  • Stop_btn - Стоп
  • Next_btn - следующий трек

4) регулеровка звука

  • создаем 7 полосок размерами от 2х2 до 2х14 с растоянием между друг другом в 1 пиксель. должна получится "лесенка". Выделяем всю лесенку и делаем из нее Мувиклип volume_mc. Заходим в нутрь мувиклипа. Создаем новый слой идентичный нашей "лесенке" (проще скопировать кадр). Верхняя лесенка должна находится над ничжней в тех же координатах. У меня нижняя серого цвета, а верхняя белого. Делаем новый слой. На нем рисуем прямоугольник 20х14. Он должен закрыть полностью наши лесенки. Превращаем его в Мувиклип volumefill_mc. Делаем этот слой маской (правая клавиша по названию слоя --> Mask). Делаем новый слой. Нам нужен снова прямоугольник 20х14, но он должен быть прозрачным (это будет зона срабатывания мыши). Выходим на основную сцену.
  • делаем 2 кнопки offVolume_btn и onVolume_btn распологаем одну над другой.

5) рисуем полосу прогресса (у меня она длиной 200 это важно для кода). Превращаем ее в мувиклип progress_mc. Заходим в него. Выбираем полоску и превращаем ее в мувиклип status_mc (внутрь заходить не надо). Делаем новый слой. рисуем такуюже полоску и превращаем ее в мувиклип progressfill_mc. Делаем 3-й слой. и снова такую же полоску. Слой делаем маской. Возвращаемся на основную сцену.

* Все элементы делайте по своему вкусу. Главное помните что все имена элементов надо прописать в инстанс нейм иначе код не будет работать.

6) Делаем слой для скрипта и в первый кадр вводим:

var playlist:XML = new XML(); //создаем объект для работы с нашим плэйлистом XML ...
var loader:URLLoader = new URLLoader(); //этим будем загружать наш XML

var setPosition:int = 0; //здесь будем хранить позицию воспроизведения при нажатии паузы и т.п.
var soundObj:Sound = new Sound(); //наш основной объект для работы
var soundCha:SoundChannel = new SoundChannel(); //позволит управлять каналом воспроизведения
var soundTrans:SoundTransform = new SoundTransform(); //для звука и получания данных для аналийзера
var reqUrl:URLRequest = new URLRequest(); //для загрузки mp3 в объект Sound
this.progress_mc.status_mc.width = 0; //устанавливаем показатель уровня загрузки в 0
this.progress_mc.progressfill_mc.x = -200; //и показатель воспроизведения в позицию -200 что будет видется тоже как 0
var loaded:Number = 0; //для правильного просчитывания отображения места воспроизведения
var soundBytes:ByteArray = new ByteArray(); //для хранения данных о звуке
var arrayUrl:Array = new Array(); //массив для адресов mp3
var array:Array = new Array(); //для хранения преобразованных данных о звуке
var volumeP:Number = 1; //для хранения уровня громкости звука
var volumeS:Number = 1; //тоже
var track:int = 0; //номер текущего трэка для воспроизведения
var offmark:Boolean = false; //для кнопки MUTE

//события и слушатели. основа
function initPlayMp3():void {
Play_btn.addEventListener(MouseEvent.CLICK, startPlay); //присвоим реакцию на клик мышки нашим элементам интерфейса
Pause_btn.addEventListener(MouseEvent.CLICK, stopPlay);
volume_mc.addEventListener(MouseEvent.CLICK, volumePlay);
progress_mc.addEventListener(MouseEvent.CLICK, progressPlay);
offVolume_btn.addEventListener(MouseEvent.CLICK, offvolumePlay);
onVolume_btn.addEventListener(MouseEvent.CLICK, onvolumePlay);
Next_btn.addEventListener(MouseEvent.CLICK, nextTrack);
Prev_btn.addEventListener(MouseEvent.CLICK, prevTrack);
Stop_btn.addEventListener(MouseEvent.CLICK, fullStop);

loader.addEventListener(Event.COMPLETE, whenLoaded); //событие вызовется когда XML фал будет загружен
loader.load(new URLRequest("playlist.xml")); //а это адрес того что будем загружать

volume_mc.buttonMode = true; //определим свойсто для нужных нам клипов что бы при наведении на них курсор менялся на руку
progress_mc.buttonMode = true;

offVolume_btn.visible = false; //скроем кнопки которые не нужны
Pause_btn.visible = false;
}

//загрузка xml
function whenLoaded(event:Event):void { //если загрузка XML прошла успешно то в наш массив с адресами запишем все ее содержимое
playlist = XML(event.target.data);
for(var i:int = 0; i=0){ // определяем на какой трек нам переключаться
track--;
} else {
track = arrayUrl.length-1;
}
try { // пытаемся выполнить стоп и закрытие канала, если канал уже закрыт (загрузка закончилась) то оное вызовет ошибку и выполнение перейдет к catch
soundCha.stop();
soundObj.close();
} catch(e:Error){
soundCha.stop(); // просто остановим
}
PlaySound(); // и запустим воспроизведение нового трека
}

function fullTrack(event:Event):void{ // определяет новый трэк и переходит к нему
Play_btn.visible = false; // определяем какие кнопки управления должны быть видимыми а какие нет
Pause_btn.visible = true;
if((track+1)

7) создаем XML-файл playlist.xml у меня только 2 композиции, но вы можете сделать и больше.

<?xml version="1.0" encoding="utf-8"??>0.mp31.mp3

На этом все. Спасибо за внимание. Удачи

Комментарии

Аватар пользователя SarGun

Полезный урок, а главное, ПОНЯТНЫЙ!так держать !

goodgood

Аватар пользователя Aloran

Суда по соотношению просмотрено/откоментированно Это интересно только Сергею

lol

Который и так это знает, как делать плеер, лучше меня!!!!

Аватар пользователя vitkuz

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

Тогда и посмотрим на соотношение просмотрено/откомментированно...

Аватар пользователя Allidjan

Урок нужный а самое главное полезный

respekt

Аватар пользователя _dim_696969

ух как...спасибо! попробуим))

Аватар пользователя dakuna

да конечно я буду очень признателен если вы сделаете видеоурок по изготовлению флэшплеера

Аватар пользователя komatoz

Будет очень хорошо с видео уроком и конечно с вашим комментарием!!!

Аватар пользователя nadya.fd

Ах какая класссная идея - урок, как плеер сделать... Вот бы пояснения еще к Аction Script...

sorry

Аватар пользователя omaggot

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

Аватар пользователя nadya.fd

А тут можно задавать вопросы (тем кому все понятно :) ) ?

1." Делаем новый слой. Нам нужен снова прямоугольник 20х14, но он должен быть прозрачным (это будет зона срабатывания мыши). " - Это символ графика ? Иначе не понимаю как его сделать прозрачным 6(

2. У меня чего-то регулировка звука кривая получилась. Нажимаю в центре лесенки, центр становится беленьким (полоски до и после остались серыми), нажимаю чуть левее - еще пару полосок становиться белыми слева и справа от центральной, края по прежнему серые :(

3. Я немного не поняла пункт "рисуем полосу прогресса", там status_mc и progressfill_mc - это две одинаковые белые полосы? Если да, то где тогда рисуем длинную полосу, серую внутри и белую по краям ?

Спасибо.

Аватар пользователя nadya.fd

Omaggot, ну ты где?

Аватар пользователя nadya.fd

Неужели у меня таки трудные вопросы оказались ??? или здесь нельзя задавать вопросы??? А может я просто плохо объяснила ...

Напишите хоть чего-нибудь...

cray

Аватар пользователя Aloran

Ответы:

lol

1) Это простой прямоугольник. В меню цвета просто ставим заливку любого цвета и двигаем ползунок прозрачности в положение 0%

2) Надя пришлите фла файл на

я посмотрю и скажу в чем дело. Скорее всего вы маску не тем слоем сделали.

3) Нет одна из них у меня серая, другая белая. (мой недочет)))

Надюшь ну кто 9 мая флешит!!!!)))))))))))

Да и вот еще: Что тебе непонятно в скриптах? Я объясню.
А так у кого есть вопросы что означает то или иное действие в АС: Справочник

Аватар пользователя ЯSolnce

Да!!! Сделайте видеоурок, пожалуйста!!

help

Аватар пользователя omaggot

nadya.fd я здесь, просто не заглядывал на страницу, курсовои делал (во flash'е:) )

blush

я так понял что Aloran ответил на Ваши вопросы,
если вдруг понадоблюсь (мммм...) пишите

Удачи

Аватар пользователя nadya.fd

Ой! Пару дней отсутствовала, а тут уже столько ответов! Как замечательно! Спасибо всем кто откликнулся.

про 9 мая ... да, вы правы, Но уж больно урок интересный оказался, я и не удержалась :)

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

И еще возник вопрос:

volume_mc.volumefill_mc.width = (volumeP*100)/5; - Почему "5" ???
Там есть еще строчка, где тоже пятерка, думаю они обе по одной и той же причине, но пока не поняла по какой.

Omaggot, удачи на защите.

Аватар пользователя Aloran

Надюшь смотри:
Что такое VolumeP? Это переменная в которой мы храним уровень громкости!
Что такое volume_mc.volumefill_mc.width? Это ширина маски.
Допустим мы щелкнули на включении звука и уровень громкости был 100% (громкость изменяется от 0,0 до 1,0)
получается ширина маски будет ровняться 1*100/5 = 20 пикселям , т.е. наша шкала громкости (лесенка) отобразиться полностью (помнишь я говорил, что ее надо делать шириной в 20 пикселей). Допустим звук установлен в 50% ширина будет 0,5*100/5=10 пикселям и у нас окрасятся белым только половина лесенки.

Надеюсь понятно объяснил.

П.С.: И не надо обращаться ко мне на вы. Я ни так уж и стар))) мне всего скоро 27))))

Аватар пользователя nadya.fd

Спасибо! Помогло, все подправила (согласно своим размерам :) ). Теперь красиво работает.

П.С. Уговорил, не буду больше на ВЫ. Тем более мы ровестники выходит.

Аватар пользователя zeliboba

Спасибо за урок , только не понял куда ставить адрес плейлиста (вместо какого слова-new URLLoader или просто new, а если то new, то в обех строках или в одной?)

Аватар пользователя rate95

а как делать мувиклип?

а, всё понял, спасибо=))))

yahoo

извините а для полосок громкости надо отдельный слой или нет?

и ещё: как это всё сохранять и открывать?

smiles

Аватар пользователя Fly
Цитата: rate95

а как делать мувиклип?

а, всё понял, спасибо=)))) yahoo

извините а для полосок громкости надо отдельный слой или нет?

и ещё: как это всё сохранять и открывать? smiles

Я бы Вам для начала советовал ознакомиться с курсом: http://disk.easyflash.org/magazin/easyflash

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя Aloran
Цитата: zeliboba

Спасибо за урок , только не понял куда ставить адрес плейлиста (вместо какого слова-new URLLoader или просто new, а если то new, то в обех строках или в одной?)

Вот строчка добавления плей листа
loader.load(new URLRequest("playlist.xml"));

Цитата: rate95

а как делать мувиклип?

F8

Цитата: rate95

извините а для полосок громкости надо отдельный слой или нет?

Читайте внимательнее там все написано.

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

Аватар пользователя Velter

Извините, я не до конца все понял! Сделал все как тут написано, но выдает 27 ошибок в скрипте!
Если у вас есть готовый, рабочий исходник, вышлите мне на

Буду очень презнателен

Аватар пользователя bobik9000

как исправить глюк?
когда нажимаешь паузу потом следующую песню она начинается не сначала

Аватар пользователя rb

Velter,
У меня такой же глюк был но я adobe flash установил и все.

Velter,
Macromedia flash - это фигня

Аватар пользователя Lemonadnый_Jo

Афигенски ! прям то, что я искал )

 

P.S.

Тока  вот в конце  надо из урока затереть bb теги )):

[code=xml]<?xml version="1.0" encoding="utf-8"?>
<playlist>
  <url>0.mp3</url>
  <url>1.mp3</url>
</playlist>[/code]


А то я долго искал причину ошибок ).

Аватар пользователя Aloran

они фиг знает как влезли))) Ничего полезно иногда)))) А то привыкли все подрят копировать, а так хоть голову поломаете)))

Аватар пользователя Fly

Они влезли потому что не было парсера исходного кода.

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя in5ane2

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

object
param name=mp3file value=./mp3/1.mp3
object

и что необходимо сделать во флеше спасибо

Аватар пользователя kabelsea

Блин, спасибо )))

Страницы