Zvuk na pozadí při procházení dynamicky generovaných stránek

Vložit zvuk do pozadí stránky není problém – to jistě zvládne kliknutím v HTML editoru každý. Zvláště umělecké stránky se zajímavým designem, nebo třeba fotogalerie budou se zvukem jistě působivější. Pokud ale ve stránce nepoužívám rámy, a každá další stránka se při procházení webem natahuje znovu, je jistě nepříjemné, že i zvuk vložený do pozadí stránky se při přechodu na další stránku přeruší a po natažení nové stránky se přehrává od začátku – toto řešení je prostě nepoužitelné.

Aby se s každou novou stránkou nereloadoval znova i povel pro přehrání zvuku, rozhodl jsem se použít vložení celé stránky do skrytého rámce (tzv. cloaking) – obdobné, jako používají různé přesměrovávací služby a servery zdarma. Do hlavního (viditelného) rámce pak vkládáme hlavní stránku a do dalšího neviditelného nahrajeme jen stránku, která přehrává zvuk – tato stránka se pak při procházení webem již znovu nenahrává a zvuk se přehrává plynule. Navíc lze do této stránky přidat další skripty pro případné vyskakovací reklamy, běžící texty ve stavovém řádku prohlížeče apod.

Zde by mohl po uvedení zdrojových kódů hlavní stránky a stránky se zvukem článek končit – ovšem přiznejme si, že někteří uživatelé mohou vnímat zvuk na pozadí jako nechtěný, a tak je lepší, pokud si uživatel může ve stránce sám zvuk vypnout a zapnout (vylepšením by bylo doplnit ještě uložení nastavení zvuku do cookies a při další návštěvě zvuk nastavit podle cookies). Všechny stránky (včetně vstupní, která zajištuje rozdělení na rámce) proto vybavíme skriptem, který převezme parametr nastavení zvuku (dále je tento parametr pojmenován "snd") z URL, a vkládanou hlavní stránku ještě navíc o odkaz pro zapnutí/vypnutí zvuku.

Nejprve tedy vstupní stránka. V této je definice rozdělení na rámce tak, aby rámec viditelný rámec, ve kterém se budou nyní zobrazovat původní stránky, měl maximální velikost (údaj *) a zbylý rámec, ve kterém bude natažena stránka se zvukem, byl neviditelný. Samozřejmě je možné upravit i stránky, které již rámce používají – prostě doplňte do řádku s FRAMESET za soupis velikostí rows (nebo i cols) ještě čárkou oddělenou 0 a vznikne tak další neviditelný rámec. Potom ještě přidejte 4. řádek z následujícího příkladu za poslední tag FRAME ve vašem kódu (čímž se do vytvořeného neviditelného rámce zavede stránka se zvukem) a tím je hlavní stránka připravená. Uvedená ukázka je ještě doplněná o alternativní vstupní část pro prohlížeče, které rámce nepodporují (a většinou nejsou ani schopné přehrávat zvuk).

default.asp:

Následuje zdrojový kód stránky, která zajišťuje přehrávání zvuku – je zde testována hodnota parametru snd (ten je předán v URL při volání stránky), a závislosti na jeho hodnotě se tagy pro přehrávání zvuku vygenerují anebo zdrojový kód stránky tak zůstane bez zvuku. Výchozí nastavení je takové, že pokud parametr snd nemá hodnotu "off", zvuk se bude vždy přehrávat – tedy pokud někdo vstoupí na stránku a parametr vůbec není uveden, zvuk se bude přehrávat – pokud bychom chtěli opačné nastavení, aby se zvuk nepřehrával, dokud si jej někdo sám nezapne, upravíme podmínky v souboru sound.asp tak, že budeme testovat proměnnou snd na rovnost hodnotě "on" (snd="on"), a dále ještě obdobně poupravíme podmínky v souboru main.asp, který umožnuje ovládat zvuk, ukazuje stav zapnutí/vypnutí zvuku a je popsaný níže.

