Jak odtwarzać muzykę na stronie, aby po każdym przejściu na podstronę nie zaczynała grać od początku?

Muzyka na stronie - temat dość kontrowersyjny. Jako, że sam nie polecam stosowania jakiegokolwiek zagnieżdżania muzyki na stronie www, to czasem nie da rady obejść wymagań klienta i pomimo własnych uprzedzeń trzeba tą muzykę na stronę wstawić.
Jeśli już wstawiamy muzykę na stronę, to jedna bardzo ważna zasada - nie katujmy użytkownika danej strony tym, że w momencie gdy przechodzi on na jedna z podstron serwisu musi on słuchać zagnieżdżonego fragmentu muzyki po raz kolejny od początku!

W sieci można znaleźć kilka sposobów (ja znalazłem 3 możliwości) na osiągnięcie płynnego odtwarzania muzyki, pozwalającego na jednoczesne przeglądanie zawartości serwisu. Oto one:
- Zastosowanie ramek -> samo wykorzystanie ramek w tym momencie eliminuje jego wykorzystanie,
- Zrobienie całej strony we Flashu - co mi się kojarzy równie podobnie jak wspomniane ramki,
- Zastosowanie wyskakującego okienka - co jest także złe, ale z trojga złego jeszcze do zaakceptowania, oczywiście licząc się z irytacją użytkownika, który zapewne uwielbia jak mu z boku wyskakują niekontrolowane, niepożądane okna oraz należy się liczyć z tym, że większość użytkowników ma włączoną blokadę wyskakujących niespodzianek.

Przeglądając kilka tygodni temu artykuły w serwisie Nettuts, jeden przykuł moja uwagę. Może nie tyle on co powstały w jego wyniku przykład wykorzystania jQuery do animowanego wczytywania zawartości podstron w jakimś tam serwisie.

Działa on w bardzo prosty sposób. Wchodząc na stronę, wczytana zostaje jej zawartość, w momencie gdy chcemy przejść na podstronę, doczytywana jest tylko treść z określonego diva, czyli wszystko nad tym divem nie jest ponownie wczytywane podczas “przeładowania” strony.

Pojawia się więc możliwość umieszczenia np. odtwarzacza z nieszczęsną muzyką powyżej zawartości, która doczytuje podstrony wykorzystując jQuery.

Przykład: http://medeco.p9.pl/ex/muzyka/

Pomimo znalezienia owego sposobu na wyżej opisany problem (bo opisany przeze mnie sposób w 95% przypadków może z powodzeniem zastąpić wspomniane powyżej) oraz pomimo tego, że nie trzeba stosować prehistorycznego kodu lub robienia całej strony we Flashu, to nie udało mi się wykorzystać go do celu w jakim go wymyśliłem :/.
Powodem było/jest to, że strona jaką ostatnio robiłem i, na której musiałem zastosować muzykę, posiada na każdej podstronie inne tło definiowane w body (czyli w części gdzie nie dochodzi do doczytania podstrony), co nie pozwala na wykorzystanie rozwiązania.
Może ktoś ma jakiś pomysł jak zmienić dodatkowo tło podstrony bez przeładowania? Chyba, że znacie jeszcze inne sposoby na ww. problem?

W każdym bądź razie może komuś się przyda powyższy pomysł na użycie muzyki na stronie :).

CSS vs. Flash…

Zatytułowałem ten wpis tak dlatego, gdyż chciałbym pokazać, tym co tworzą strony w technologi Flash i nie chcą zazwyczaj z niego zrezygnować - podpierając się możliwościami tworzenia animacji jako stron mających być serwisem WWW, że w bardzo łatwy sposób można zastąpić “mało dostępne”, toporne, świszczące i w koło się kręcące animacje Flash starym dobrym i przyjaznym CSSem!

Poniżej pokazuje tego najlepszy przykład, który przypomina animacje - a nią nie jest :). Ale po kolei…
Robiłem ostatnio stronkę pewnej firmie, ogólnie nic szczególnego - bo owy klient miał już podobną stronkę - dotyczącą innej inwestycji i miałem wykonać podobną stronkę bieżącej inwestycji klienta.
Od zawsze mam negatywne nastawienia do wszystkiego co trzeba wykonać Flashem :/. W opisywanym projekcie niestety zanosiło się na większe zabawy Flashem. Jak to bywa w takich sytuacjach - trzeba zrobić wszystko, aby go w jak najmniejszym stopni wykorzystać.

Stronka, na jakiej klient chciał aby miała identyczną funkcjonalność - zawiera ona animowany plan inwestycji i kilka innych informacji:

Plan osiedla wykonany we Flashu.

A teraz wykonany przeze mnie inny plan, ale bez użycia technologii Flash - zachowując swoją funkcjonalność:

Plan osiedla wykonany w CSSie.

I jak? To animacja i to animacja… :)

Do wykonania tego planu za pomocą arkusza stylów zainspirował mnie mały przykład znaleziony na stronie

css-map.jpg

Kod, który posłużył mi do wykonania mojego zadania stronie możecie zobaczyć w pliku plan.css.