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
Pokud mßte zvukov² soubor, m∙╛ete jej n∞jak zakomponovat do strßnek. Mo╛nosti:
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φ.
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.
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
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.
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. Nebo m∙╛e b²t p°ehrßvajφcφ aplikace ╣patn∞ nastavenß.
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).
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² se 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.
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.
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 svojφ 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.
Modernφ prohlφ╛eΦe poΦφtajφ s tφm, ╛e se do nich budou vklßdat multimedißlnφ objekty. Proto existujφ HTML tagy <embed> a <object>.
Embed je znaΦka star╣φ, ·dajn∞ zastaralß. Jß ji ale pou╛φvßm mnohem rad∞ji ne╛ object, proto╛e mß lep╣φ podporu v dne╣nφch prohlφ╛eΦφch.
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. «el, nevφm, kde se tato plu╛ina dß najφt (napi╣te mi prosφm, pokud to vφte). Do tagu embed by se potom plu╛ina zadßvala zßpisem:
<embed pluginspace="http://n∞jakΘ.umφst∞nφ.plu╛iny"
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.
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.
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φ.
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φ.
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.
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Θ p°edΦφtajφ obsah strßnek lidem, co si zatφm peΦou topinky. T°eba MS Agent a GB-SOFT TTS SAPI 4.0.
P°φklady: pou╛itφ hudebnφch soubor∙,
vlo╛enφ midu pomocφ object
Vizte tΘ╛: Popis tag∙ META,
Yuh∙vova hudebnφ nauka
Poznßmka: neptejte se m∞ prosφm na pou╛itφ videa na strßnkßch. Zatφm o tom nic nevφm, proto╛e to ned∞lßm.
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek