Tutorial: Aplicatie Web Pentru Creat Beat-uri PHP, MySQL, jQuery

In acest tutorial, vom discuta despre cum sa realizezi o aplicatie web pentru creat beat-uri, pe care o vom numi Beat Maker. Aceasta aplicatie va permite sa creati si sa redati beat-uri. Nu ca m-as pricepe in vre-un fel la muzica, dar proiectul pare interesant din perspesctiva unui web developer si, cine stie, poate este utila cuiva si este un punct de pornire pentru a realiza ceva mai complex.

Accesati Beat Maker Demo Aici

Pentru cei care nu au rabdare sa treaca prin tot tutorialul fisierele pot fi descarcate de aici. Iar daca vreti sa intelegeti ce se petrece in cod, puteti citi in continuare. ­čÖé

In primul rand sa stabilim ce vrem sa facem in acest proiect.

  1. Vom avea 5 instrumente din care putem alege pentru a construi beat-ul.
  2. Vom avea un tempo prestabilit de 120 BPM, dar care poate fi ajustat de utilizator.
  3. Vom avea 8 timpi si vom putea seta fiecare instrument in acest interval.
  4. Apasand butonul Play vom avea un loop (bucla) pentru a asculta beat-ul creat.
  5. Va trebui sa putem salva fiecare beat intr-o baza de date MySQL si sa-i dam un nume.
  6. Va trebui sa avem afisata o biblioteca ce va contine beat-urile salvate.
  7. Va trebui sa putem alege un beat din biblioteca pentru a-l asculta / modifica.

Vom avea nevoie si de niste sunete pentru proiectul nostru. Pe acestea le-am descarcat de aici. Cele pe care le-am descarcat sunt fisiere wav, dar puteti descarca si mp3 daca doriti, evident schimband extensia in functia de redare.

Aceasta aplicatie web este creata utilizând PHP, MySQL, jQuery si CSS. In continuare vom prezenta fisierele si continutul acestora, cu accent pe functia JavaScript, pentru ca acolo se va intampla toata magia.

Structura

In primul rand va trebui sa adaugam o baza de date in MySQL (folosind PHP MyAdmin). In exemplul nostru am numit-o beats.
Acum putem rula o comanda SQL pentru a crea tabelul necesar:

Aici vom salva beat-urile create cu un nume si datele necesare.

Vom crea un folder numit sounds in care vom avea cele 5 fisiere audio: clap.wav, hihat.wav, kick.wav, percussion.wav si snare.wav. Cele 5 fisiere vor genera sunetele de care avem nevoie pentru beat. Puteti sa le inlocuiti cu orice alte fisiere audio care se preteaza mai bine pentru proiectul vostru, sau adauga altele dupa caz.

Fisiere:

config.php: – Acest fisier contine informatiile de conexiune la baza de date. Va trebui sa ├«nlocuiti informatiile de conexiune cu cele proprii. Deoarece vom avea nevoie de conexiune la baza de date in mai multe fisiere si pentru a nu repeta acelasi cod in mai multe parti, dar si pentru a modifica datele conexiunii intr-un singur loc, am creat acest fisier care va fi inclus ori de cate ori va fi nevoie in alte sectiuni ale aplicatiei.

fetch_beats.php: – Acest fisier obtine toate beat-urile din baza de date si le afiseaza ├«n format JSON. Dupa cum vedeti, acest fisier include fisierul config.php: pentru a realiza conexiunea la baza de date.

get_beat.php: – Acest fisier obtine un beat specific din baza de date ├«n functie de ID-ul sau si ├«l afiseaza ├«n format JSON.

save_beat.php: – Acest fisier salveaza beat-ul creat ├«n baza de date.

Nimic spectaculos pana aici, doar niste operatii standard cu baze de date MySQL. Rog tineti cont ca in acest tutorial nu s-a pus accent pe securitate, deci daca doriti sa utilizati acest cod in viata reala, va trebui sa tineti cont si de acest aspect.

index.php: – Aceasta este pagina principala a aplicatiei. Include HTML si CSS necesare si, de asemenea, include fisierul JavaScript pentru a face aplicatia interactiva.

style.css: – Acest fisier contine toate stilurile CSS necesare pentru a face aplicatia sa arate bine.

script.js: – Acest fisier contine toate functiile JavaScript necesare pentru a face aplicatia interactiva. Aceasta include functia care reda sunetul atunci c├ónd se face clic pe un buton, functia care creeaza grila pentru a crea beat-uri, etc.

Functia JavaScript principala din acest fisier este functia createGrid(). Aceasta functie creeaza o grila de butoane care poate fi utilizata pentru a crea beat-uri. Butoanele pot fi selectate pentru a fi activate si dezactivate si pot fi redata sunetul atunci când se face clic pe ele.

Ne folosim de constantele:
– numberOfTracks = 5, adica utilizam cele 5 instrumente. Aici puteti modifica daca adaugati mai multe.
– numberOfSteps = 8, adica timpi utilizati. Din ce am inteles, 8 este un standard, dar puteti utiliza si alte valori.
– const samples, aici setam calea catre fisierele de sunet. Daca mai adaugati instrumente va trebui sa le setati calea aici.
Functia createGrid():

Aceasta este functia care creeaza butoanele si le adauga la grila.
Apelam metoda getJSON() pentru a prelua continutul fisierului fetch_beats.php, care contine o lista cu toate beat-urile salvate in baza de date si afisam aceste beat-uri in sectiunea biblioteca.

In continuare, am creat functia loadBeat(id) care incarca un beat salvat in baza de date si il afiseaza in editor. Mai intai, se face un request GET la fisierul get_beat.php si se transmite id-ul beatului care trebuie incarcat. Acest fisier returneaza un JSON care contine datele beatului.

De asemenea, am adaugat si functia saveBeat() care salveaza beat-ul curent in baza de date prin intermediul fisierului save_beat.php. Aceasta functie extrage datele din grila si le salveaza in baza de date sub forma unui JSON.

Functia playSequence() realizeaza un loop (bucla) si reda sunetele asa cum au fost setate. Pentru a sti ce timp este activ, adauga clasa „playing” care este stilizata in fisierul CSS.

Acum ca avem functiile create, nu trebuie decat sa le facem active. Cand actionam butonul Play sau Stop vom invoca functiile aferente utilizand codul de mai jos.

De asemenea la salvarea unui beat vom invoca functia ultilizand codul:

Pentru a incarca un beat din cele salvate, functia loadBeat(id) este invocata prin felul in care biblioteca de beat-uri salvate a fost realizata in functia createLibrary().

Accesati Beat Maker Demo Aici

Pentru cei care au ajuns pana aici, felicitari! Fisierele pot fi descarcate de aici

Puteti utiliza fisierele in ce fel doriti, inclusiv in scopuri comerciale. Rog tineti cont ca acesta nu este un produs ci doar un proiect de weekend pentru un tutorial.

Puteti lasa pareri in sectiunea de comentarii.
Ahoi!

Las─â un r─âspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *