Flash Mp3 Player

Adobe Flash » Flash

accorp   трудност:    видян: 24029

Сега е време да направим едно динамично текстово поле в което ще запишем името на изпълнителя и песента. Направете си текстовото поле с нужната дължина, шрифт и цвят и му сложете Instance Name – info_txt. Сега ще направим фунция, която ще чете ID3 таговете на песните, затова се погрижете те да са попълнени, ще ви спести ядове. Не забравяйте, че за да прочетем таговете трябва използваме събитието onID3, което от своя страна няма да работи, ако няма loadSound или attachSound действия. Нека да опишем и събитието:
my_snd.onID3 = function(){
artistName = my_snd.id3.artist;
trackName = my_snd.id3.songname;
info_txt.text = artistName+" - "+trackName;
}
Адресираме аудио променливата my_snd и щом достъпа до ID3 таговете е възможен ще се извършат действията в блока. Та, на първия ред от блока правим една променлива artistName, в която записваме id3 свойстовото от звука – artist, т.е. името на изпълнителя, но от тага ID3v2. Аналогично и за втората променлива, но използваме свойството songname, т.е. името на песента. На последния ред от блока адресираме динамичното текстово поле и избираме свойстово text, т.е текста в полето. Виждате двете променливи и в добавка +” – “+. Това добавя интервал, тире, интервал между двете променливи, т.е. ако имате:
artistName = ATB;
trackName = Ecstasy;
в текстово поле ще се отпечата:
ATB – Ecstasy
И толкова за полето. Само в добавка да кажа, че при спиране на звука с бутона текста в полето остава и ако искате това да се промени просто в блока за спиране добавете:
info_txt.text = “ “;

Сега е време за малко по-различна задача. Ако сте тествали флашката до сега сигурно се се убедили, че бутоните се уцелват много трудно. Отворете някой от бутоните и направете нов слой, кръстете го Hit. Това ще нашата площ, която физически ще се натиска. Нарисувайте едно правоъгълниче без рамка и изберете alpha = 0.



Сега ако тествате ще се убеите, че бутона се натиска значително по-акуратно. Повторете процедурата за всички бутони.

Време е да направим регулатор за силата на звука. Направете една хоризонтална линия и тъй като стойностите на setVolume са от 0 до 100 направете линията дължа 100px. Направете го Movie Clip (Modify --> Conver to symbol.. или бърз бутон F8). Сложете му Instane Name – volume_mc и задължително изберете Registration Point да е посредата в ляво.



Натиснете два пъти върху него за да влезете в Edit Mode, направете нов слой и там нарисувайте някаква форма, която ще използваме за плъзгач. Направете и формичката Movie Clip. Сложете Registration Point в средата:



След това центрирайте slider_mc хоризонтално и го сложете там където искате, например – сложете го някъде по средата на линията и силата на звука ще е около 50% и сложете Instance Name – slider_mc.

Върнете се обратно на Сцената и да добавим малко код на слоя actions. Но преди да пристъпим към добавянето на кода, намерете частта в която декларирахме силата на звука и я изтрийте.
volume_mc.slider_mc.onPress = function() {
this.startDrag(false, 0, this._y, 100, this._y);
this.onEnterFrame = function() {
my_snd.setVolume(Math.floor(this._x));
}
}
Адресираме плъзгаче, който е в volume_mc и избираме събитието при натискане (забележете - само натискане, без отпускане). Когато това стане с курсора започва, така нареченото “влачене” на slider_mc. Няма да се впускам в подрбности, само ще кажа, че параметрите в скобите указват за „влаченето”, че става само по хоризонтала и то от 0 до 100 пиксела, колкото е дълъг и нашия volume_mc (линията). За да е по-сигурна настройката на звука използваме събитието onEnterFrame – фрейма е само 1, но по този начин натройката на сила на звука ще стане динамично с „влаченето” на slider_mc.
Сега да сложим и фунцията при отпускане на slider_mc:
volume_mc.slider_mc.onRelease = function() {
this.stopDrag();
delete this.onEnterFrame;
}
Щом това стане (отпускането) „валченето” спира и „почиства”.
Остана още едно събитие:
volume_mc.slider_mc.onReleaseOutside = function(){
this.stopDrag();
delete this.onEnterFrame;
}
Тъй катто площа на slider_mc е малка е напълно възможно курсора докато „влачи” да излезе от площа му. Ако случайно това стане – ефекта ще е същия както при отпускане на slider_mc. Тук можете да спестите писане и просто да опишете двете събития като едно:
volume_mc.slider_mc.onRelease = volume_mc.slider_mc.onReleaseOutside = function(){
this.stopDrag();
delete this.onEnterFrame;
}

