Tutoriál HTML5: Ako jednoducho vložiť zvukovú nahrávku do webovej stránky

Tutoriál HTML5: Ako jednoducho vložiť zvukovú nahrávku do webovej stránky

Audio a video patrili odjakživa k neodmysliteľnej súčasti webových stránok. Zvukové ukážky a videosúbory patrili a patria k dôležitým súčastiam obsahu modernej webovej stránky. Audio a video sa dalo používať vďaka zásuvným modulom internetových prehliadačov. V HTML5 existujú nové metódy vkladania multimediálneho obsahu.
Vkladanie audia:
HTML5 obsahuje element <audio>, pomocou ktorého je možné audio nahrávku do webovej stránky vložiť. Problém môže nastať pri starších typoch internetových prehliadačov (napr. IE 6). Nie všetky prehliadače element <audio> poznajú. Z tohto dôvodu môžeme do elementu <audio> vložiť odkaz pomocou elementu <a> , ktorý ponúka používateľovi možnosť si súbor stiahnuť v prípade, že sa súbor na webovej stránke z dôvodu kompatibility elementu <audio> nebude prehrávať.
Kód pre vloženie zvukovej stopy do webovej stránky vyzerá takto:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>vloženie zvukovej nahrávky do webovej stránky</title>
</head>
<body>
<audio controls="controls">
	<source type="audio/mpeg" src="toky.mp3">
    <a href="toky.mp3">toky.mp3</a>
</audio>
</body>
</html>

Rôzne typy internetových prehliadačov zobrazujú element <audio> rôznym spôsobom. Máme na mysli z grafického hľadiska. Samozrejme, musia tento element podporovať. Ako ukážku ponúkame zobrazenie prehrávača vo Firefox a Internet Explorer 11.

Firefox:






Internet Explorer 11

Rubriky: