HTML-audio

On monia tapoja toistaa ääntä HTML:ssä.

Ongelmat, ongelmat ja ratkaisut

Äänen toistaminen HTML:ssä ei ole helppoa!

Sinun täytyy hallita suuri määrä taitoja varmistaaksesi, että äänitiedostosi toistuvat kaikissa selaimissa (Internet Explorer, Chrome, Firefox, Safari, Opera) ja kaikilla laitteilla (PC, Mac, iPad, iPhone).

Tässä luvussa CodeW3C.com kertoo ongelmista ja niiden ratkaisuista.

Käytä lisäohjelmia

Selainlisäohjelma on pieni tietokoneohjelma, joka laajentaa selaimen standarditoimintoja.

Lisäohjelmilla on monia käyttötarkoituksia: musiikin toisto, karttojen näyttäminen, pankkitilien vahvistaminen, syötteen hallinta jne.

Voit lisätä lisäohjelmia HTML-sivulle käyttämällä <object> tai <embed>-tagia.

Nämä tagit määrittelevät resurssien (yleensä ei HTML-resurssit) konteinereita, ja ne näytetään selaimessa tai ulkoisessa lisäohjelmassa riippuen tyypistä.

Käytä <embed>-elementtiä

<embed>-tagi määrittelee ulkoisen (ei HTML) sisällön konteinereita. (Se on HTML5-tagi, joka on kelvoton HTML 4:ssä, mutta toimii kaikissa selaimissa).

Seuraava koodinpätkä näyttää MP3-tiedoston, joka on upotettu verkkosivulle:

Esimerkki

<embed height="100" width="100" src="song.mp3" />

Kokeile itse

Kysymys:

  • <embed>-tagi on kelvoton HTML 4:ssä. Sivusi ei voi läpäistä HTML 4:n validointia.
  • Eri selaimet tukevat äänimuotoja eri tavoin.
  • Jos selain ei tue tiedostomuotoa ilman lisäohjelmia, ääntä ei voi toistaa.
  • Jos käyttäjän tietokoneessa ei ole asennettu lisäohjelmia, ääntä ei voi toistaa.
  • Jos tiedosto muutetaan toiseen muotoon, sitä ei edelleenkään voi toistaa kaikissa selaimissa.

Huomautus:Ratkaistaan validointiongelmat käyttämällä <!DOCTYPE html> (HTML5).

Käytä <object>-elementtiä

<object tag>-tagi voi myös määritellä ulkoisen (ei HTML) sisällön konteinereita.

Seuraava koodinpätkä näyttää MP3-tiedoston, joka on upotettu verkkosivulle:

Esimerkki

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

Kokeile itse

Kysymys:

  • Eri selaimet tukevat äänimuotoja eri tavoin.
  • Jos selain ei tue tiedostomuotoa ilman lisäohjelmia, ääntä ei voi toistaa.
  • Jos käyttäjän tietokoneessa ei ole asennettu lisäohjelmia, ääntä ei voi toistaa.
  • Jos tiedosto muutetaan toiseen muotoon, sitä ei edelleenkään voi toistaa kaikissa selaimissa.

Käytä HTML5 <audio>-elementtiä

<audio>-elementti on HTML5-elementti, joka on kelvoton HTML 4:ssä, mutta toimii kaikissa selaimissa.

Esimerkki

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Selaimesi ei tue tätä äänimuotoa.
</audio>

Kokeile itse

Yllä olevassa esimerkissä käytettiin mp3-tiedostoa, joten se toimii Internet Explorerissä, Chrome:ssa ja Safarissa.

Tämä ääni toimi Firefoxissa ja Operassa, koska lisättiin ogg-tyyppinen tiedosto. Jos se epäonnistuu, näytetään virheilmoitus.

Kysymys:

  • <audio>-tagi on kelvoton HTML 4:ssä. Sivusi ei voi läpäistä HTML 4:n validointia.
  • Sinun täytyy muuntaa äänitiedosto toiseen muotoon.
  • <audio>-elementti ei toimi vanhoissa selaimissa.

Huomautus:Ratkaistaan validointiongelmat käyttämällä <!DOCTYPE html> (HTML5).

