Vloženie zvuku do HTML dokumentu s javascriptom aj bez.
Zvuk v stránkach sa dá použiť v 2 typoch a to tak, aby sa prehrával pri činnostiach užívateľa alebo prehrával na pozadí. Zápisov prehrávania zvuku do html dokumentov je veľké množstvo. Aby som bol presnejší tak zvuky sa môžu zapisovať či už do hlavičky <head>, tak aj do tela <body>. Formáty, ktoré sú optimálne pre každý prehliadač sú "mid" a "wav". Je tu samozrejme aj možnosť použiť iné formáty ale tieto zaberajú málo miesta a tak sa aj rýchlo načítavajú.
Pri prehrávaní u činností užívateľa sa musíme naučiť nový tag a to <embed>. Zapíšeme ho nasledovne do hlavičky webu<head>.
<embed name="zvuk" src="zvuk.wav" autostart="false" width="128" height="32" loop="-1" hidden>
Tagu <embed> sme zapísali aj jeho rozmery ale nastavili sme ho ako skrytí, pretože nemá význam ho umiestňovať na stránku v prípade nášho príkladu. Verím, že sa teraz pýtate čo znamená loop. Loop znamená počet opakovaní prehrávanie zvuku. Ak je nastavená hodnota ako v našom prípade (-1), tak potom sa zvuk bude opakovať do nekonečna. Do nekončna sa môže opakovať aj keď použijeme textovú hodnotu "infinite". Ak chceme zvuk opakovať napr. 2x, tak napíšeme do loop hodnotu 2. Je tu ešte aj možnosť, ktorú som neuviedol a to je hodnota volume, ktorá udáva hlasitosť zvuku. Do tejto hodnoty môžeme zapísať len číslice. "0" znamená plnú hlasitosť a "-10000" znamená ticho. Ak by ste chceli okno kde sa prehráva zvuk vidieť, tak si hodnotu hidden vymažte. Ak sme zapísali tento tag správne, tak teraz by sme mohli použiť nasledovný odkaz pomocou javascriptu. Po aktivácií odkazu sa na stránke zvuk začne prehrávať.
<a href="javascript: document.zvuk.play()">Začni prehrávať zvuk</a>
Ak chcete tento zvuk zastaviť a tým ukončiť jeho činnosť, tak musíte zadať nasledovný odkaz:
<a href="javascript: document.zvuk.stop()">Ukonči prehrávanie zvuku</a>
Následná ukážka našich zápisov bude vyzerať takto: kliknite sem.
Teraz ste mali možnosť vidieť prehrávanie zvuku pri činnosti užívateľa, ktorý klikne na odkaz zo zvukom. Opakujem, že možností prehrávanie zvuku je veľmi veľa a nechcem o tom napísať knihu a tak si dovolím napísať ešte jeden typ prehrávania zvuku pri činnosti užívateľa. Zasa bude zápis obsahovať aj trochu javascriptu čo je u zvuku väčšinou nevyhnutnosť. Teraz bude ale ten javascript trochu obšírnejší.
Začal by som hneď tagom zápisu ako v minulom príklade, len s tým rozdielom, že tu použijem obrázok čo je bežné aj v praxi:
<img src="default.jpg" border="0" alt="Obrázok a zvuk" onmouseover="document.zvuk.play()" onmouseout="document.zvuk.stop()" width="90" height="20">
Týmto zápisom sme dosiahli, že ak myšou prejdeme ponad obrázok tak nám zaznie zvuk. To nám zabezpečí javascript onmouseover. Za ním nasleduje tag onmouseout, pomocou ktorého zvuk zastavíme ak odídeme kurzorom myšy z obrázku. Toto je ukážka.
Kliknite sem pre ukážku.Ak nechcete mať zvuk pri prechode nad obrázkom je možné to urobiť aj na odkaze. Nič vám v tom nebráni. Stačí zmeniť tag <img> na váš, ktorý chcete použiť.
Teraz keď sme opustili zvukové možnosti užívateľa môžeme prejsť na možnosti zápisu kódu, tak aby sa nám zvuk prehrával na pozadí pri prehliadaní stránky. Tento tag sa zapisuje nasledovne:
<bgsound src="zvuk.vaw" loop="-1">
Príklad - Kliknite sem.
Tento tag je ale veľmi nevýhodný pre používateľov, ktorý bežia na Mozille, Firefoxe, Opere, Netscape alebo inom prehliadači. Inernet Explorer mal túto možnosť aktívnu od svojej 3 verzie. Ak sa predsa rozhodnete používať tento tag, tak sami beriete toto riziko. Ďalšia veľká nevýhoda je tá, že zvuk sa začne prehrávať až potom čo sa načíta. Je to síce pochopiteľné ale ak máte zvuk v pozadí veľmi veľký, tak sa môže stať, že sa začne prehrávať aj po 20 sekundách v závislosti od jeho veľkosti a od pripojenia k internetu. Ja osobne určite tento spôsob pridanie zvuku neodporúčam, ale ak chcete zvuk naozaj na pozadí prehrávať, tak zapíšte tag <embed> takýmto spôsobom a vložte ho do hlavičky webu <head>..
<embed name="zvuk" src="zvuk.wav" autostart="true" width="128" height="32" loop="-1" hidden>
Keď som písal článok myslel som si, že už patrí do rubriky o javascripte ale inak to zapísať proste nejde. Všetko čo sa v tagu <embed> zmenilo bola udalosť javascriptu "autostart". Nastavil som ju na true a tým sme dosiahli prehrávanie zvuku na pozadí. Ak tento tag na stránku zapíšeme, tak by som vám dal len taký malý typ, že si môžete umiestniť na web tento dokaz:
<a href="javascript: document.zvuk.stop()">Ukonči prehrávanie zvuku</a>
Po aktivovaní tejto linky sa udalosť tagu <embed> nastavená na true zmení na false a dosiahneme tým vypnutie zvuku stránky. Má to aj svoju nevýhodu, že po každom načítaní stránky sa zvuk pustí znova. Riešenie by bolo keby sme použili javascript ale opakujem, že to fakt nepatrí do tejto rubriky.
Na záver by som chcel povedať, že zvuk na stránke je veľmi odlišne podporovaný rôznymi prehliadačmi. Prehliadače ako Firefox, Opera, Mozilla si musia najprv stiahnúť pluginy aby bol zvuk počúvateľný a preto si u mňa IE zabodovalo. Nepotrebuje žiadny plugin pre zvuk.
Takže o zvuku asi toľko :-)).Autor: PaBi3
2024 ©