Jump to content

[HTML] - Muzica


BAWZIE
 Share

Recommended Posts

Cu ceva timp in urma era destul de complicat sa introduci muzica sau sunete un general pe o pagina web. In momentul de fata aceasta problema s-a rezolvat, adaugarea de sunete fiind foarte simpla.

HTML<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

Se recomanda ca atat inaltimea cat si latimea sa fie direct proportionale pentru a evita distorsionarea playerului.

Pentru a ascunde playerul valoarea atributului hidden (false) se va inlocuii cu true. Acest lucru se va face doar in cazul in care esti absolut sigur ca userul nu va dorii sa opreasca sunetul.

Controlul si manipularea playerului

Sa mai aruncam o privire exemplului de mai sus:

HTML<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

  • autostart - stabileste daca sunetul va incepe imediat dupa incarcarea paginii web. Poate avea valoarea true sau false
  • loop - stabileste daca sunetul va fi repetat la nesfarsit. Poate avea valoarea true sau false.
  • volume - poate avea orice valoare intre 0 si 100

Experimenteaza putin cu aceste atribute pentru a le intelege mai bine si retine ca un volum ridicat este de cele mai multe ori suparator pentru utilizator.

HTML 5 Audio tag

Odata cu introducerea HTML5, tagul audio s-a raspandit foarte repede si este suportat foarte bine de browserele actuale. Tagul audio, este folosit pentru a adauga sunet si muzica in pagina html. In momentul de fata tagul audio, suporta 3 tipuri de fisiere audio:

  • mp3 - MIME-type audio/mpeg
  • wav - MIME-type audio/wav
  • ogg - MIME-type audio/ogg

HTML<audio controls>
<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>

 

Sursa.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.