interval.cz

Ozvučení prvků v HTML stránce

23. 01. 2002 | Pavel Růžička | HTML | Komentáře: 1

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.


Další aktuální články na interval.cz

Tematicky související články

Dejte vědět i ostatním o článku

Komentáře ke článku

Přidat nový komentář

Laco

Autor komentáře: Laco

Datum vložení: 06. Prosinec 2009, 14:34:20

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.

Zpět na začátek komentářů | Zpět na začátek článku

Přidat nový komentář

Jméno a e-mail jsou nepovinné. Příspěvky obsahující odkaz jsou moderovány.

-->
Reklama

Syndikace

hledáme nové autory | redakce interval.cz | reklama na interval.cz

© ZONER software, a.s., všechna práva vyhrazena. Hosting zajišťuje CZECHIA.COM. SSL certifikáty pro domény. Powered by WordPress.