Ozvučení prvků v HTML stránce

23. ledna 2002

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:

<script language="JavaScript">
<!–
  var MMSound = new Array();
  MMSound[0] = "zvuk1.wav";
  MMSound[1] = "zvuk2.wav";
//–>
</script>
<script language="JavaScript1.2" src="linksnd.js" type="text/javascript"></script>

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.

document.write(‚<bgsound id="MMIEContainer">‘)  // vložit BGSOUND pro IE
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0; // otestovat prohlížeč
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=MMPreload; 
function MMPreload() { // připravit zvukové soubory pro přehrávání
  if (!ver4) // ověřit verzi prohlížeče 
    return;
  if (NS)
    MMEmb = new Layer(0,window);  // pro NN vytvořit zvláštní Layer
  else {  // nebo zvláštní DIV na konec dokumentu v IE
    Str = "<div id=’MMEmb‘ style=’position:absolute;‘></div>";
    document.body.insertAdjacentHTML("BeforeEnd",Str);
  }
  var Str = “;
  for (i=0;i<MMSound.length;i++) // cyklus pro vytvoření kódu přehrávačů
    Str += "<embed src=’"+MMSound[i]+"‘ autostart=’false‘ hidden=’true‘>"
  if (IE)
    MMEmb.innerHTML = Str; // vložit přehrávače do DIVu v IE
  else { // nebo vložit do Layeru v NN
    MMEmb.document.open();
    MMEmb.document.write(Str);
    MMEmb.document.close();
  }
  MMCon = IE? document.all.MMIEContainer:MMEmb;
  MMCon.control = MMCtrl;  // nastavit způsob ovládání zvuků
}
function MMCtrl(snd,play) { // nastavení způsobu ovládání zvuku pro IE nebo NN
  if (IE)
    this.src = play? MMSound[snd]:“;
  else
    eval("this.document.embeds[snd]." + (play? "play()":"stop()"))
}
function playSound(snd) {
  if (window.MMCon)
    MMCon.control(snd,true);
}
function stopSound(snd) {
  if (window.MMCon)
    MMCon.control(snd,false);
}

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):

<a href="odkaz.html" onmouseover="playSound(0)" onmouseout="stopSound(0)">ozvučený odkaz</a>

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

<a href="javascript:playSound(0);">ozvučený odkaz</a>

3. ozvučené tlačítko

<input type="button" value="Stiskni!" onclick="playSound(0)">

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.

Předchozí článek Jak vypadá úspěšný banner
Další článek Abeceda formuláře

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. Laco

    Pro 6, 2009 v 14:34

    Počet opakovaní sa da vložiť do tagu <bgsound>, atribút ‚loop‘
    z kladnými hodnotami ktoré znamenajú počet opakovaní. Pri hodnote „0“ je opakovanie stále.
    Potrebné je doplniť odkaz na funkciu playsound() o jednu premenu. Potom bude odkaz napríklad
    playsound(2,0), kde 2= poradie zvuku určeného v zahlavi a 0= stále opakovanie, kde vo
    funkcií MMCtrl(snd,snl,play) bude nahradená hodnotou „infinite“. Toto bude fungovať len pod IE.
        Funkcie budu doplnené o premenu „snl“ v zátvorke a doplnené o príkazy nasledovne:
    Funkcia playSound(snd) o riadok s priraďovaciou podmienkou ‚?‘ nasledovné

    function playSound(snd,snl) {
        snl = (snl==undefined) ? „1“ : snl;
        if (window.MMCon) MMCon.control(snd,snl,true); }
    funkcia

    function stopSound(snd) {
        if (window.MMCon) MMCon.control(snd, 1,false); }

    kde v priraďovacej podmienke vyraz undefined nahrádza chýbajúci atribút hodnotou 1.
    A funkcia MMCtrl(snd,play) o riadok s priraďovaciou podmienkou ‚?‘ nasledovné

    function MMCtrl(snd,snl,play) {
        if (IE) this.loop = snl? snl:“infinite“;

    , kde je „0“ nahradená hodnotou „infinite“. Obdobné sa da ovládať hlasitosť cez atribút ‚volume‘,
    toto plati len pre prehliadač IE.

    Odpovědět
  2. Tibor

    Čvn 4, 2014 v 21:18

    Ahoj
    Používam prehliadač Google Chrome a nefunguje mi to. Prosím poraď

    Odpovědět

Napsat komentář: Laco Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *