Ozvučení prvků v HTML stránce

Především v intranetové aplikaci se mohou hodit ozvučené odkazy – můžete jimi upozornit na provedení některé operace (např. mazání) nebo třeba vytvořit nabídku, která je ozvučená podobně jako nabídka ve Windows. Vhodné použití zvuků může usnadnit navigaci nevidomým navštěvníkům.

Následující skript umožní, aby mohl být aktivován zvuk klepnutím nebo přejetím myší. Pracuje v IE i v NS, ačkoli při použití v NS je nutné, aby byl nainstalován LiveAudio plugin. Je také třeba si uvědomit, že ne u všech značek je v NS podporována událost OnClick, OnMouseOver (např. u tlačítek formuláře).

Použít lze zvuky formátu MID, WAV a v případě použití IE s doinstalovanými kodeky i MP3 a WMA. Zvláště u formátu WAV je dobré přihlédnout k velikosti zvukových souborů – pro použití na webové stránce by neměly být jednotlivé soubory větší než 30 kB, jinak se budou načítat příliš dlouho. V intranetu, kde je obvykle rychlost komunikace po síti vysoká, si můžete dovolit víc.

Základem ozvučení je připojení následujícího skriptu (skládá se ze dvou částí). První je přímo ve stránce a obsahuje pouze definici zvuků. Můžete tak použít v každé stránce různé zvuky, přičemž druhá (obslužná) část zůstává stejná pro všechny stránky. V této části nadefinujete všechny soubory zvuků, které chcete použít. Pro každý zvuk přidáte odpovídající řádek s indexem o 1 vyšším, než je předchozí, jak je vidět v kódu. Druhá část je v externím souboru linksnd.js, který si můžete stáhnout.

Do hlavičky (head) kódu stránky přidáte skript takto:

Pokud nechcete použít v každé stránce různou sadu zvuků, bude vhodnější přesunout definice pole se zvuky (tj. celou první část skriptu) na začátek externího souboru linksnd.js (tak tento skript používám i já v dynamicky generovaných stránkách).

Dále si rozebereme funkci hlavního skriptu. Prvním předpokladem pro jeho vznik je fakt, že JavaScript sám o sobě žádné funkce pro ovládání zvuku nemá. Proto musíte pro přehrávání zvuku použít standardní nástroje pro vložení zvuku do dokumentu a tyto ovládat pomocí JavaScriptu. V úvahu je potřeba vzít také to, že práce se zvuky je ve dvou nejobvyklejších prohlížečích (IE a NN, případně Mozilla) rozdílná. Ve skriptu proto rozlište typ prohlížeče a poté použijte pro daný prohlížeč vhodný kód. Pro IE je navíc využit tag BGSOUND. Do zvláštního layeru jsou pak vygenerovány (pro každý zvuk zvlášť vložené) neviditelné "přehrávače" pomocí tagu EMBED. V nich jsou zvuky ovládány skriptem.

Tyto vložené přehrávače jsou nastaveny tak, aby se hned začaly stahovat zvukové soubory – zde je velmi důležité, že se stáhnou do cache prohlížeče. V opačném případě by se při prvním požadavku na přehrání zvuku začal zvukový soubor teprve stahovat, což může trvat delší dobu a efekt ozvučení by nebyl dokonalý. Komfort ozvučení zajišťují funkce playSound a playStop, které jednoduše spustí nebo zastaví přehrávání zvuku daného čísla.

Obslužná část je pro zjednodušení napsána tak, že zvukové soubory musí být ve stejném adresáři jako stránka, která má zvuky používat. Zdatnější si jistě jednoduše poupraví skript linksnd.js, případně je možné cestu (adresář) uvést jako součást jména souboru v definici pole zvuků v první části skriptu. Ubezpečte se, že všechny vyjmenované soubory existují – jinak dojde k chybě a klientovi se může zobrazit nepříjemné hlášení o chybě ve skriptu.

Posledním krokem je doplnění zvuků k odkazům – ozvučení prvků ve stránce. Podle následujících je možné ozvučit kterýkoli prvek, který podporuje události JavaScriptu OnClick, OnMouseOver.
 

1. ozvučení odkazu při přejetí myší (po vzdálení ukazatele myši je zvuk vypnut):

2. ozvučení při klepnutí:

3. ozvučené tlačítko

Analogicky je možné ozvučit třeba obrázek, odstavec, blok textu, políčko tabulky ap. Číslo parametru funkce playSound, playStop udává pořadové číslo zvuku, se kterým se bude pracovat – playSound(1) přehraje zvuk definovaný v poli MMSound[1] atd.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.