HTML:ssä ääni- ja videosisältö voidaan upottaa suoraan verkkosivuille käyttämällä vastaavasti <audio>- ja <video>-tageja. Tarkastellaan ensin äänen upottamista:

Äänen upottaminen

<audio>-tagi upottaa äänisisällön HTML-dokumenttiin. Sen avulla voit toistaa äänitiedostoja suoraan selaimessa.

Äänitiedoston attribuutit

• controls: Lisää vakiotoiminnot, kuten toisto, tauko ja äänenvoimakkuuden säätö, soittimeen;
• autoplay: Määrittää, aloitetaanko äänentoisto automaattisesti sivun latautuessa;
• loop: Määrittää, toistetaanko ääni jatkuvasti uudelleen.

Esimerkki:

<audio controls autoplay loop>
  <!-- Some other tags -->
</audio>

Olet ehkä huomannut, että olemme määritelleet vain äänisoittimen ominaisuudet, mutta emme ole maininneet mistä ääni tulee. Tarvitsemme <source>-tunnisteen.

Lähde

<source>-tunnistetta käytetään <audio>-tunnisteen sisällä määrittämään äänitiedoston URL-osoite ja sen attribuutit. Voimme käyttää src-attribuuttia määrittämään äänitiedoston URL-osoitteen ja type-attribuuttia määrittämään äänitiedoston MIME-tyypin.
Esimerkki:

<audio controls autoplay loop>
  <source src="audio-url.mp3" type="audio/mpeg" />
  <source src="audio-url.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

Yllä olevassa esimerkissä:

• <audio>-elementillä on attribuutit kuten controls, autoplay ja loop;
• <source>-elementit määrittävät äänitiedostojen lähdeosoitteet ja niiden MIME-tyypit;
• Jos selain ei tue <audio>-elementtiä tai määritettyjä ääniformaatteja, näytetään vaihtoehtoinen teksti Your browser does not support the audio element..

Videotutoriaali