Помогни ни да направим Uroci.net по - богат! Добави урок

Flash Mp3 Player

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


Сега е време да направим едно динамично текстово поле в което ще запишем името на изпълнителя и песента. Направете си текстовото поле с нужната дължина, шрифт и цвят и му сложете 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.

уроци - making_hitarea.jpg

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

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

уроци - convert_volume_mc.jpg

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

уроци - conver_slider_mc.jpg

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

уроци - slider_mc_instance_name.jpg


Върнете се обратно на Сцената и да добавим малко код на слоя 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 ще впишем текущата позици на песента. Ето как трябва да изглеждат настройките на полето:

уроци - displayPosition_txt.jpg

Разбира се, можете да промените шрифт, големина на буквите, цвят...
След като вече имаме полетата, трябва да напишем и 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


Страници: «1 2 3

Коментари (18)

bubust на 31.01 2007 в 21:07ч.
Най-високи оценки за урока, труда и всичко останало!
accorp на 01.02 2007 в 00:08ч.
Неща, които съм пропуснал по невнимание, извинявам се.

Сега, по първото: 100% е стойността по подразбиране, така че трябва да я окажете предварително и на още едно място (вижте 2). При мен не стана де, но теория трябва :)
Второто: Помислих, че не си добавил clearInterval... обаче не е там проблема. Стойността на my_snd е една и съща и се натрупва, следователно във фунцията playTrack() добавете и следния ред:

my_snd = new Sound();

Така трябва да стане :)
пс. ако забележтие още нещо - свиркайте.
High Five на 01.02 2007 в 15:12ч.
С първото се оправих и сам.

Второто става както ти каза, но предизвиква друг проблем: не излиза информацията за песента.

Реших проблема като преместих

my_snd.onID3 = function() {
artistName = my_snd.id3.artist;
trackName = my_snd.id3.songname;
info_txt.text = artistName " - " trackName;
};

след

my_snd = new Sound();

във функцията playTrack()


Още един път браво за труда и благодаря за отговора :)
High Five на 01.02 2007 в 16:06ч.
При pause бутона имаме gotoAndPlay("1") и gotoAndPlay("2"). В кавички се сочи frame label. Във случая няма такъв, т.е. номерата трябва да са без кавички: gotoAndPlay(1) и gotoAndPlay(2).


Направих си сам бутон за произволна песен.
1. Направих бутона с 2 кадъра (ненатиснат- 1 и натиснат- 2);
2. Дадох му instance name "random_mc"
3. Добавих следния код към кадър 1 от слоя actions:

var randSong:Boolean = false;
random_mc.onRelease = function() {
if (random_mc._currentframe == 1) {
randSong = true;
random_mc.gotoAndStop(2);
} else {
randSong = false;
random_mc.gotoAndStop(1);
}
};

4. Промених функциите nextSong() i prevSong():

function nextTrack() {
if (randSong == true) {
my_var = current_track;
current_track = Math.floor(Math.random()*songArray.length);
if (my_var == current_track) {
current_track = Math.floor(Math.random()*songArray.length);
} else {
clearInterval(randInterval);
}
} else {
current_track ;
clearInterval(randInterval);
}
playTrack();
}

function prevTrack() {
if (randSong == true) {
my_var = current_track;
current_track = Math.floor(Math.random()*songArray.length);
if (my_var == current_track) {
current_track = Math.floor(Math.random()*songArray.length);
} else {
clearInterval(randInterval);
}
} else {
clearInterval(randInterval);
if (current_track == 0) {
current_track = songArray.length-1;
} else {
current_track--;
}
}
playTrack();
}
next_mc.onRelease = function() {
randInterval = setInterval(nextTrack, 10);
};
prev_mc.onRelease = function() {
randInterval = setInterval(prevTrack, 10);
};

Кода е толкова обстоен за да се избегнат случаи, в които се повтаря песента.

5. Промених
my_snd.onSoundComplete = function() {
nextTrack;
};
на

my_snd.onSoundComplete = function() {
randInterval = setInterval(nextTrack,10);
};


Random бутона е незаменим и никой player не трябва да бъде без такъв ;)
High Five на 01.02 2007 в 16:18ч.
http://www.pastey.net/5798

