Audio v HTML

Zvočno vsebino v dokument HTML vključimo z elementom <audio>. Ta element omogoča predvajanje zvoka neposredno v spletni strani in v sodobnih brskalnikih praviloma ne zahteva dodatnih vtičnikov.

Zvočni posnetek lahko vključimo z eno datoteko ali pa ponudimo več različnih virov. V takem primeru brskalnik uporabi prvi vir, ki ga podpira.

Pomni: Znotraj elementa <audio> lahko uporabimo enega ali več elementov <source>. Tako povečamo možnost, da bo brskalnik našel podprt format zvoka.

Osnovna pravila

Zvočno vsebino vključimo z elementom <audio>.
Za posamezne datoteke uporabimo element <source>.
Z atributom controls prikažemo osnovne kontrolnike za predvajanje.
Po potrebi lahko ponudimo več različnih virov zvoka.
Če element ni podprt, se prikaže nadomestno besedilo znotraj elementa <audio>.

Pozor: Samodejno predvajanje zvoka ni vedno zaželeno. V sodobni praksi lahko brskalnik samodejno predvajanje zvoka brez utišanja tudi blokira.

Zvočni formati

Pri spletnem zvoku se pogosto uporabljajo predvsem formati MP3, WAV in Ogg. Podpora posameznim formatom se lahko razlikuje glede na brskalnik, operacijski sistem in uporabljene kodeke, zato je pri spletni rabi pogosto smiselno ponuditi več virov.

MP3 – zelo pogost format za spletni zvok.
WAV – format brez izgub oziroma z manjšo stopnjo stiskanja, vendar pogosto z večjo datoteko.
Ogg – odprt format, ki se na spletu uporablja redkeje kot MP3.

Ker se podpora formatom lahko razlikuje, je pogosto koristno ponuditi vsaj dva vira, na primer MP3 in Ogg.

Osnovni primer zvoka

Najpreprostejši primer uporabe elementa <audio> vsebuje en vir in atribut controls, ki prikaže osnovne kontrolnike predvajanja.

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   Vaš brskalnik ne podpira audio elementa.
</audio>

Primer posameznih formatov

Posamezne formate lahko vključimo tudi ločeno:

Primer: format MP3

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   Vaš brskalnik ne podpira audio elementa.
</audio>

Primer: format WAV

<audio controls>
   <source src="audio.wav" type="audio/wav">
   Vaš brskalnik ne podpira audio elementa.
</audio>

Primer: format Ogg

<audio controls>
   <source src="audio.ogg" type="audio/ogg">
   Vaš brskalnik ne podpira audio elementa.
</audio>

Več virov zvoka

Elementu <audio> lahko dodamo več elementov <source>. Brskalnik bo poskusil uporabiti prvi podprti vir. Taka rešitev izboljša združljivost med različnimi okolji.

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   <source src="audio.wav" type="audio/wav">
   <source src="audio.ogg" type="audio/ogg">
   Vaš brskalnik ne podpira audio elementa.
</audio>

Pogosti atributi elementa `<audio>`

controls – prikaže kontrolnike za predvajanje.
autoplay – zvok se začne samodejno predvajati.
muted – zvok je utišan.
loop – zvok se po koncu predvaja znova.
preload – nakaže način predhodnega nalaganja zvočne vsebine.

Primer z atributoma autoplay in muted:

<audio controls autoplay muted>
   <source src="audio.mp3" type="audio/mpeg">
</audio>

Za običajno uporabo zvoka v dokumentu je element <audio> praviloma primernejša rešitev kot zahtevnejši postopki z zvočnimi knjižnicami ali dodatnimi tehnologijami.

Upravljanje zvoka z JavaScriptom

Zvočni element lahko upravljamo tudi z JavaScriptom. Tako lahko izdelamo lastne gumbe za predvajanje, ustavljanje ali utišanje.

<button onclick="predvajajUstavi()">Play/Pause</button>
<button onclick="utišajPreklopi()">Sound On/Off</button>

<audio id="audio1" controls>
   <source src="audio.mp3" type="audio/mpeg">
   Vaš brskalnik ne podpira audio elementa.
</audio>

<script>
  var mojZvok = document.getElementById("audio1");

  function predvajajUstavi() {
    if (mojZvok.paused) mojZvok.play();
    else mojZvok.pause();
  }

  function utišajPreklopi() {
    mojZvok.muted = !mojZvok.muted;
  }
</script>

Vsebina med začetno in končno oznako <audio> je rezervno besedilo, ki se prikaže, če brskalnik elementa ne podpira.

Priporočila

Za vgradnjo zvoka uporabljaj element <audio>.
Po potrebi ponudi več virov zvoka z elementi <source>.
Za običajno uporabo dodaj atribut controls.
Samodejno predvajanje uporabljaj previdno.
Dodaj tudi rezervno besedilo za primer nepodpore elementa.

Pogoste napake

Zvočna vsebina je vključena samo v enem formatu, čeprav bi bil smiseln tudi dodatni vir.
Pri zvočnem elementu ni dodan atribut controls, čeprav uporabnik potrebuje osnovne kontrolnike.
Pri samodejnem predvajanju ni upoštevano, da ga brskalnik lahko blokira.
Rezervno besedilo znotraj elementa <audio> ni zapisano.
Atribut muted ni uporabljen tam, kjer bi bil potreben za samodejno predvajanje.

Nazaj

Naprej