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