By 
Autor -› Odtwarzacz mp3
Witam. Dzisiaj chciałbym wam pokazać jak zrobić odtwarzacz mp3, oczywiście odtwarzacz ten może otwierać inne formaty to tylko od was zależy jakie rozszerzenie zastosujecie.
No to do dzieła. Pozwoliłem sobie na zrobienie interfejsu graficznego więc nasza praca będzie polegała na napisaniu kodu. Na początku zaczniemy od prostych rzeczy czyli od przycisku „play” i „stop”. Wszystkim przyciskom nadałem również „instance name” żeby nie było jakiś komplikacji.
Przechodzimy do pierwszej klatki warstwy „action” i wciskamy skrót „esc+st” jest to skrót klawiaturowy do zatrzymania klipu czyli po prostu „stop”. Po zatrzymaniu animacji przechodzimy do pierwszej klatki warstwy „action” i nadajemy akcje dla przycisku „play_btn”. Przycisk ten będzie włączał muzykę, żeby do tego doszło musimy zadeklarować zmienna „dźwięk” i nadać jej klasę „Sound” więc kod będzie wyglądał następująco:
Code: [select]
var dźwięk:Sound = new Sound
dzwiek.loadSound("aaa.mp3",true)
dzwiek.loadSound("aaa.mp3",true)
teraz musimy uaktywnić ta klasę za pomocą przycisku „play_btn”
Code: [select]
play_btn.onRelease = function() {
dzwiek.start();
}
dzwiek.start();
}
skrypt ten po wciśnięciu przycisku play, ładuje do zmiennej „dźwięk” nasza muzykę w tym przypadku piosenkę o nazwie „aaa.mp3” która jest odtwarzana wraz z strumieniowaniem utworu. Musimy tez pamiętać by podać rozszerzenie dla naszego pliku.
Teraz przystępujemy do napisania akcji dla przycisku „stop”.
Code: [select]
stop_btn.onRelease = function() {
dzwiek.stop()
}
dzwiek.stop()
}
To by było tyle jeśli chodzi o samo odtwarzanie dźwięku jednak my chcemy by nasz player wstrzymywał odtwarzaną muzykę, więc musimy napisać akcje dla przycisku „pause_btn”, który zatrzyma nasz dźwięk i pozwoli go odtworzyć w miejscu w którym został zatrzymany, do tego zadania będzie nam potrzebna zmienna liczba w której to będzie przechowywany czas odtwarzania.
Najpierw zadeklarujemy ta zmienna, a następnie dodamy akcje dla „pause_btn”
deklaracja zmiennej liczby w której przechowamy czas odtwarzanego dźwięku
Code: [select]
var zatrzymanie:Number = 0
następnie akcja dla przycisku „pause_btn”
Code: [select]
pause_btn.onRelease = function() {
dzwiek.stop();
zatrzymanie = dzwiek.position/1000;
};
dzwiek.stop();
zatrzymanie = dzwiek.position/1000;
};
Jak widać przycisk ten zatrzymuje dźwięk i ustala gdzie został zatrzymany, teraz żeby odtworzyć w momencie zatrzymania musimy zmodyfikować przycisk „play_btn” i do metody „start” dodajemy "secondOffset" czyli parametr, liczbę który pozwoli na odtworzenie dźwięku od specyficznego punktu
Code: [select]
play_btn.onRelease = function() {
dzwiek.start(zatrzymanie);
}
dzwiek.start(zatrzymanie);
}
Jeśli teraz byśmy przetestowali nasz klip to po wciśnięciu „pause_btn” dźwięk nam się zatrzyma ale nie można go przywrócić ponieważ brak przycisku „play_btn” i tym zajmiemy się teraz. Przycisk ten jest ukryty pod przyciskiem „pause_btn”, żeby go aktywować należy ukryć oczywiście przycisk „pasue”.
Do przycisku „pasue_btn” dopisujemy następujący kod:
Code: [select]
pause_btn.onRelease = function() {
dzwiek.stop();
zatrzymanie = dzwiek.position/1000;
pause_btn._visible = false;
play_btn._visible = true;
};
dzwiek.stop();
zatrzymanie = dzwiek.position/1000;
pause_btn._visible = false;
play_btn._visible = true;
};
pause_btn._visible = false; - linia ta pozwala na ukrycie zdefiniowanego przycisku po to by móc operować drugim buttonem, który jest widzialny dzięki parametrowi true, analogicznie postępujemy z drugim przyciskiem
czyli:
Code: [select]
play_btn.onRelease = function() {
dzwiek.start(zatrzymanie)
play_btn._visible = false;
pause_btn._visible = true;
};
dzwiek.start(zatrzymanie)
play_btn._visible = false;
pause_btn._visible = true;
};
tu różnica jest taka ze teraz ukrywamy przycisk odtwarzający dźwięk a pokazujemy drugi button. Można teraz sprawdzić klip. Jeśli sprawdzimy wszystkie przyciski zauważymy ze nie wszystkie działają prawidłowo, o którym mowie? O przycisku „stop_btn” który nie resetuje odtwarzanego dźwięku tylko zachowuje się jak „pause_btn”. Naprawa tego przycisku jest prosta tzn resetujemy zmienna „zatrzymanie” dla tego przycisku do 0 oraz umożliwiamy aktywacje przycisku odtwarzania:
Code: [select]
stop_btn.onRelease = function() {
dzwiek.stop();
zatrzymanie = 0;
pause_btn._visible = false;
play_btn._visible = true;
};
dzwiek.stop();
zatrzymanie = 0;
pause_btn._visible = false;
play_btn._visible = true;
};
Mamy już w pełni funkcjonalne przyciski, jednak na tym nie koniec, zajmiemy się teraz przyciskami które pozwolą nam sterować głośnością muzyki. Przechodzimy do pierwszej klatki warstwy „action” i zaczynamy od przycisku „plus_btn”
Code: [select]
plus_btn.onRelease = function() {
dzwiek.setVolume(dzwiek.getVolume()+10)
}
dzwiek.setVolume(dzwiek.getVolume()+10)
}
jak zauważyliście aby ustawić głośność(setVolume) trzeba najpierw pobrać(getVolume) i przy każdym wciśnięciu „plus_btn” zwiększamy głośność o 10%, analogicznie robimy z przyciskiem „minus_btn” tzn
Code: [select]
minus_btn.onRelease = function() {
dzwiek.setVolume(dzwiek.getVolume()-10)
}
dzwiek.setVolume(dzwiek.getVolume()-10)
}
Prawda ze proste? Wszystko ładnie pięknie ale jeśli teraz zmniejszymy głośność poniżej 0 to zaczyna się robić głośniej dzieje się tak dlatego iż po odjęciu od 0 -10 otrzymujemy wartość która Flash interpretuje jako 10 i zaczyna podgłaśniać nasza muzykę, można temu zaradzić w następujący sposób:
Code: [select]
minus_btn.onRelease = function() {
if (dzwiek.getVolume()>0) {
dzwiek.setVolume(dzwiek.getVolume()-10);
}
};
if (dzwiek.getVolume()>0) {
dzwiek.setVolume(dzwiek.getVolume()-10);
}
};
identycznie wygląda sytuacja z „plus_btn” jednak tutaj cały czas robi się głośniej więc ustawmy by maksymalna głośność wynosiła 100%.
Code: [select]
plus_btn.onRelease = function() {
if (dzwiek.getVolume()<100) {
dzwiek.setVolume(dzwiek.getVolume()+10);
}
};
if (dzwiek.getVolume()<100) {
dzwiek.setVolume(dzwiek.getVolume()+10);
}
};
Pozostały nam tylko przyciski do przewijania następnych piosenek, do tego celu posłużymy się tablica dlatego iż wydaje się to być najprostszy sposób. W tablicy możemy przechowywać rożne rzeczy mogą to być liczby, słowa, muzyka, obrazy jak i filmy.
Najpierw utworzymy nowa tablice:
Code: [select]
var tablica:Array = new Array("aaa.mp3", "bbb.mp3", "ccc.mp3")
oraz dodamy zmienna która pozwoli nam zarządzać utworami z tablicy:
Code: [select]
var kolejnyDzwiek:Number = 0
nasza tablica nazywa się po prostu „tablica” i przechowuje 3 elementy które są naszymi dźwiękami, teraz chcemy aby dźwięk był wczytywany z tablicy a nie z ścieżki która podaliśmy dla zmiennej „dzwiek” więc po prostu zamieniamy w linii:
Code: [select]
dzwiek.loadSound("aaa.mp3", true);
na
Code: [select]
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
„kolejnyDzwiek” jest równy 0 więc nie ma znaczenia czy w tablicy jest 0 czy zmienna „kolejnyDzwiek” jednak jak pozniej zobaczycie dodanie tej zmiennej będzie bardzo ważne gdyż dzięki niej będziemy mogli spokojnie odtwarzać kolejne piosenki z tablicy, należy pamiętać o tym ze Flash zaczyna odliczać od 0 i dlatego 0 jest pierwszym elementem w tablicy, jeśli 0 w zmiennej „kolejnyDzwiek” zamienimy na 1 to będzie odtwarzany drugi dźwięk a nie pierwszy. Teraz zajmiemy się przyciskiem „next_btn”. Chcemy aby ten przycisk przechodził do następnej piosenki, jak wiemy mamy w tablicy tylko trzy elementy więc po włączeniu ostatniego chcemy by nasz player wracał do pierwszego utworu:
Code: [select]
next_btn.onPress = function() {
if (kolejnyDzwiek<tablica.length-1) {
kolejnyDzwiek++;
} else{
kolejnyDzwiek = 0;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
if (kolejnyDzwiek<tablica.length-1) {
kolejnyDzwiek++;
} else{
kolejnyDzwiek = 0;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
warunek if sprawdza czy numer piosenki jest mniejszy od długości tablicy w której są trzy elementy, jeśli tak to numer piosenki jest powiększany o 1(++) jeśli warunek jest nie prawdziwy to następuje powrót do pierwszego utworu, a dlaczego -1 przy długości tablicy? Jak wiadomo Flash odlicza od 0 i jeśli byśmy nie odjęli to Flash szukałby elementu oznaczonego jako liczba 3 którego oczywiście nie ma. Podobnie robimy dla przycisku „prev_btn” ale oczywiście zamiast dodawać elementy trzeba je odjąć
Code: [select]
prev_btn.onPress = function() {
if (kolejnyDzwiek>0) {
kolejnyDzwiek--;
} else{
kolejnyDzwiek = tablica.lenght-1;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
if (kolejnyDzwiek>0) {
kolejnyDzwiek--;
} else{
kolejnyDzwiek = tablica.lenght-1;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
I na koniec zajmiemy się odtwarzaniem kolejnego dźwięku po skończeniu pierwszego. W sumie to już mamy to zrobione tylko ze w innej formie, chodzi o przycisk „next_btn”, pozwala on przechodzić do następnej piosenki więc jedyne co musimy zrobić to umieścić funkcje która po skończeniu odtwarzania dźwięku odtwarza następny, a służy do tego „onSoundComplete” i jedyne co trzeba zrobić to do tej funkcji dodać akcje z przycisku „next_btn” czyli:
Code: [select]
dzwiek.onSoundComplete = function() {
if (kolejnyDzwiek<tablica.length-1) {
kolejnyDzwiek++;
} else {
kolejnyDzwiek = 0;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
if (kolejnyDzwiek<tablica.length-1) {
kolejnyDzwiek++;
} else {
kolejnyDzwiek = 0;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
a skoro mamy identyczny kod w przycisku więc możemy nasz kod trochę skrócić tworząc i dodając funkcje zarówno do przycisku „next_btn” jak i do „onSoundComplete”
Code: [select]
function kontynuacja() {
if (kolejnyDzwiek<tablica.length-1) {
kolejnyDzwiek++;
} else {
kolejnyDzwiek = 0;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
if (kolejnyDzwiek<tablica.length-1) {
kolejnyDzwiek++;
} else {
kolejnyDzwiek = 0;
}
dzwiek.loadSound(tablica[kolejnyDzwiek], true);
};
więc finalna forma tych funkcji będzie wyglądała w następujący sposób:
Code: [select]
dzwiek.onSoundComplete = function() {
kontynuacja();
};
next_btn.onPress = function() {
kontynuacja ();
};
kontynuacja();
};
next_btn.onPress = function() {
kontynuacja ();
};
i gotowe mamy już w pełni funkcjonalny odtwarzacz mp3 na naszą stronę.
======
// Edit by Roco:
Załącznik został poprawiony i można pobierać!
Administracja dziękuje za zwrócenie uwagi!
