Ostatnio edytowany:

audio

Autor: Virtual Patriot

Przeznaczenie elementu audio

Element audio reprezentuje zasób internetowy w postaci pliku dźwiękowego (np. typu .mp3 lub .mp4).

Dodatkowe techniczne informacje o elemencie audio

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst wbudowany

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio src="dyskusja-01.mp3" controls>
        <p>
          Twoja przeglądarka internetowa nie obsługuje elementu "audio".
        </p>
      </audio>
    </figure>

    Kontekstem zewnętrznym przykładowego elementu "audio" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "audio".

kontekst wewnętrzny
  • gdy dany element audio posiada atrybut src kontekstem wewnętrznym mogą być ewentualnie elementy track, następnie ewentualnie kontekst wewnętrzny elementu rodzica, lecz nie elementy media jako elementy potomkowie

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio src="dyskusja-01.mp3" controls>
        <track src="dodatkowe-napisy-01.vtt" kind="metadata" default>
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który posiada atrybut "src" jest wyłącznie element "track". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "track", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio src="dyskusja-01.mp3" controls>
        <p>
          Twoja przeglądarka internetowa nie obsługuje elementu "audio".
        </p>
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który posiada atrybut "src" jest wyłącznie element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "audio", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio src="dyskusja-01.mp3" controls>
        <track src="dodatkowe-napisy-01.vtt" kind="metadata" default>
    
        <p>
          Twoja przeglądarka internetowa nie obsługuje elementu "audio".
        </p>
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który posiada atrybut "src" jest wyłącznie element "track", po którym znajduje się element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "audio", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "track" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

  • gdy dany element audio nie posiada atrybutu src kontekstem wewnętrznym mogą być ewentualnie elementy source, następnie ewentualnie elementy track, następnie ewentualnie kontekst wewnętrzny elementu rodzica, lecz nie elementy media jako elementy potomkowie

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio controls>
        <source src="dyskusja-01.mp3">
        <source src="dyskusja-01.wma">
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który nie posiada atrybutu "src" są wyłącznie elementy "source". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source" oraz element "source", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio controls>
        <source src="dyskusja-01.mp3">
        <source src="dyskusja-01.wma">
        <track src="dodatkowe-napisy-01.vtt" kind="metadata" default>
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których znajduje się element "track". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source" oraz element "track", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio controls>
        <source src="dyskusja-01.mp3">
        <source src="dyskusja-01.wma">
    
        <p>
          Twoja przeglądarka internetowa nie obsługuje elementu "audio".
        </p>
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których znajduje się element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "audio", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

    Przykładowy Kod HTML

    <figure>
      <figcaption>Przykładowy plik dźwiękowy</figcaption>
    
      <audio controls>
        <source src="dyskusja-01.mp3">
        <source src="dyskusja-01.wma">
        <track src="dodatkowe-napisy-01.vtt" kind="metadata" default>
    
        <p>
          Twoja przeglądarka internetowa nie obsługuje elementu "audio".
        </p>
      </audio>
    </figure>

    Kontekstem wewnętrznym przykładowego elementu "audio", który nie posiada atrybutu "src" są wyłącznie elementy "source", po których znajduje się element "track", po którym znajduje się element HTML, który jest prawidłowym kontekstem wewnętrznym dla elementu rodzica wspomnianego elementu "audio", którym to elementem rodzicem w tym wypadku jest element "figure". Ponadto elementami potomkami wspomnianego elementu "audio" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "audio", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source", element "track" oraz element "p", jest prawidłowym kontekstem wewnętrznym dla elementu "audio".

Element audio posiada zdolność fallback. Zdolność fallback elementu audio uaktywnia się w momencie gdy przeglądarka internetowa nie interpretuje elementu audio.

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <audio> ... </audio>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline (jeżeli przeglądarka internetowa nie interpretuje danego elementu audio)
  • none (jeżeli przeglądarka internetowa interpretuje dany element audio oraz jeżeli dany element audio nie posiada atrybutu controls)
  • inline-block (jeżeli przeglądarka internetowa interpretuje dany element audio oraz jeżeli dany element audio posiada atrybut controls)