Navíc je nutné vyřešit problém s tím, že způsob přehrávání zvuku na pozadí není standardní. Pro různé prohlížeče je nutné použít jiný kód. Tag BGSOUND pro vložení zvuku na pozadí stránky pracuje dobře v IE, ale i v Opeře 5.12, prohlížeče typu Netscape jej ignorují. Proto postačí pomocí JavaScriptu rozpoznat, že prohlížeč je typu Netscape (tag BGSOUND je v tom případě ingorován a klidně může ve stránce zůstat) a vygenerovat kód pro přehrávání zvuku pro Netscape prohlížeč (Navigator, Mozzilla). Zde se použije tag EMBED, který s parametrem hidden=true vloží do stránky neviditelný přehrávač (obvykle Windows Media Player) a tento pak (v případě, že je nainstalován patřičný plugin) přehrává na pozadí zvuk i v prohlížečích nepodporujících tag BGSOUND. Parametr loop jak je uveden u tagu BGSOUND znamená počet opakování přehrání zvuku, -1 znamená nepřetržité přehrávání. Podobně je to v parametrech EMBED – autostart=true znamená pro okamžité zahájení přehrávání (vzhledem k tomu, že přehrávač je zobrazen jako neviditelný, je možnost false, kdy se zvuk přehrávat začne až po tom, co uživatel klikne na tlačítko Play v přehrávači vyloženě nevhodná), parametr loop=true znamená nepřetržité opakování. Pokud bychom chtěli třeba jen jedno přehrátí, nastavíme u tagu BGSOUND loop=1 a u EMBED loop=false.

sound.asp:

Poslední částí je ukázka hlavní stránky (main.asp) s prvkem pro ovládání zvuku. Důležité je mít na paměti, že odkaz pro ovládání zvuku reloaduje i výchozí stránku, ve které je rozdělní na rámce – odkaz proto musí být s parametrem target="_top", aby se rámce zrušily – jinak by se s každou změnou zvuku hromadila v prohližeči neviditelná okna vnořených rámců. Pro vypnutí/zapnutí zvuku a zároveň i ukázku stavu použijeme dva obrázky, třeba jako tyto:

Ve skriptu, který následuje, a který přidáme do hlavní stránky (anebo do více stránek pomocí include), se v závislosti na hodnotě parametru snd (je opět předán pomocí URL) generuje odkaz na vypnutí/zapnutí zvuku, obrázek indikující stav přehrávání zvuku a popisek k tomuto obrázku. Bude-li mít parametr snd hodnotu on (zvuk je zapnutý), vygeneruje se odkaz na hlavní stránku, v kterém bude mít tento parametr hodnotu off (zvuk se při kliknutí na něj vypne). Zároveň se vygeneruje nepřeškrtnutý obrázek, ukazující, že zvuk je zapnutý, a popisek obrázku informující, že klepnutím na tento obrázek je možné zvuk vypnout. Bude-li mít při volání stránky snd hodnotu off, vygeneruje se odkaz s hodnotou on (pro případné zapnutí zvuku) a přeškrtnutý obrázek s popiskem "Přehrávat zvuk".

Veškeré odkazy vedoucí z hlavní stránky (a případných podstránek, které budou v hlavním rámci a budou mít možnost ovládat zvuk) musejí v URL předávat údaj o stavu zvuku, jinak se nastavení zvuku ztratí – zvuk sice nepřestane hrát, ale indikace stavu zvuku nebude pracovat správně. Kdo je lenošný, může do stránky dát oba dva obrázky – jedním se zvuk zapne a druhým vypne a to bez ohledu na předchozí stav – do odkazů pak není třeba nic dalšího doplňovat. Jen doplňuji, že odkaz obrázku pro zapnutí zvuku by byl default.asp?snd=on a pro vypnutí zvuku default.asp?snd=off.

main.asp:

Pedanti případně přidají ukládání nastavení zvuku do již zmíněných cookies a ozvučená stránka je připravena k akci.