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 ugradnje 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 izvorom 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 funkcionira:

<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>