Dodatkowe domyślne reguły CSS elementu audio

/* jeżeli przeglądarka internetowa interpretuje element "audio" oraz jeżeli element "audio" nie posiada atrybutu "controls" */
audio {
  display:none;
}

/* jeżeli przeglądarka internetowa interpretuje element "audio" oraz jeżeli element "audio" posiada atrybut "controls" */
audio {
  display:inline-block;
}

Interpretacja elementu audio

Firefox

tak

Nie interpretuje atrybutu mediagroup.

Google Chrome

tak

Nie interpretuje atrybutu mediagroup.

Safari

tak

Nie interpretuje atrybutu mediagroup.

Opera

tak

Nie interpretuje atrybutu mediagroup.

Internet Explorer

tak, lecz od wersji 9

Interpretuje atrybut crossorigin, lecz od wersji "11".

Nie interpretuje atrybutu mediagroup.

Edge

tak

Nie interpretuje atrybutu mediagroup.

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu audio

autoplay

Przeznaczenie atrybutu autoplay

Atrybut autoplay wykorzystany wraz z elementem audio określa czy odtwarzanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez dany element audio powinno rozpocząć się automatycznie.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu autoplay

autoplay

Atrybut autoplay jest atrybutem logicznym elementu audio.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" controls autoplay></audio>

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu autoplay

Odtwarzanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez przykładowy element "audio" rozpocznie się automatycznie, ponieważ do wspomnianego elementu "audio" został dodany atrybut "autoplay".

controls

Przeznaczenie atrybutu controls

Atrybut controls wykorzystany wraz z elementem audio określa czy dany element audio powinien posiadać domyślne przyciski interfejsu użytkownika służące do kontrolowania odtwarzania zasobu internetowego reprezentowanego przez wspomniany element audio.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu controls

controls

Atrybut controls jest atrybutem logicznym elementu audio.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" controls></audio>

  </body>
</html>

Rezultat

Przykładowy element "audio" reprezentujący zasób internetowy posiada domyślne przyciski interfejsu użytkownika służące do kontrolowania odtwarzania wspomnianego zasobu internetowego, ponieważ do wspomnianego elementu "audio" został dodany atrybut "controls".

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem audio określa, w jaki sposób dany element audio reprezentujący zasób internetowy ma reagować na mechanizm umożliwiający wymienianie się zasobami internetowymi pomiędzy serwerami znajdującymi się w różnych domenach (tzw. CORS, czyli Cross-Origin Resource Sharing).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

anonymous (gdy nie podaliśmy wartości)

anonymous (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu crossorigin

anonymous

Wartość anonymous oznacza, że nie jest wymagane potwierdzenie tożsamości użytkownika.

use-credentials

Wartość use-credentials oznacza, że jest wymagane potwierdzenie tożsamości użytkownika, np. za pomocą COOKIES (tzw. ciasteczka), za pomocą certyfikatu SSL po stronie klienta lub za pomocą uwierzytelnienia HTTP.

loop

Przeznaczenie atrybutu loop

Atrybut loop wykorzystany wraz z elementem audio określa czy odtwarzanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez dany element audio powinno powtarzać się w nieskończoność.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu loop

loop

Atrybut loop jest atrybutem logicznym elementu audio.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" controls loop></audio>

  </body>
</html>

Rezultat

Odtwarzanie przez przeglądarkę internetową zasobu internetowego reprezentowanego przez przykładowy element "audio" będzie powtarzane w nieskończoność, ponieważ do wspomnianego elementu "audio" został dodany atrybut "loop".

mediagroup

Przeznaczenie atrybutu mediagroup

Atrybut mediagroup wykorzystany wraz z elementem audio określa nazwę grupy media, do której ma należeć zasób internetowy reprezentowany przez dany element audio.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu mediagroup

nazwa

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" mediagroup="grupa-1" autoplay controls></audio>
    <audio src="http://webkod.pl/files/html/utwor-01.mp3" mediagroup="grupa-1" autoplay></audio>

  </body>
</html>

Rezultat

Oba zasoby internetowe reprezentowane przez różne przykładowe elementy "audio" należą do tej samej grupy media o nazwie "grupa-1", ponieważ do każdego ze wspomnianych elementów "audio" został dodany atrybut "mediagroup" wraz z wartością "grupa-1".

muted

Przeznaczenie atrybutu muted

Atrybut muted wykorzystany wraz z elementem audio określa czy zasób internetowy reprezentowany przez dany element audio powinno być wyciszony podczas odtwarzania.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu muted

muted

Atrybut muted jest atrybutem logicznym elementu audio.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" muted controls></audio>

  </body>
</html>

Rezultat

Podczas odtwarzania przez przeglądarkę internetową zasobu internetowego reprezentowanego przez przykładowego element "audio" dźwięk będzie wyciszony, ponieważ do wspomnianego elementu "audio" został dodany atrybut "muted".

preload

Przeznaczenie atrybutu preload

Atrybut preload wykorzystany wraz z elementem audio określa, w jaki sposób zasób internetowy reprezentowany przez dany element audio powinien zostać wczytany do okna przeglądarki internetowej.

Wartość domyślna

wartością domyślną atrybutu preload elementu audio, gdy wspomniany atrybut preload został przez nas pominięty jest wartość określona przez przeglądarkę internetową (wspomnianą wartością zazwyczaj jest wartość metadata)

auto (gdy nie podaliśmy wartości)

BRAK (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu preload

none

Wartość none oznacza, że zasób internetowy reprezentowany przez dany element audio nie zostanie wczytany do okna przeglądarki internetowej dopóki użytkownik sam nie podejmie próby rozpoczęcia odtwarzania wspomnianego zasobu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" preload="none" controls></audio>

  </body>
</html>

Rezultat

Do momentu, aż użytkownik nie zdecyduje się na kliknięcie na przycisk rozpoczynający odtwarzanie zasobu internetowego reprezentowanego przez przykładowy element "audio", wspomniany zasób internetowy nie zostanie wczytany do okna przeglądarki internetowej, ponieważ do wspomnianego elementu "audio" został dodany atrybut "preload" wraz z wartością "none".

metadata

Wartość metadata oznacza, że tylko informacje metadata o zasobie internetowym reprezentowanym przez dany element audio (np. długość trwania utworu) zostaną wczytane do okna przeglądarki internetowej, natomiast pozostałe informacje o wspomnianym zasobie internetowym reprezentowanym przez element audio zostaną wczytane w momencie gdy użytkownik sam podejmie próbę rozpoczęcia odtwarzania wspomnianego zasobu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" preload="metadata" controls></audio>

  </body>
</html>

Rezultat

Do momentu, aż użytkownik nie zdecyduje się na kliknięcie na przycisk rozpoczynający odtwarzanie zasobu internetowego reprezentowanego przez przykładowy element "audio", tylko informacje metadata o wspomnianym zasobie internetowym będą wczytane w oknie przeglądarki internetowej, ponieważ do wspomnianego elementu "audio" został dodany atrybut "preload" wraz z wartością "metadata".

auto

Wartość auto oznacza polecenie wymuszenia wczytania w całości do okna przeglądarki internetowej zasobu internetowego reprezentowanego przez dany element audio.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" preload="auto" controls></audio>

  </body>
</html>

Rezultat

Zasób internetowy reprezentowany przez przykładowy element "audio" został wczytany w całości do okna przeglądarki internetowej, ponieważ do wspomnianego elementu "audio" został dodany atrybut "preload" wraz z wartością "auto".

Przeglądarka internetowa może zignorować wspomniane polecenie wymuszenia.

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem audio określa adres zasobu internetowego, który powinien być reprezentowany przez dany element audio.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu src

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio src="http://webkod.pl/files/html/utwor-01.mp3" controls></audio>

  </body>
</html>

Rezultat

Zasobem internetowym, który powinien być reprezentowany przez przykładowy element "audio" jest zasób internetowy "utwor-01.mp3" znajdujący się pod adresem "http://webkod.pl/files/html/utwor-01.mp3", dlatego do wspomnianego elementu "audio" został dodany atrybut "src" wraz z wartością "http://webkod.pl/files/html/utwor-01.mp3".