Съдържа и кода за Random бутона.
RooSee на 17.02 2007 в 11:44ч.
Написах целия код и разбрах повечето пояснения, но ви предлагам за напред да го давате и в завършения му вид. При мен нещо не работи. Стартирам клипа и не чувам никакъв звук, а когато избера бутона за връщане на трака ми изписва: Error opening URL "file:///C|/Documents and Settings/RooSee/My Documents/RoVoice/undefined" , което е странно, защото всичките ми файлове са в една директория.
accorp на 17.02 2007 в 12:36ч.
undefined? Проблема е или в XML файла или в зареждането му в плеъра. Прегледай тези две част от урока, а ако не е това - не съм пророк :)

А относно това да го дам целия - не. Какъв е смисъла от целия урок тогава. Аз дори не съм пускал цели кодове, иначе само ще си играем на copy->paste.
RooSee на 17.02 2007 в 13:45ч.
Прегледах обстойно частите. Всичко съм написал според примерите в дадения код, а XML-а го копирах, защото не съм наясно със синтаксиса му. Също видях, че не е пояснено изписването на ей' този ред:

my_snd.onSoundComplete = function() {
nextTrack;
}

вместо това пише:

Сега трябва да настроим и събитието onSoundComplete:
my_snd.SoundComplete = nextTrack;

в коментарите видях как го е направил high five и го поправих. Не знам кое е вярно, защото и двата начина не водят успех. Можеби ще ми е от полза цял пример на xml файла.


Целия код имам пред вид за прегледност. Така мога да сравня дали съм структурирал както трябва елементите, но в края на краищата т'ва не е от голямо значение.
RooSee на 17.02 2007 в 13:50ч.
не мога да изведа xml кода
RooSee на 17.02 2007 в 14:19ч.
А, готово. Справих се! Наистина много приятно. Благодаря!
bezdrum на 02.03 2007 в 14:13ч.
Имам един такъв въпрос. Може ли от картинка или поне на част от нея да се направи подобен Player? Всъщност да има само бутони за пускане, спиране и за звъка. Ето я и картинката.
http://proba4x4.hit.bg/volanF1.JPG
accorp на 02.03 2007 в 19:09ч.
Аз показах как фунционира. Винаги можеш да заместиш бутоните с твои и да сложиш background-картинка, но аз не мога да показвам как се прави дизайн, това зависи от теб :)
artistaa на 11.04 2007 в 11:41ч.
Здравейте, направил съм си плеър по вашия пример и с доста допълнителни атрибути. Но проблема е, че не зарежда звука и името на песента когато е качен на сървър. Иначе локално си работи. Трябва ли някъде да променям скрипта за да укажа друг път на зареждане или ако нещо друго има специфично може ло някой да ми помогне. Благодаря предварително!
адреса на сайта е: http://www.sunsbg.com/ , още не е завършен :-(
impulse_niki на 03.05 2007 в 17:35ч.
При мен нещо не е както трябва защото ми излиза следното Error opening URL "file:///E:ocuments and Settingsikiesktop rackList.xml"Как може да се оправи тва.
zashev на 28.11 2007 в 13:18ч.
Моля ви някой да каже как да си направя бутон във flash сайт който да спира музиката и после пак да я пуска? Спешно е!
zashev на 18.03 2008 в 18:08ч.
Нещо не ми се получава :(
Някой може ли да даде работен файл ,
включително и xml файла?
маила ми е:zashev@abv.bg
tndr на 26.05 2008 в 09:59ч.
Здравейте!

Благодаря за урока!
Можете ли да направите пример за плеър със код като на My Space, всъщност той е огромен и доста грозен но ми трябва за музикален и има хубави опции, показаване на албума, пруслушване на селектираната песен, сваляне, плейлист и така нататък. ще ви бъда много задължена!
Ако някой може да ми помогне с такъв код"

ilievamaria80@hotmail.com
Bulgarin на 03.02 2013 в 18:33ч.
Някой може ли да качи целия код някъде, че лично на мен не ми тръгва, а следвах всички стъпки от урока...
Благодаря!

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com