Tutorial HTML - Muzica

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>

Demo

BrowserMP3WavOgg
Internet Explorer
Chrome
Firefox
Safari
Opera

Poti gasi aici un generator simplu pentru tagul audio html5