Audio HTML

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

Problemy, problemy oraz 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 tej rozdziale CodeW3C.com podsumowuje problemy i ich rozwiązania.

Używanie wtyczek

Wtyczka przeglądarki to mały program komputerowy, który rozszerza standardowe funkcje przeglądarki.

Wtyczki mają wiele zastosowań: odtwarzanie muzyki, wyświetlanie map, weryfikacja kont bankowych, kontrolowanie 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. (To jest tag HTML5, który jest nieważny w HTML4, ale działa we wszystkich przeglądarkach).

Poniższy kod umożliwia wyświetlenie pliku MP3 wplecionego w stronę internetową:

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óżnią się wsparciem dla formatów audio.
  • Jeśli przeglądarka nie obsługuje formatu pliku, nie będzie można odtworzyć audio bez wtyczki.
  • Jeśli użytkownik nie ma zainstalowanego wtyczki, nie będzie mógł odtworzyć audio.
  • Nawet jeśli plik zostanie przekształcony do innego formatu, 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 umożliwia wyświetlenie pliku MP3 wplecionego w stronę internetową:

Przykład

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

Spróbuj sam

Pytanie:

  • Różne przeglądarki różnią się wsparciem dla formatów audio.
  • Jeśli przeglądarka nie obsługuje formatu pliku, nie będzie można odtworzyć audio bez wtyczki.
  • Jeśli użytkownik nie ma zainstalowanego wtyczki, nie będzie mógł odtworzyć audio.
  • Nawet jeśli plik zostanie przekształcony do innego formatu, 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 to audio działało również w Firefox i Operze, 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 do innego formatu.
  • 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> próbować będzie odtworzyć 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ą.

Jak najprościej dodać 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 szereg innych formatów. Dzięki jednej prostej linii kodu można go dodać do strony internetowej, ł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 prosty link MP3 dołączyć do 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 odtwarzacz zawsze osiada na dole okna. Wystarczy kliknąć, aby go wysunąć.

Używaj linków

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

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

Gdy wstawiasz dźwięk na stronie internetowej lub jako jej część, nazywa się to wstawionym dźwiękiem.

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

Naszym najlepszym doradztwem jest umieszczanie ich tylko tam, gdzie użytkownik chce słuchać wstawionego dźwięku. Przykładem może być otwarcie strony po kliknięciu linku, który odtworzy nagranie.

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

Tagi 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ę.