Zvuky na stránkách
Možnosti použití - Zvuk jako soubor - Zvuk jako cíl odkazu - Zvuk na pozadí, bgsound - Neustálé přehrávání - Přesměrování na zvuk - Vložený zvuk - Vazba na události - Ozvučené přejíždění odkazu - Závěr
Možnosti použití
Pokud máte zvukový soubor, můžete jej nějak zakomponovat do stránek. Možnosti:
- Dát soubor ke stažení, uživatel ať si s ním poradí
- Zvuk přehrávat na pozadí stránky
- Nechat ozývat zvuk při různých událostech (např. přejetí odkazu).
Všechno závisí na tom, co potřebujete a jaký typ souboru chcete použít. Opět (jako vždy při tvorbě stránek) je ale třeba myslet na to, že všeho moc škodí.
Zvuk jako soubor
Existuje mnoho typů zvukových souborů. Desítky.
Ve stránkách se na pozadí a pro události dají dobře použít pouze formáty midi a wav.
| označení | vlastnosti typu | přípona souboru | velikost |
|---|---|---|---|
| midi | "notový" zápis hudby odkázaný na tóny generované zvukovkou | mid, midi | relativně malá, jde jen o zápis not |
| wav | přesný digitální záznam zvuku (vymyslel Microsoft) | wav | veliké soubory, není to totiž komprimované |
| au | digitální záznam (vymysleli Suni) | au | nevím, asi to bude stejně veliké jako wav |
U jiných typů jsou možnosti omezené. Například zvuk ve formátu mp3 se spolehlivě dá nabídnout pouze ke stažení.
Pokud zvukový soubor nemáte, můžete si jej odněkud stáhnout nebo vytvořit ve speciálním programu. Na wavy stačí mikrofon a windowsí Záznam zvuku, na midy je nejlepší program Cakewalk.
Zvuk jako cíl odkazu
Nejjednodušší metoda práce se zvukem na stránkách je namířit odkazy na zvuk.
<a href="zvuk.mp3">Písnička</a> nebo
<a href="priklady/delsi.mid">Skladba</a>, zkuste si kliknout
V textu stránky to potom vypadá jako normální odkaz. Pokud si uživatel klikne, objeví se mu (v normálním případě) dialog: "chcete soubor
- uložit na disk
- nebo otevřít?
Otevření se přitom provádí v programu, který je k danému typu souboru asociován. Zrovna u eMPé3ek se nejčastěji spouští Winamp, ale nedá se na to spolehnout, protože uživatel na to může mít určený jiný program.
Totéž u každého jiného typu souboru, například nemohu vědět, jak se uživateli
otevře midi soubor, třebaže vím, že nejčastěji je to Windows Media Player.
(zápis je <a href="soubor.mid">Skladba</a> ). Také nemohu
vědět, zda se bude přehrávat stále nebo jenom jednou.
Takže pokud si někdo klikne a dá otevřít, tak se mu spustí nějaká vedlejší aplikace přehrávající zvuk. Nemá to žádný vliv na další funkci stránek.
Nemusí to jít!
Může se stát, že na počítači klienta nebude žádná aplikace, která bude umět soubor daného typu přehrávat. Například na čistých Wéčkách 98 není myslím nic, co pochopí formát mp3 (občas mi někdo mailuje, že kecám, nevím). Nebo může být přehrávající aplikace špatně nastavená. Nebo chybí zvukovka.
Zvuk na pozadí -- bgsound
Dnešní nejčastější použití zvuku na stránkách je využitím tagu <bgsound>. Jedná se o nestandardní HTML tag, který zavedla firma Microsoft do svého prohlížeče Internet Explorer 3 a od té doby to nabývá na popularitě. Zapisuje se do hlavičky souboru:
<bgsound src="soubor.mid" loop="-1">
V Internet Exploreru bude taková stránka přehrávat zvuk ze souboru soubor.mid. Bude jej přehrávat nepřetržitě, protože loop je nastaveno na mínus jedna, což v tomto případě znamená nekonečno. Dá se to samozřejmě nastavit třeba na 3, pak se to bude přehrávat třikrát.
Pokud vím, bgsound může přehrávat soubory typu wav, mid, au. Prý zvládá i mp3, ale jde o to, jak brzo to začne přehrávat, protože to napřed musí celé stáhnout.
Uživatel může přehrávání zastavit stisknutím klávesy escape nebo stop v prohlížeči (ale lidé nevědí, že to jde).
Problémy řešení bgsound
Nevýhodou tagu bgsound je jeho nestandardnost, z čehož vyplývá nepodpora v prohlížečích Netscape, Mozilla a dalších. Prostě to nehraje.
Další úskalí jsem zaznamenal, když jsem se snažil přihrávaný zvuk kontrolovat pomocí JavaScriptu. Prý jde do tagu bgsound přidat atribut id a pak to má metody stop() a play(). Mně to nějak nechodilo.
Podle častých dotazů usuzuji, že autorům nejvíce vadí, že se přehrávání zastaví, když se opustí stránka, to se dá částečně řešit.
Neustálé přehrávání
Jak už jsem zmínil, opakování se nastavuje atributem loop="-1" nebo loop="infinite". Jakmile se ale přejde na jinou stránku téhož serveru, tak se přehrávání zastaví. V nejlepším případě (pokud je bgsound uveden i na té další stránce) se začne od začátku. To není dobré.
Ve spojení s bgsound řešení přinášejí rámy. V jednom souboru (nejčastěji v levém rámu) se nechá přehrávat zvuk, ve druhém rámu se mění stránky. Kombinace rámů jsou nepřeberné a dá se využít i iframe.
Pokud nechcete použít rámy, můžete soubor s přehrávaným zvukem dát do nového okna. Nejlepší řešení je asi v kombinaci s JavaScriptem: otevře se nové okénko, do něj se natáhne soubor s bgsoundem a pak se okno metodou blur() hodí do pozadí, aby čtenáře nerušilo.
Přesměrování na zvuk
Jiný elegantní způsob přehrávání na pozadí jsem našel v Satrapově knize Web design. Využívá meta tagu refresh, který se namíří na požadovaný zvukový soubor.
<meta http-equiv="refresh" content="2; url=pisnicka.mid">
Dvě sekundy po nabíhání stránky se do okna prohlížeče pokusí nacpat soubor pisnicka.mid. Protože je to ale zvukový soubor, tak se do okna nenacpe, ale převezme si jej aplikace, která jej umí přehrát (nejčastěji Windows Media Player, Winamp). Je to hodně podobné přímému odkazu na soubor.
Funguje to ve všech prohlížečích. Výhodou je, že si může čtenář to přehrávání vypnout prostě shozením té aplikace. Nevýhodou je jistá bezohlednost. Pokud uživatel poslouchal nějakou svoji hudbu, tak ta většinou skončí a do té aplikace se narve zvuk ze stránek.
Zda se bude písnička přehrávat jednou nebo vícekrát závisí na nastavení toho přehrávacího programu -- je to tedy zcela mimo dosah autora stránek.
Vložený zvuk
Na začátku století prohlížeče počítaly s tím, že se do nich budou vkládat multimediální objekty. Proto existují HTML tagy <embed> a <object>. Kolem roku 2016 už nedává smysl nic jiného než tag <audio>.
Embed je značka starší než <object>, údajně zastaralá. Já ji ale používám mnohem raději než object, protože má lepší podporu v prohlížečích.
Embed
Vložení zvuku do stránky pomocí embed vypadá nějak takhle:
<embed src="pisnicka.mid" autostart="false" width="128" height="32">
<noembed>Plužina není nainstalována.</noembed>
Ve stránce se objeví obdélníková oblast obsahující ovládací prvky pro přehrávání písničky. To se alespoň děje v Internet Exploreru, protože ten má zabudovanou podporu pro soubory mid a wav.
V jiných prohlížečích se na to musí napřed stáhnout plug-in. Česky (podle Satrapy) plužina.Do tagu embed by se potom plužina zadávala zápisem:
<embed pluginspace="http://nějaké.umístění.plužiny" type="mime-typ" src="..." ...>
Prohlížeče, které nedokážou daný typ souboru přehrát, by si pak mohli stáhnout podporu a soubor přehrát.
Podle toho, jaký typ souboru máte, můžete zkusit tyto zápisy:
MS media player:
type="application/x-mplayer2" pluginspage="http://www.microsoft.com
AppleQuickTime playlist:
type="audio/x-mpegurl" pluginspage="http://www.apple.com/quicktime
AppleQuickTime:
type="video/quicktime" pluginspage="http://www.apple.com/quicktime
RealPlayer:
type="audio/x-pn-realaudio
Flash:
type="application/x-shockwave
Jako type se zadává mime typ souboru, tedy například type="audio/midi" nebo type="application/x-mplayer2", což Exploreru často stačí pro rozpoznání, co s tím má udělat. Opera potřebuje type prázdné, tedy type="". To je potřeba asi oskriptovat.
Modifikace embed
- autostart="true" spouští přehrávání souboru ihned při zavedení stránky
- hidden="true" nebo jenom hidden bez hodnoty skryje vložený objekt, takže se na stránce vůbec nezobrazí
- každý typ souboru může vypadat v prohlížeči jinak, to závisí na typu nainstalované podpory.
Object
Kdo se chce držet standardů, může zkusit umísit na stránku <object>.
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="src" value="soubor.mid">
Sem se vkládá varianta pro prohlížeče Netscape a další.
</object>
Toto je vložení ActiveX instance Windows Meda Playeru do stránky. Ten šílený řetězec clsid:... identifikuje tu komponentu. Dá se tam nastavit spousta dalších parametrů, vizte příklad. Ale nefunguje mi to vůbec v Netscapu a Mozille, tak to asi moc perspektivní nebude :-(
Do vlastního obsahu tagu <object> se vkládá varianta pro prohlížeče bez podpory </object>. Je dobré umístit tam <embed> nebo normální odkaz na ten hudební soubor.
Vazba na události
Obrovská výhoda vložení zvuku pomocí embed (resp. object) spočívá v tom, že se na to mohou nabalovat skripty. Například můžu vložit do stránky tlačítko, které začne přehrávat hudbu a jiné tlačítko, které ji zastaví.
Start a stop
Napřed vložím skrytý embed s hudebním souborem.
<embed name="pisnicka" src="soubor.mid" hidden autostart="false">
Je důležité ten tag pojmenovat pomocí name nebo id. V tomto příkladu se jmenuje pisnicka.
Nějakému jinému prvku, nejlépe odkazu, teď můžu předepsat akci play() na přehrávání souboru:
<a href="javascript: document.pisnicka.play()">Start</a>
Jiný odkaz přehrávání zastaví:
<a href="javascript: document.pisnicka.stop()">Stop</a>
Play() a stop jsou vlastnosti toho elementu <embed>. Každý typ vloženého souboru může mít ty vlastnosti jiné, je v tom celkem zmatek. Například některé anglické návody uvádějí u midu existenci metody rewind(), mně ale nefunguje. V praxi play() a stop() vystačí.
Co se stane u prohlížeče, který nebude mít staženou správnou plužinu? Prostě to nebude fungovat. V extrémních případech to dokonce může házet chybu :-( Zatím neznám řešení.
Ozvučené přejíždění odkazu
Dejme tomu, že budu chtít, aby se přehrál zvuk, když se přejede odkaz. Nejlepší je na to nějaký krátký šum nebo lupnutí.
Opět se napřed musí vložit skrytý pojmenovaný embed.
<embed name="puk" src="priklady/puk.wav" hidden autostart="false">
Samotný odkaz má přidánu událost při přejíždění myši onmouseover, což spustí zvuk. Při odjetí omnouseout se zvuk zastaví; pokud je zvuk krátký, není to nutné.
<a href="#odkaz" onmouseover="document.puk.play()" onmouseout="document.puk.stop()">Cvičný odkaz</a>
Cvičný odkaz, zkuste si přejet.
Trochu mi to praská v reprákách, to bude asi tím, že použitý zvuk je nekvalitní (nahrál jsem si jenom lupnutí na hubu). Pokud to budu zkoušet v prohlížečích, které nemají nainstalovanou správnou plužinu, tak to sice nebude fungovat, ale nemělo by to ani chybovat.
Závěr
Zvuky na stránkách jsou jenom pro zpestření. Pokud neděláte nějaký přehled skladeb nebo pojednání o hudební nauce, měli byste to používat velmi opatrně. Ne každý radostně ocení, až se mu na celou kancelář neočekávaně rozezní z repráků nějaký jekot. Nezapomínejte také, že mnoho lidí při práci poslouchá hudbu a vaše zvuky by se do toho mohly míchat.
Nelze opomenout ani datovou velikost souborů. Zvláště u formátu wav jsou delší soubory neskutečně veliké a umisťovat je přímo na stránky je holé šílenství. Je třeba omezit se na kratší kousky nebo uživatele napřed varovat.
V poslední době si získává velkou popularitu multimediální formát flash, který do sebe umožňuje též zahrnout zvuky wav a mp3 (mid ne). Chcete-li si na stránce udělat opravdu zvukovou bombu, doporučuji formát flash vaší pozornosti.
Jiné široké pole představují čtečky, které nahlas předčítají obsah stránek lidem, co si mezitím pečou topinky. Třeba MS Agent a GB-SOFT TTS SAPI 4.0.
Reklama