Ако тествате плеъра локално ще едва ли ще забележите нещо съмнително. Но може да се окаvе, че качен на сървър плеъра не работи добре. Това е така, защото след натискане на бутон „плей” не знаем дали песента се зарежда изобщо или каква част от нея се е възпроизвела. Остава да добавим и това – на Сцената, на слоя buttons направете две динамични текстови полета с Instance Name - displayDuration_txt и displayPosition_txt. В полето displayDuration_txt ще покажем продължителността на песента със свойството duration. Но при стрийм песни всъщност duration не знае колко дълга е песента докато тя не се е заредила напълно. Затова чрез getBytesLoaded и getBytesTotal ще разберем кога се е заредила напълно и ще разделим това показване на две части – първата, когато песента не се е заредила все още streaming:... и когато се зареди – duration:....
В полето displayPosition_txt ще впишем текущата позици на песента. Ето как трябва да изглеждат настройките на полето:



Разбира се, можете да промените шрифт, големина на буквите, цвят...
След като вече имаме полетата, трябва да напишем и 3 фунции – първата фунция ще ни показва каква част е заредена и щом се зареди ще покаже цялата дължина. Втората фунция ще показва текущата позиция на песента, а третата фунция ще оформи начина на показване на двете фунции – техния формат. Ако си спомняте, duration и position връщат стойност в милисекунди, което всъщност не ни върши работа.
Та, нека разгледаме следващата фунция:
function displayStreaming(theSource:Object):Void {
if (theSource.duration>0) {
if (theSource.getBytesLoaded() == theSource.getBytesTotal()) {
clearInterval(streamingID);
displayDuration_txt.text = "duration: "+formatTime(theSource.duration);
} else {
displayDuration_txt.text = "streaming: "+formatTime(theSource.duration);
}
}
}
Интересното тук е, че изплзваме параметър дефиниран в самата фунция и управляван от действията в блока. Ако си спомнете можехме да използваме фунция за друг параметър, следователно ако използваме фунцията за нашата аудио променлива my_snd, всъщност my_snd ще замести параметъра в случая theSource. Просто се абстрахирайте и приемете, че става въпрос за my_snd. Няма да се впускам в подробности, само ще спомена основното. На вид объркания код проверява дали песента се е заредила напълно (theSource.getBytesLoaded() == theSource.getBytesTotal()) и ако това е така (т.е. true) то тогава изписва в полето displayDuration_txt текста „duration: и тук стойността”. Виждате, че стойността се оформя от фунцията formatTime() която ще напишем малко по-късно. В случай, че песента не е заредена, тогава в полето ще се изпише „streaming: и тук стойността”. Също с formatTime() ще определим формата на тази стойност. Друго важно нещо тук е, че ще използваме тези фунции със setInterval(), така че добра идея тук е да се „почиства” този интервал за да няма натрупвания (clearInterval(streamingID)). Ще зададем във фунцията за пускане на песента да постави интервала за този streamingID с нашата променлива my_snd, но това по-късно.

Другата фунция е за показване на текущата позиция:
function displayPosition(theSource:Object):Void {
if (theSource.position>0) {
if (theSource.position == theSource.duration) {
clearInterval(playingID);
displayPosition_txt.text = "completed: "+formatTime(theSource.position);
} else {
displayPosition_txt.text = "position: "+formatTime(theSource.position);
}
}
}
Също както при горната фунция ще разделим показването на две части. Едната част, когато песента е възпроизведена, т.е. theSource.position == theSource.duration, в полето ще се изпише „completed: тук позицията”, която позиция също е оформена от фунцията formatTime(). Другата, част от фунцията изписва в полето „position: тук позицията”, която позиция е текуща и отново оформена, чрез formatTime(). И тук имаме изичестване на интервал, само че на интервала playingID, който ще поставим във фунцията playTrack().

