HTML5 - Audio


Ugrađivanje zvuka u HTML dokument

Ugrađivanje zvuka na web stranicu ranije nije bilo lako, jer web pretraživači nisu imali jedinstveni standard za definisanje ugrađenih medijskih datoteka poput zvuka. U ovoj ćemo lekciji demonstrirati neke od mnogih načina dodavanja zvuka u vašu web stranicu, od upotrebe jednostavne veze do upotrebe najnovijeg HTML5 <audio> elementa.



Korištenje HTML5 audio elementa

Novo predstavljeni HTML5 element <audio> pruža standardni način za ugrađivanje zvuka u web stranice. Međutim, audio element je relativno nov, ali radi u većini modernih web pretraživača. Sljedeći primjer jednostavno ubacuje zvuk u HTML5 dokument, koristeći zadani skup kontrola pretraživača, s jednim izvornim definisanim atributom src.

<audio controls="controls" src="media/birds.mp3">
    Vaš pretraživač ne podržava HTML5 Audio elemente.
</audio>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ugrađivanje zvuka u HTML stranicu</title>
</head>
<body>
  <audio controls="controls" src="/examples/audio/birds.mp3">
        Vaš pretraživač ne podržava HTML5 audio element.
    </audio>
</body>
</html> 

Zvuk koristi zadani skup kontrola pretraživača, s alternativnim izvorima.

<audio controls="controls">
    <source src="media/birds.mp3" type="audio/mpeg">
    <source src="media/birds.ogg" type="audio/ogg">
    Tvoj pretraživač ne podržava HTML5 Audio elemente.
</audio>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Navedite zamjenske izvore za audio element u HTML-u</title>
</head>
<body>
    <audio controls="controls">
        <source src="/examples/audio/birds.mp3" type="audio/mpeg">
        <source src="/examples/audio/birds.ogg" type="audio/ogg">
        Vaš pretraživač ne podržava HTML5 audio element.
    </audio>
</body>
</html>  

Pjesma 'ogg' u gornjem primjeru radi u Firefoxu, Operi i Chromeu, dok je ista pjesma u 'mp3' formatu dodata kako bi zvuk radio u Internet Exploreru i Safariju.



Povezivanje audio datoteka

Možete povezati audio datoteke i reprodukovati ih klikom na njih. Isprobajmo sljedeći primjer da biste razumjeli kako ovo u osnovi funkcioniše:

<a href="media/sea.mp3">Track 1</a>
<a href="media/wind.mp3">Track 2</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Povezivanje audio datoteka u HTML-u</title>
</head>
<body>
    <p><a href="/examples/audio/sea.mp3">Track 1</a></p>
    <p><a href="/examples/audio/wind.mp3">Track 2</a></p>
</body>
</html>


Korištenje objekta elementa

Element <object> koristi se za ugrađivanje različitih vrsta medijskih datoteka u HTML dokument. U početku se ovaj element koristio za umetanje ActiveX kontrola, ali prema specifikaciji objekt može biti bilo koji medijski objekt kao što su: audio, video, PDF datoteke, Flash animacije ili čak slike. Sljedeći primjer koda ugrađuje jednostavnu audio datoteku u web stranicu.

<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Umetanje zvuka pomoću elementa objekta</title>
</head>
<body>
    <object data="/examples/audio/sea.mp3"></object>
    <object data="/examples/audio/sea.ogg"></object>
</body>
</html>


Korištenje ugrađenog elementa

Element <embed> koristi se za ugrađivanje multimedijalnog sadržaja u HTML dokument. Sljedeći fragment koda ugrađuje audio datoteke u web stranicu.

<embed src="media/wind.mp3">
<embed src="media/wind.ogg">
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Umetanje zvuka pomoću ugrađenog elementa</title>
</head>
<body>
    <embed src="/examples/audio/wind.mp3">
    <embed src="/examples/audio/wind.ogg">
</body>
</html>