D╝wiΩk, wideo, animacje

Mo┐liwe jest tworzenie odsy│aczy do plik≤w d╝wiΩkowych, aczkolwiek, co ciekawe, dokumentacja HTML 4 w│a╢ciwie milczy na temat d╝wiΩku! Zazwyczaj stosuje siΩ dwa typy odsy│aczy - styl Netscape i styl Microsoftu. Przyk│ady:

Plik d╝wiΩkowy WAV (styl Netscape) - <embed src="../wav/complete.wav" border=0 width=x height=y>

Plik d╝wiΩkowy WAV (styl Microsoft) <bgsound src="../wav/complete.wav" loop=infinite>

Plik d╝wiΩkowy MIDI (styl Netscape) - <embed src="../midi/airwolf.mid" border=0>

Przyk│ad d╝wiΩku zagnie┐d┐onego:

loop=x okre╢la liczbΩ powt≤rze± d╝wiΩku
width=x height=y okre╢la rozmiary wy╢wietlanego obrazka wtyczki (np. dla natywnej wtyczki LiveAudio Netscape'a jest to 145x60, dla Crescendo 200x55, a dla WebTracks 56x50.)
autostart=true | false nakazuje lub zakazuje automatycznego startu odtwarzania
hidden=true|false nakazuje schowaµ|wy╢wietliµ obrazek wtyczki
palette=foreground|background pozwala unikn▒µ ewentualnego migotania palety kolor≤w, gdy przegl▒darka pracuje w trybie 256 kolor≤w
pluginspace="url" wskazuje miejsce, gdzie znajduje siΩ wtyczka, je╢li u┐ytkownik jej jeszcze nie zainstalowa│. Adres ten powinien byµ zgodny ze wskazaniami producenta wtyczki.

U┐ycie hidden=true pozwala symulowaµ d╝wiΩk w tle (podobnie jak w przypadku BGSOUND dla IE). Jest to rozwi▒zanie uniwersalne dla obu czo│owych przegl▒darek Zaleca siΩ wtedy umieszczenie polecenia EMBED na samym ko±cu dokumentu, gdy┐ wtedy wcze╢niej wczyta siΩ tekstowa zawarto╢µ strony.

Starsze przegl▒darki, kt≤re nie akceptuj▒ polecenia EMBED, mog▒ zobaczyµ polecenie NOEMBED:
<EMBED SRC="plik.mid" WIDTH="200" HEIGHT="150">
<NOEMBED>Potrzebujesz Navigatora lub Internet Explorera aby to us│yszeµ</NOEMBED>
</EMBED>

Polecenie EMBED sprawia trochΩ k│opot≤w, je╢li chodzi o wielko╢µ wy╢wietlanego panelu. Ka┐da z wtyczek jest wy╢wietlana najlepiej w sobie tylko nale┐nych wymiarach, wiΩc podanie 145x60, co mia│oby honorowaµ LiveAudio, spowoduje, ┐e wtyczka Crescendo albo Windows Media Player bΩd▒ wy╢wietlane "kulawo". Problem polega na tym, ┐e nie wiemy, jakim programem dysponuje czytelnik naszej strony, choµ mo┐emy za│o┐yµ z du┐▒ doz▒ pewno╢ci, ┐e posiadacze Internet Explorera (jakie╢ trzy czwarte internetowej populacji w Polsce) korzystaj▒ g│≤wnie z Windows Media Playera, a w│a╢ciciele Navigatora, zwykle z LiveAudio. Oczywi╢cie mo┐e siΩ zdarzyµ, ┐e jaki╢ popularny odtwarzacz d╝wiΩkowy, np. WinAmp, przejmuje domy╢lnie obs│ugΩ plik≤w MIDI, zabieraj▒c je LiveAudio i Media Playerowi.

Gdyby╢my zrezygnowali z podawania wymiar≤w, jedynie Windows Media Player poprawnie wy╢wietli podstawow▒ wersjΩ panelu, natomiast inne wtyczki przyjm▒ rozmiary nie bardzo zgodne z w│a╢ciwymi. Wszystko to powoduje, ┐e webmaster staje przed problemem czysto estetycznym, choµ takie brzydko wygl▒daj▒ce panele tak┐e jako╢ tam spe│niaj▒ swoje zadanie, zw│aszcza ┐e pod lewym lub prawym klawiszem myszki widniej▒ polecenia wtyczki.

Plik d╝wiΩkowy MIDI (styl Microsoft) - <bgsound src="../midi/antartic.mid" loop=1>

Przyk│ad d╝wiΩku w tle (IE):

loop=x oznacza liczbΩ powt≤rze±. Loop=infinite nakazuje powtarzaµ d╝wiΩk bez ko±ca.
balance=x (x=-10000;10000) okre╢la r≤wnowagΩ miΩdzy g│o╢nikami w przypadku d╝wiΩku stereofonicznego
volume=x (x=-10000;0) wyznacza g│o╢no╢µ. Warto╢µ tΩ nale┐y samodzielnie wypraktykowaµ.

KonstrukcjΩ BGSOUND obs│uguj▒ Internet Explorer i Opera 6. Navigator ignoruje j▒ i "milczy". Z kolei polecenie EMBED jest obs│ugiwane przez obie przegl▒darki - Navigator obs│uguje zagnie┐d┐ony w ten spos≤b plik d╝wiΩkowy przez wtyczkΩ (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przegl▒dark▒ Windows Media Playera. Obie przegl▒darki mog▒ tak┐e korzystaµ z innych wtyczek - do╢µ popularny jest program Cresendo, istniej▒cy w wersjach ActiveX dla IE i wtyczki dla Navigatora (http://www.liveupdate.com), ale istniej▒ te┐ inne wtyczki, np. WebTracks, firmy WildCat Software (http://www.wildcat.com). WebTracks obs│uguje pliki MIDI, ale w pierwszym rzΩdzie sw≤j w│asny format WTX.

Interesuj▒cym rozwi▒zaniem jest wtyczka Beatnik, firmy Headspace, kt≤ra obs│uguje format RMF, czyli Rich Music Format (proszΩ zauwa┐yµ podobie±stwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalaj▒ca uzyskaµ bardzo bogate brzemienie, przy niewielkiej objΩto╢ci pliku. Jest to ci▒gle jednak ma│o popularna technika.

Przyk│adowe polecenie zagnie┐d┐aj▒ce plik RMF mo┐e wygl▒daµ nastΩpuj▒co:

<EMBED SRC="affectio.rmf" TYPE="audio/rmf" WIDTH=144 HEIGHT=60 DISPLAY=SONG MODE=SCOPE AUTOSTART=TRUE LOOP=FALSE VOLUME=100>

A oto przyk│ad (je╢li dysponujesz wtyczk▒ Beatnik)

Beatnik jest dostΩpny w postaci wtyczki dla Navigatora lub ActiveX dla Internet Explorera. najlepiej jest skopiowaµ z witryny Headspace program instalacyjny, kt≤ry zawiera obie wtyczki jednocze╢nie.




Plik wideo AVI (styl Netscape) - <embed src="../DRAGDROP.AVI" border=0>

Przyk│ad

Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

dynsrc=url podaje adres pliku AVI
loop=x okre╢la liczbΩ powt≤rze±, loop=infinite oznacza powtarzanie bez ko±ca
loopdelay=n okre╢la w milisekundach op≤╝nienie miΩdzy kolejnymi powt≤rzeniami
start=fileopen|mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesuniΩciu kursora nad ikonΩ odtwarzacza
controls wy╢wietla panel kontrolny odtwarzacza AVI

Przyk│ad

Uwaga: styl Microsoftu nie jest zalecany.




Plik VRML (styl Netscape)

<EMBED SRC="vrlm.wrl" WIDTH="200" HEIGHT="150">

Przyk│ad (za "HTML Reference Library")

Pliki VRML jest obs│ugiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera.




Plik RealAudio

Na stronie mo┐emy te┐ umie╢ciµ plik RealAudio. Pliki takie mo┐na sporz▒dziµ za pomoc▒ popularnego programu do obr≤bki d╝wiΩku, CoolEdit, albo za pomoc▒ oryginalnego RealAudio Encoder, dostΩpnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV. Do tworzenia plik≤w RA najlepszy jest darmowy RealProducer G2, dostΩpny na stronie RealNetworks.

Wystarczy umie╢ciµ na stronie bezpo╢redni odsy│acz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a>

Przyk│ad

Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest u┐ycie polecenia EMBED, np.:

<embed src="plik.ra" height=105 width=275 autostart=true type=audio/x-pn-realaudio-plugin>

Spowoduje to wy╢wietlenie interfejsu RealPlayera, je╢li jest on zainstalowany w systemie u┐ytkownika. Do odtwarzania d╝wiΩku RealAudio w ╢rodowisku Windows najlepiej siΩ nadaje darmowy RealPlayer G2.

Przyk│ad




Plik MPEG i MP3

Pliki MPEG czy MP3 mo┐emy umieszczaµ na stronie w postaci zwyk│ego odsy│acza albo zagnie┐d┐aµ je za pomoc▒ polecenia EMBED, np.

<embed src="plik.mp3" autostart=true>

Przyk│ad - (objΩto╢µ ok. 63 KB).




Plik MOV (QuickTime)

Nowsze wersje Internet Explorera (5.5 i 6.0) nie obs│uguj▒ ju┐ wtyczek w starym stylu Netscape'a. Dlatego posiadacze IE przestali widzieµ zagnie┐d┐one pliki MOV. Apple zaleca skopiowanie z jego strony wtyczki ActiveX, natomiast webmasterzy powinni zagnie┐d┐aµ plik w postaci specjalnie spreparowanego kodu, kt≤ry pozwoli osobom nie dysponuj▒cym wtyczk▒ pobraµ j▒ bezpo╢rednio ze strony Apple'a - plik jest niewielki, wiΩc nie powinien sprawiµ k│opotu.

Poprawne kodowanie plik≤w MOV jest o tyle istotne, ┐e format ten sta│ siΩ najwa┐niejszym bodaj standardem dla materia│≤w wideo. Na przyk│ad trailery filmowe (zwiastuny) najczΩ╢ciej dostΩpne w│a╢nie w tym formacie.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160"HEIGHT="144"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="plik.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="true">
<EMBED SRC="plik.mov" WIDTH="180" HEIGHT="20" AUTOPLAY="true" CONTROLLER="true"
PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>

Przyk│ad (Charriots of Fire)




Plik ASF (Advanced Streaming Format, Microsoft) i WMA (Windows Media Audio)

Kliknij tutaj (wymaga Windows Media Player)

Mo┐na tak┐e zagnie╝dziµ Windows Media Player na stronie.

Na przyk│ad:

<Embed type="application/x-mplayer2" src="pliczek.asf" Name=MMPlayer1 Autostart=1 ShowControls=1 ShowDisplay=1 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=300>

Nawiasem m≤wi▒c, mo┐emy wymusiµ u┐ycie Windows Media Playera, stosuj▒c zagnie┐d┐enie jego kontrolki na stronie, za pomoc▒ polecenia <object>:

<OBJECT 
  ID="mediaPlayer"  
  CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" 
    TYPE="application/x-oleobject">
  <PARAM NAME="fileName"   VALUE="jazzball.mid">
  <PARAM NAME="autoStart" VALUE="false">
  <PARAM NAME="showControls" VALUE="true">
</OBJECT>

Przyk│ady u┐ycia (wczytanie chwilkΩ potrwa, gdy┐ strona zawiera kilka przyk│ad≤w)

Rozwi▒zanie to mo┐na stosowaµ bezpiecznie zw│aszcza w firmowych intranetach, opartych na Internet Explorerze, lub w archiwach HTML Help.




Plik Flash (Macromedia)

Wersja 3 Shockwave Flash oferuje znacznie udoskonalone mo┐liwo╢ci budowania efektownych, a zarazem zajmuj▒cych stosunkowo niewiele miejsca, interaktywnych animacji. Dobrym przyk│adem zastosowania tego formatu jest strona firmy Polbox, kt≤r▒ mo┐na ogl▒daµ zar≤wno w wersji tradycyjnej (HTML), jak i multimedialnej (Flash). A oto ma│y przyk│ad zaczerpniΩty z serwisu Webdesign.

Kliknij tutaj (15 KB) - konieczne jest posiadanie wtyczki w wersji 3, a jeszcze lepiej 4, kt≤ra jest dostarczana standardowo z Internet Explorerem i Netscape Navigatorem.

Oto przyk│ad zagnie┐d┐enia animacji. ProszΩ w nim zwr≤ciµ uwagΩ na wymiary, kolor t│a, typ MIME.

<OBJECT id="FTS" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=400 HEIGHT=300>
<PARAM NAME=movie VALUE="plik.swf">
<PARAM NAME=play VALUE=true>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=true>
<PARAM NAME=quality VALUE=High>
<PARAM NAME=scale VALUE=showall>

<EMBED src="plik.swf" menu=true quality=High WIDTH=400 HEIGHT=300 play=true loop=false scale=showall
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>

Tutaj mo┐na obejrzeµ flashowy hit z okresu wojny przeciw talibom - Bin Laden Bomb Song. Polecamy te┐ ╢wietne flashe prezentuj▒ce muzykΩ aboryge±sk▒ - Indigenous Australia, a zw│aszcza Didgeridoo i Corroboree.

WiΩcej informacji o wstawianiu animacji Flash mo┐na znale╝µ w artykule opublikowanym w Webmasterze (stycze± 2000).