Време е и за фунцията formatTime:
function formatTime(theSource:Number):String {
var elapsedTime = theSource;
var elapsedM = Math.floor(elapsedTime/60000);
var remaining = elapsedTime-(elapsedM*60000);
if (elapsedM<10) {
elapsedM = "0"+elapsedM;
}
var elapsedS = Math.floor(remaining/1000);
remaining -= (elapsedS*1000);
if (elapsedS<10) {
elapsedS = "0"+elapsedS;
}
var outputData:String = elapsedM+":"+elapsedS;
return outputData;
}
Забележте, че и тук параметъра е един и същ, както при горните две фунции. По този начин, фунциите лесно ще си „подават” параметъра, когато поставим интервала. Единствената разлика е, че тук параметъра е представен като число. Няма да ви обърквам с твърде много обяснения – на кратко. Първо присвояваме на променливата elapsedTime стойността на параметъра, за да можем да оперираме с него. За да не работим директно с my_snd, а и както сами се досещате тази фунция не влияе на my_snd. Както в горните фунции, добра тактика ще е да разделим стойността на две части – минути и секунди. Виждате една стойност elapsedM – това са минутите, които взимаме от параметъра. Не забравяйте, че тези стойности са в минисекунди, следователно минути ще получим като първо разделим на 1000, получваме секунди и след това на 60 – минути. Ако имаме 30000 милисекунди --> делим на 1000 --> 30 секунди --> делим на 60 и получваме 0,30 минути. Трябва да изведем само цялата част, тъй като за секунди ще използваме друга променлива. Тук се намесва и Math.floor(), който ще отдели само цялата част и получаваме 0,30 = 0 минути. Аналогично е положението с elapsedS, която променлива ще изведе секундите. Само че при нея делим само на 1000 и от милисекунди получваме секудни. Наример, горните 30000 милисекунди --> делим на 1000 и получаваме 30 секунди. Отново прибягваме до Math.floor() тъй като милисекундите могат да са от сорта на 42453. В такъв случай ще се загръгли: Math.floor(43453 / 1000) = 43 секунди.

Трите фунции са готови, само остава да поставим интервала и да посочим my_snd за параметър на интервала. Това ще направим във фунцията playTrack(), която фунция е движеща за други фунции като например nextTrack или prevTrack. Това всъщност няма голямо значение, тъй като навсякъде оперираме с my_snd, която ще посочим за параметър. Следователно фунции като паузата ще влияя нормално. Разгледайте следния код:
function playTrack(){
clearInterval(streamingID);
clearInterval(playingID);
displayDuration_txt.text = "--";
displayPosition_txt.text = "--";
if(current_track == songArray.length){
current_track = 0;
my_snd.loadSound(songArray[current_track], true);
}else{
my_snd.loadSound(songArray[current_track], true);
}
streamingID = setInterval(displayStreaming, 100, my_snd);
playingID = setInterval(displayPosition, 100, my_snd);
}
Какво ново се вижда – първите 4 ред: първите два реда изчистват интервала, който ще поставим. Това почистване ще става всеки път когато извикаме фунцията playTrack, което е повече от необходимо. Виждате и че следващите два реда също почистват текстовите полета (т.е. добавят им по две чертички (--). Така, че всеки път щом функцията се извика ще се изчистват полета. Това също е необходимо, тъй като всеки път когато се пусне нова песен фунциите за показване ще са с нови стойности. Погрижихме се за това, сега погледнете поседните два реда:
streamingID = setInterval(displayStreaming, 100, my_snd);
playingID = setInterval(displayPosition, 100, my_snd);
Това са двата интервала, който използвахме във фунциите displayPosition и displayStreaming. Виждате, че в поставянето на интервал има 3 параметъра. Като цяло setInterval има следната структура:
setInterval(фунция, интервал, параметър);
Така че на първия ред избираме фунцията displayStraming, за да присвойм данните от интервала на streamingID. За интервал избираме стойност 100, а за параметър my_snd. Ако погледнете трите фунции по-горе ще видите, че там оперираме с параметър theSource, който всъщност не ни говори нищо, затова го сменяме със my_snd. Този интервал 100, ще извиква посочената фунция на всеки 100 милисекунди, така се получава един вид честота на опресняване, като 100 милисекунди е напълно достатъчно за да се виждат нормално резултатите. При възникване на проблеми направете този интервал, примерно на 200.

Какво сътворихме:
+ Направихме XML файла, в който се съдържат пътища или URL до mp3 файловете.
+ Открихме и прочетохме този xml файл с Флаш и си запълнихме списък с тези данни.
+ Направихме 5 бутона: Previous, Play, Pause, Stop, Next и оправихме тяхната площ
+ Направихме и съотведните фунции: предишна песен, пускане, пауза, спиране и следваща песен.
+ Прочетохме ID3 тага на песента и изведохме резултата в текстово поле.
+ Направихме и плъзгач - регулатор силата на звука.
+ Направихме 2 текстови полета и изведохме позицията на песента и зареждането в подходящ формат.

Автор: accorp