Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

audio - Český HTML 5 manuál

HTML5 mění smysl jazyka HTML jako takového. Web se totiž časem mění a stále častěji obsahuje multimediálně bohatý obsah. Tomu se HTML5 přizpůsobilo a nabízí tagy pro přehrávání zvuků a videí. Bohužel celé toto téma není tak jednoduché kvůli tzv. kodekům.

<audio> je párový tag, sloužící k vložení zvukové stopy do HTML dokumentu. Je podporován všemi moderními prohlížeči, ve starších prohlížečích se zobrazí alternativní text, uvedený mezi tagy <audio> a </audio>.

Atributy

Elementu můžeme přiřadit následující atributy:

  • autoplay - Atribut je typu boolean. Pokud je uveden, spustí se zvuk automaticky, ihned po načtení.
  • controls - Atribut je typu boolean. Pokud je uveden, zobrazí se přehrávač s ovládacími prvky. Pokud ne, není element nijak zobrazen.
  • loop - Atribut je typu boolean. Pokud je uveden, je zvuková stopa přehrávána s opakováním stále dokola.
  • preload - Umožňuje nastavit načítání média do paměti, což urychlí jeho přehrání po kliknutí, ale zpomalí načtení stránky. Při hodnotě auto se po načtení stránky načte do paměti celý audio soubor. Při hodnotě metadata se načte pouze hlavička. Při hodnotě none se soubor do paměti nenačte.
  • src - Specifikuje umístění zvukového souboru. Soubor můžeme vložit přímo, pomocí atributu src nebo pomocí elementu <source>.

Ukázka použití

Jednoduché vložení audio souboru do HTML stránky by mohlo vypadat takto:

<audio src="audio/skladba.mp3" controls="controls">
    Váš prohlížeč nepodporuje vkládání zvukových souborů, soubor si
    <a href="audio/skladba.mp3">stáhněte</a>.
</audio>

A výsledek:

Ukazka HTML 5 tagu audio - Multimédia - Český HTML 5 manuál

Zdroj média můžeme také vložit pomocí tagu <source> (dále viz článek), tímto způsobem lze specifikovat několik zdrojových souborů a prohlížeč si vybere ten, který se mu zrovna hodí. Více v popisu tagu <source>.

<audio autoplay controls>
    <source src="Kalimba.mp3" />
    <source src="Kalimba.wav" />
    <source src="Kalimba.ogg" />
</audio>

Kodeky audia

Pro úplnost si uvedeme podporu formátů pro audio:

  IE Mozzila Chrome
MP3 Ano Ne Ano
OGG Ne Ano Ano
WAV Ne Ano Ano

Nároky na datový provoz

Možná vás napadá co se stane, když prohlížeč podporuje více formátů, ze kterých jste mu dali na výběr. Je to jednoduché, prohlížeč si vybere ten první, který bude fungovat.

Vzhledem k tomu, že mobilní operátoři mají celkem nízký FUP (datový limit), tak je vhodné jako první dávat vždy ten formát s lepší kompresí.

U našeho ukázkového audia by to bylo následující: OGG < MP3 < WAV

WAV je mnohem větší než ostatní, a proto je vhodné ho dávat na konec.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 263x (9.84 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML

 

Všechny články v sekci
Multimédia - Český HTML 5 manuál
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
3 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity