Dźwięk HTML

Istnieje wiele sposobów odtwarzania dźwięku w HTML.

Problemy, problemy oraz metody ich rozwiązania

Odtwarzanie dźwięku w HTML nie jest łatwe!

Musisz znać wiele umiejętności, aby upewnić się, że Twoje pliki audio będą odtwarzane we wszystkich przeglądarkach (Internet Explorer, Chrome, Firefox, Safari, Opera) i na wszystkich urządzeniach (PC, Mac, iPad, iPhone).

W tym rozdziale, CodeW3C.com podsumowuje problemy i metody ich rozwiązania.

Używanie wtyczek

Wtyczki przeglądarki to małe programy komputerowe, które rozszerzają standardowe funkcje przeglądarki.

Wtyczki mają wiele zastosowań: odtwarzanie muzyki, wyświetlanie map, weryfikacja kont bankowych, kontrola wejścia itp.

Można użyć tagów <object> lub <embed> do dodania wtyczki do strony HTML.

Te tagi definiują kontenery zasobów (zwykle nie HTML), które są wyświetlane przez przeglądarkę lub zewnętrzne wtyczki, w zależności od typu.

Używanie elementu <embed>

Tag <embed> definiuje kontener zewnętrznych (nie HTML) treści. (Jest to tag HTML5, który jest nieważny w HTML4, ale działa we wszystkich przeglądarkach).

Poniższy kod fragment umożliwia wyświetlenie wplecionego pliku MP3 w stronie internetowej:

Przykład

<embed height="100" width="100" src="song.mp3" />

Spróbuj sam

Pytanie:

  • Tag <embed> jest nieważny w HTML 4. Strona nie przejdzie walidacji HTML 4.
  • Różne przeglądarki różnie obsługują formaty audio.
  • Jeśli przeglądarka nie obsługuje formatu pliku, bez wtyczki nie będzie można odtworzyć tego audio.
  • Jeśli użytkownik nie ma zainstalowanego wtyczki, nie będzie mógł odtworzyć audio.
  • Nawet jeśli plik zostanie przekształcony na inny format, nie będzie można go odtworzyć we wszystkich przeglądarkach.

Uwaga:Użyj <!DOCTYPE html> (HTML5) do rozwiązania problemów z walidacją.

Używanie elementu <object>

Tag <object> może również definiować kontener zewnętrznych (nie HTML) treści.

Poniższy kod fragment umożliwia wyświetlenie wplecionego pliku MP3 w stronie internetowej:

Przykład

<object height="100" width="100" data="song.mp3"></object>

Spróbuj sam

Pytanie:

  • Różne przeglądarki różnie obsługują formaty audio.
  • Jeśli przeglądarka nie obsługuje formatu pliku, bez wtyczki nie będzie można odtworzyć tego audio.
  • Jeśli użytkownik nie ma zainstalowanego wtyczki, nie będzie mógł odtworzyć audio.
  • Nawet jeśli plik zostanie przekształcony na inny format, nie będzie można go odtworzyć we wszystkich przeglądarkach.

Używanie elementu <audio> w HTML5

Element <audio> jest elementem HTML5, który jest nieważny w HTML 4, ale działa we wszystkich przeglądarkach.

Przykład

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Twoja przeglądarka nie obsługuje tego formatu audio.
</audio>

Spróbuj sam

Powyższy przykład używa pliku mp3, więc działa w Internet Explorer, Chrome oraz Safari.

Aby ten plik audio działał również w Firefox i Opera, dodano plik w formacie ogg. W przypadku niepowodzenia wyświetlona zostanie komunikat o błędzie.

Pytanie:

  • Tag <audio> jest nieważny w HTML 4. Twoja strona nie przejdzie walidacji HTML 4.
  • Musisz przekształcić plik audio na inny format.
  • Element <audio> nie działa w przestarzałych przeglądarkach.

Uwaga:Użyj <!DOCTYPE html> (HTML5) do rozwiązania problemów z walidacją.

Najlepsze rozwiązanie HTML

Przykład

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Spróbuj sam

Powyższy przykład używa dwóch różnych formatów audio. Element HTML5 <audio> będzie próbował odtwarzać audio w formacie mp3 lub ogg. Jeśli to się nie powiedzie, kod spróbuje użyć elementu <embed>.

Pytanie:

  • Musisz przekształcić audio na inny format.
  • Element <audio> nie może być walidowany w HTML 4 i XHTML.
  • Element <embed> nie może być walidowany w HTML 4 i XHTML.
  • Element <embed> nie może wyświetlać komunikatów o błędach.

Uwaga:Użyj <!DOCTYPE html> (HTML5) do rozwiązania problemów z walidacją.

Najprostszy sposób na dodanie audio do strony

Jak najprościej dodać audio do strony?

Yahoo Media Player z pewnością należy do nich.

Użycie Yahoo Media Player to inny sposób. Wystarczy, że Yahoo zajmie się odtwarzaniem piosenek.

Może odtwarzać pliki mp3 oraz wiele innych formatów. Dzięki jednej prostej linii kodu możesz go dodać do strony, łatwo przekształcając stronę HTML w profesjonalną listę odtwarzania.

Yahoo Media Player

Przykład

<a href="song.mp3">Odtwórz Dźwięk</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Spróbuj sam

Użycie Yahoo Media Player jest darmowe. Aby go użyć, musisz wkleić ten skrypt na dole strony:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Następnie wystarczy po prostu dołączyć link do pliku MP3 do Twojej HTML, JavaScript automatycznie utworzy przycisk odtwarzania dla każdej piosenki:

<a href="song1.mp3">Odtwórz Piosenkę 1</a>
<a href="song2.mp3">Odtwórz Piosenkę 2</a>
...
...
...

Yahoo Media Player oferuje użytkownikom mały przycisk odtwarzania, zamiast pełnego odtwarzacza. Jednak po kliknięciu tego przycisku, pojawi się pełny odtwarzacz.

Proszę zauważyć, że ten odtwarzacz zawsze jest umieszczony na dole okna. Wystarczy kliknąć, aby go wysunąć.

Używanie linków

Jeśli strona internetowa zawiera linki do plików multimedialnych, większość przeglądarek będzie używać "programu pomocniczego" do odtwarzania pliku.

Poniższy fragment kodu pokazuje link do pliku mp3. Jeśli użytkownik kliknie na link, przeglądarka uruchomi "program pomocniczy" do odtwarzania pliku:

Przykład

<a href="song.mp3">Odtwórz dźwięk</a>

Spróbuj sam

Wstawiony dźwięk

Kiedy wstawiasz dźwięk w stronie internetowej lub jako jej część, jest to nazywane wstawionym dźwiękiem.

Jeśli planujesz używać wstawionego dźwięku w aplikacji webowej, musisz być świadomy, że wielu ludzi uważa wstawiony dźwięk za irytujący. Jednocześnie pamiętaj, że użytkownik może już wyłączyć opcję wstawionego dźwięku w przeglądarce.

Naszym najlepszym zaleceniem jest umieszczanie ich tylko tam, gdzie użytkownik chce słyszeć wstawiony dźwięk. Przykład pozytywny: użytkownik musi usłyszeć nagranie i kliknąć link, który otworzy stronę i odtworzy nagranie.

Etiquety multimedialne HTML 4.01

Etiqueta Opis
<applet> Nie zalecane. Definiuje wstawiony applet.
<embed> Nie zalecane w HTML4, dozwolone w HTML5. Definiuje wstawiony obiekt.
<object> Definiuje wstawiony obiekt.
<param> Definiuje parametry obiektu.

Etiquety multimedialne HTML 5

Etiqueta Opis
<audio> Etiqueta definiuje dźwięk, na przykład muzykę lub inny strumień audio.
<embed> Etiqueta definiuje wstawiony treść, na przykład wtyczkę.