HTML5 Hap Pas Hapi: Integrimi i Audiove

Autor: Skender Mustafi

Përmes formave (anglisht: canvas) të ndryshme që mund të kombinohen me HTML e që tani JQuerry format janë të standardizuara për HTML5, HTML mundëson integrimin e medieve të ndryshme si video, audio, foto, flash etj.. Më poshtë do të sqarojmë se si bëhet integrimi i medieve në një kodt HTML5 dhe atributet të cilat ky kod mbështetë dhe mund të integrohen.

Integrimi i audio materialeve

Një nga etiketat e reja të HTML5 që paraqesin standarde të reja është edhe ajo për integrimin e audio materialeve, <audio>.

Që kjo etiketë të funksionojë duhet bërë një kombinim mes kësaj etikete edhe etiketës <source> dhe gjithashtu duhet shtuar atributet përkatëse të nevojshme ose/dhe të preferuarat.

Atributet e etiketës <audio> janë:

controls – shfaqë pullat për ndërveprim me video materialin: constrols
autoplay – përcakton që video fillon posa të jetë gati: <audio controls autoplay>
loop – përcakton që video të përsëritet pasi që mbaron: <audiocontrols autoplay loop>
muted – përcakton që video të jetë e heshtur: <audio controls autoplay loop muted>
preload – përcakton se di duhet video materiali të hapet derisa faqja hapet: <audio controls preload=”none”> ose preload=”auto” ose preload=”metadata”
src – përcakton burimin: src=”audio.mp3″
Shembull: <audio controls autoplay loop></audio>

Atributet e burimit të video materialit janë:

src – përcakton burimin: src=”audio.mp4″
media – përcakton llojin e burimit: media=”screen and (min-width:320px)”
type – përcakton llojin: type=”audio/mpeg”
Shembull: <source src=”audio.mp3″ type=”audio/mpeg” src=”audio.mp3″>

Ja një shembull i kodit të plotë për paraqitjen e video materialeve në faqe:

<audio controls>
<source src=”audio.ogg” type=”audio/ogg”>
<source src=”audio.mp3″ type=”audio/mpeg” src=”audio.mp3″>
Shfletuesi juaj nuk mbështetë këtë audio etiketë.
</audio>

Ja një shembull konkret nga W3Schools.com:

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”http://www.w3schools.com/tags/horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>

</body>
</html>

Ndër HTML ekspertët është i përhapur vlerësimi se mënyra më e mirë e integrimit të audio materialeve që ndërlidhet me standardin e HTML5 është kombinimi i etiketës standarde me etiketën <embed>. Kështu në rast se burimi i etiketës standarde është i pa vlerë, atëherë vie në pah burimi i etiketës <embed> i cili luan audio materialin.

Shembull:
<audio controls height=”100″ width=”100″>
<source src=”audio.mp3″ type=”audio/mpeg”>
<source src=”audio.ogg” type=”audio/ogg”>
<embed height=”50″ width=”100″ src=”audio.mp3″>
</audio>

Audio formatet e mbështetura nga ky standard në HTML5 janë MP3, Wav dhe Ogg. Vetëm Google Chrome mbështetë që të tre standardet dhe asnjë standard nuk është i mbështetur nga të gjithë shfletuesit. Në tabelën e mëposhtme mund të shihni cilët shfletues mbështesin këto audio formate:

Shfletuesi	MP3	Wav	Ogg
Internet Explorer 9+	PO	JO	JO
Chrome 6+	PO	PO	PO
Firefox 3.6+	JO	PO	PO
Safari 5+	PO	PO	JO
Opera 10+	JO	PO	PO

MIME llojet e audio formateve të mësipërme janë:

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Formatet tjera të njohura të cilat mund të integrohen me standarde tjera janë: MIDI (.mid/.midi), MP3 (.mp3), RealAudio (.rm/.ram), Wav (.wav) dhe WMA (.wma).

Këto formate mund të integrohen në mënyra tjera të cilat nuk janë standarde në HTML5, por janë funksionale meqë shfletuesit mbështesin shtesat dhe format e ndryshme të integrimit të audio materialeve.

Integrimi i WAV audio materialeve që luhen me QuickTime
<object width=”420″ height=”360″
classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B”
codebase=”http://www.apple.com/qtactivex/qtplugin.cab”>
<param name=”src” value=”liar.wav”>
<param name=”controller” value=”true”>
</object>

Lujtja e audio materialeve përmes Yahoo Media Player
Burimi i audio materialit: <a href=”audio.mp3″>Luaj</a>
Burimi i luajtësit të audio materialeve: <script src=”http://mediaplayer.yahoo.com/js”></script>

Me të vendosur të Yahoo Media Player Jàva skedës tek fundi i faqes suaj ju mund të lidhni sa të duani burime të audio materialeve të cilat do të luhen nga Yahoo Media Player.

Mjete tjera të cilat mund t’i shfrytëzoni për të luajtur audio materiale janë: