Autor publikacji
Virtual Patriot - Administrator

audio

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu audio

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

Dodatkowe artykuły związane z elementem audio

Informacje techniczne 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, wtedy kontekstem wewnętrznym takiego elementu audio może być zero lub więcej elementów track, a 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, wtedy kontekstem wewnętrznym takiego elementu audio może być zero lub więcej elementów source, następnie zero lub więcej elementów 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 występuje 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 występuje 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 występuje 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".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

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

składnia HTML

<audio> ... </audio>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

  • none (jeżeli przeglądarka internetowa interpretuje element audio oraz jeżeli element audio nie posiada atrybutu controls)

  • inline-block (jeżeli przeglądarka internetowa interpretuje element audio oraz jeżeli element audio posiada atrybut controls)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu audio)

Przypuszczalnie domyślne reguły CSS elementu audio

/* wszystkie reguły CSS, jeżeli przeglądarka internetowa interpretuje element "audio" */

audio {
  display:none;
}

audio[controls] {
  display:inline-block;
}

audio:focus {
  outline-width:1px;
  outline-style:dotted;
}

Interpretacja elementu audio

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Interpretuje atrybut crossorigin, lecz od wersji "11".

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu audio

Atrybut Lokalny

autoplay

Przeznaczenie atrybutu autoplay

Atrybut autoplay wykorzystany wraz z elementem audio pozwala nam określić 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="https://webkod.pl/files/html/utwor-01.mp3" controls autoplay></audio>

  </body>
</html>

Rezultat

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

Atrybut Lokalny

controls

Przeznaczenie atrybutu controls

Atrybut controls wykorzystany wraz z elementem audio pozwala nam określić czy dany element audio powinien posiadać przyciski interfejsu użytkownika służące do kontrolowania odtwarzania zasobu internetowego reprezentowanego przez dany 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="https://webkod.pl/files/html/utwor-01.mp3" controls></audio>

  </body>
</html>

Rezultat

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

Atrybut Lokalny

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem audio pozwala nam określić, 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.

Atrybut Lokalny

loop

Przeznaczenie atrybutu loop

Atrybut loop wykorzystany wraz z elementem audio pozwala nam określić 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="https://webkod.pl/files/html/utwor-01.mp3" controls loop></audio>

  </body>
</html>

Rezultat

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

Atrybut Lokalny

muted

Przeznaczenie atrybutu muted

Atrybut muted wykorzystany wraz z elementem audio pozwala nam określić czy zasób internetowy reprezentowany przez dany element audio powinien 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="https://webkod.pl/files/html/utwor-01.mp3" muted controls></audio>

  </body>
</html>

Rezultat

Zasób internetowy "utwor-01.mp3" reprezentowany przez przykładowy element "audio" jest wyciszony podczas odtwarzania przez przeglądarkę internetową, ponieważ do wspomnianego elementu "audio" został dodany atrybut "muted".

Atrybut Lokalny

preload

Przeznaczenie atrybutu preload

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

Gdy dany element "audio" posiada atrybut autoplay, wtedy atrybut "preload" traci swoje działanie.

Wartość domyślna

wartość ustalona przez przeglądarkę internetową (gdy pominęliśmy atrybut), sugerowaną wartością jest wartość metadata

auto (gdy nie podaliśmy wartości)

wartość ustalona przez przeglądarkę internetową (gdy podaliśmy wartość nieprawidłową), sugerowaną wartością jest wartość metadata

Wartości atrybutu preload

none

Wartość none oznacza, że zasób internetowy reprezentowany przez dany element audio zostanie wczytany do okna przeglądarki internetowej dopiero w momencie gdy użytkownik sam podejmie próbę rozpoczęcia odtwarzania docelowego zasobu internetowego.

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Dopiero w momencie gdy użytkownik zdecyduje się na naciśnięcie przycisku rozpoczynającego odtwarzanie zasobu internetowego "utwor-01.mp3" reprezentowanego przez przykładowy element "audio", zasób internetowy "utwor-01.mp3" 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 do momentu rozpoczęcia odtwarzania zasobu internetowego reprezentowanego przez dany element audio tylko niektóre informacje metadata o docelowym zasobie internetowym (np. długość trwania utworu) powinny zostać wczytane do okna przeglądarki internetowej.

Natomiast dalsze wczytywanie się, podczas odtwarzania, zasobu internetowego reprezentowanego przez dany element audio powinno odbywać się w najwolniejszym możliwym tempie, które nie wpływa na jakość odtwarzania.

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Do momentu gdy użytkownik nie zdecyduje się na naciśnięcie przycisku rozpoczynającego odtwarzanie zasobu internetowego "utwor-01.mp3" reprezentowanego przez przykładowy element "audio", tylko niektóre informacje metadata o zasobie internetowym "utwor-01.mp3" 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, że zasób internetowy reprezentowany przez dany element audio powinien zostać wczytany w całości do okna przeglądarki internetowej.

Przykładowy Kod HTML

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

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

  </body>
</html>

Rezultat

Zasób internetowy "utwor-01.mp3" 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".

Atrybut Lokalny

src

Przeznaczenie atrybutu src

Atrybut src wykorzystany wraz z elementem audio pozwala nam określić adres zasobu internetowego, który chcemy, aby 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="https://webkod.pl/files/html/utwor-01.mp3" controls></audio>

  </body>
</html>

Rezultat

Zasobem internetowym reprezentowanym przez przykładowy element "audio" jest zasób internetowy "utwor-01.mp3" znajdujący się pod adresem "https://webkod.pl/files/html/utwor-01.mp3", ponieważ do wspomnianego elementu "audio" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/utwor-01.mp3".