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:

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:

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.