Paras HTML-ratkaisu

Esimerkki

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

Kokeile itse

Yllä olevassa esimerkissä käytetään kahta eri äänimuotoa. HTML5 <audio>-elementti yrittää toistaa ääntä mp3:n tai ogg:n avulla. Jos tämä epäonnistuu, koodi yrittää palata <embed>-elementtiin.

Kysymys:

  • Sinun täytyy muuntaa ääni eri muotoon.
  • <audio>-elementti ei voi vahvistaa HTML 4 ja XHTML:ää.
  • <embed>-elementti ei voi vahvistaa HTML 4 ja XHTML:ää.
  • <embed>-elementti ei voi palata näyttämään virheilmoituksia.

Huomautus:Ratkaistaan validointiongelmat käyttämällä <!DOCTYPE html> (HTML5).

Mikä on yksinkertaisin tapa lisätä ääntä verkkosivulle?

Mikä on yksinkertaisin tapa lisätä ääntä verkkosivulle?

Yahoo Media Player on varmasti yksi niistä.

Yahoo Media Player käyttö on erilainen tapa. Sinun tarvitsee vain antaa Yhden tehtäväksi kappaleiden toiston.

Se voi toistaa mp3:n ja useita muita muotoja. Voit lisätä sen helposti verkkosivulle yhdellä rivillä koodia, ja muuntaa HTML-sivun ammattimaiseksi soittolistaksi.

Yahoo Media Player

Esimerkki

<a href="song.mp3">Toista Ääni</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Kokeile itse

Yahoo Media Player käyttö on ilmainen. Jos haluat käyttää sitä, sinun täytyy lisätä tämä JavaScript-sivun alaan:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Sitten sinun tarvitsee vain liittää MP3-tiedoston linkki HTML-sivullasi, ja JavaScript luo automaattisesti toistopainikkeen jokaiselle kappaleelle:

<a href="song1.mp3">Toista Kappale 1</a>
<a href="song2.mp3">Toista Kappale 2</a>
...
...
...

Yahoo Media Player tarjoaa käyttäjilleen pienikokoisen toistopainikkeen, ei täydellistä toistinta. Kun painat tätä painiketta, avautuu täydellinen toistin.

Huomaa, että tämä soittaja pysyy aina ikkunarivin pohjalla. Napsauttamalla sitä voit vetää sen ulos.

Käytä hyperlinkkejä

Jos sivulla on viittauksia media-tiedostoihin, useimmat selaimet käyttävät "avustavaa sovellusta" tiedoston toistamiseksi.

Seuraava koodipalanen näyttää mp3-tiedostoon osoittavan linkin. Jos käyttäjä napsauttaa linkkiä, selain käynnistää "avustava sovelluksen" tiedoston toistamiseksi:

Esimerkki

<a href="song.mp3">Toista ääni</a>

Kokeile itse

Sisennetty ääni

Kun sisällytät äänen sivulle tai se on osa sivua, sitä kutsutaan sisennetyksi ääneksi.

Jos aiot käyttää sisennettyä ääntä web-sovelluksessa, sinun on tiedostettava, että monet ihmiset pitävät sisennettyä ääntä ärsyttävänä. Lisäksi huomaa, että käyttäjä voi olla suljennut selaimen sisennetyn äänen asetuksen.

Parhaan suosituksenamme on sisällyttää ne vain silloin, kun käyttäjä haluaa kuulla sisennettyä ääntä. Esimerkki: käyttäjä kuuntelee tallennetta ja napsauttaa linkkiä, joka avaa sivun ja aloittaa tallenteen toiston.

HTML 4.01 multimedia-tunnisteet

Tunniste Kuvaus
<applet> Ei suosittele. Määrittää sisennetyn appletin.
<embed> HTML4 ei suosittele, HTML5 sallii. Määrittää sisennetyn objektin.
<object> Määrittää sisennetyn objektin.
<param> Määrittää objektin parametrit.

HTML 5 multimedia-tunnisteet

Tunniste Kuvaus
<audio> Tunniste määrittää äänen, kuten musiikin tai muun äänivirran.
<embed> Tunnisteet määrittävät sisennetyn sisällön, kuten lisäohjelmistot.