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

Flash Mp3 Player

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

В този урок ще ви покажа как да си направите Flash Player с XML плейлист.
Като за начало, направете един XML файл – създайте един текстови файл (txt) и го преименувайте с разширение .xml. Отворете този файл с някакъв текстови редактор, например Notepad. Вече имаме файла, но той все още е само текстови. Запишете на пърия ред:
<?xml version="1.0" encoding="UTF-8"?>
Това декларира XML файла като такъв, задължителен ред за всички XML файлове.
Сега да започнем списъка, добавете още два реда и запишете един по друг тези два тага:
<songs>
</songs>

Между тези два тага ще запишем песните. В практиката този таг (по принцип, не тага songs, който всъщност ние си правим) се нарича firstChild. Запомнете това, защото ще ни помогне да адресираме песните, които ще добавим, напрактика в този firstChild.
Сега да добавим и една песен между таговете <songs> и </songs>:
<song url=”track1.mp3” />
За да се различава от firstChild кръщаваме тага song. Виждате и още нещо – url=”track1.mp3” – това ще атрибута с който ще адресираме mp3 файла. Това url се нарича attributes.
Вече имаме една песен в tracklist-а, който трябва да изглежда така:
<?xml version="1.0" encoding="UTF-8"?>
<songs>
<song url=”track1.mp3” />
</songs>

Сега отворете флаш и направете, като за начало, два слоя с имена: buttons и actions. На слоя buttons ще направим няколко бутончета, а на слоя actions всичкия Action Script, който ни е нужен.

уроци - first_layers-buttons_actions.jpg

Да започнем от слоя actions, изберете фрейма и отворете Actions Panel-a. На първо и най-важно място е променливата клас аудио:
var my_snd:Sound = new Sound();

Сега трябва да настроим и събитието onSoundComplete:
my_snd.SoundComplete = nextTrack;
Когато свърши песента ще се извърши фунция nextTrack, която ще напишем по-късно.

Сега да настроим и силата на звука:
my_snd.setVolume(50);
Сила на звука ще бъде 50%, за сега, по-късно ще направим и плъзгач за регулиране.

Ще направим една променлива, с която ще разбираме коя песен е текуща и чрез нея ще избираме следваща/предишна:
var current_track:Number = 0;
Избираме 0, защото първия елемент от списъка (Array) винаги е 0.

Сега да направим един списък, който ще запълним с данните от XML файла.
var songArray:Array = new Array();

Време е да декларираме частта за листа с песните:
var xml:XML = new XML();
Забележете, че xml изписано с малки букви не е запазена дума във флаш, но с големи букви е клас, така че спокойно можем да кръстим променливата xml.

xml.ignoreWhite = true;
Това е едно от нещата, които винаги трябва да правите. В случай че го няма, няма да игнорира „белите места”, т.е. празните и всъщност ще ги счете за XML елементи.

Другото задължително нещо, което трябва да направим е да декларираме събитието (event) onLoad. В противен случай само ще заредим XML файла, но няма да направим нищо с него:
xml.onLoad = function(){

Вече сложихме началото на блока, сега е време на направим една променлива, която ще ще представлява „адрес” към нашата песен, т.е. към песента посочена в XML файла:
var mainNode = xml.firstChild.childNodes;
Ще ви е по-разбираемо, ако си припомните частта с обясненията за XML файла. childNodes представляват тагове затворени във firstChild или казано според контретни случай – childNodes са song таговете, firstChild е „блока” <songs>…</songs>.

Следващата ни работа е да прочетем всички url атрибути (attributes) от всички song тагове. Казвам всички, защото те може да станат повече от един:
for(var i=0; i<mainNode.length; i++){
С for ще обиколим всички тагове, като започнем от 0. Не забравяйте, че в списъците първия елемент не е 1, а 0. Следващата стъпка от for е да ограничим „броенето”, а последния таг song. Не забравяйте горната променлива mainNode, която декларирахме. Тя всъщност представлява всички song тагове, така че с length ще намерим броя им. И последната част – прогресия с 1, за да не прескачаме елементи.

След като вече можем да минем през всички тагове, нека ги сложим в нашия списък, който декларирахме по-горе – songArray:
songArray.push(mainNode[i].attributes.url);
}
}

Адресираме нашия списък и с push, буквално бутаме елементи в него. Сега, виждате нашата променлива съдържаща song таговете – mainNode, с една малка особеност – индекс от i ([i]). Не забравяйте, че числото i е със стойност в интервала от 0 до броя на таговете song. С тази конструкция mainNode[i] получваме няколко различни променливи mainNode, чийто брой е равен на броя на таговете song. Например, ако имаме 3 тага <song />, поучаваме mainNode[0], mainNode[1] и mainNode[2].
След като вече разбрахме броя на таговете и „размножихме” mainNode, нека да адресираме съдържанието на url атрибутите, наоример mainNode[0].attributes.url – това е атрибута url на първия таг song. Виждате, че има и две големи скоби (}), първата затваря блока for, а втората затваря блока onLoad събитието (event).

Време е да заредим самия xml файл:
xml.load("trackList.xml");
Адресираме xml променливата ни и с метод load. В скоби и в кавички поставяме път или точен url до файла, в случая съм кръстил xml файла ми trackList.xml.


Страници: 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