HTML5 ja audio


Ennen verkkosivuilla ei voinut toistaa ääniä ilman erikseen asennettavia lisäosia, kuten Flashia tai QuickTimea.
Onneksi niistä on päästy eroon.
HTML5:en myötä videota ja ääntä on mahdollista upottaa suoraan web-sivulle.

Uusi audio-elementti tukee seuraavia tiedostomuotoja:
*.mp3
Yleisin musiikin jakelun tiedostomuoto. Häviöllinen äänenpakkausmenetelmä. Vapaa.

*.wav tai *.wave
Microsoftin kehittämä ääniformaatti, joka on pakkaamaton (tiedostot ovat isoja).

*.ogg
Ogg Vorbis on vaihtoehto MP3:lle. Ogg Vorbis on avointa koodia (ei tarvita lisenssiä).

HTML5 audio riittää mainiosti “arkikäytössä”, siis yksinkertaisissa toteutuksissa. Mutta esimerkiksi pelit tarvitsevat monipuolisemman tekniikan. Siihen on oma Web Audio-ohjelmointirajapinta.

Audio-elementeille voidaan yksinkertaisimmillaan antaa vain src-ominaisuus, joka kertoo, missä toistettava tiedosto on. Siis näin:


Klikkaa kuva suuremmaksi.

Kun mukana on controls-attribuutti, esitys alkaa vasta kun sivulla olija haluaa käynnistää äänen.

Sinulla on oma audio-tiedosto, tämä on vain malli, jonka olet ennen koodin kirjoittamista kopioinut RasPin /var/www/html-kansioon.
Eri selaimia varten kannattaa tarjota useita eri audio-formaatteja, joista selain käyttää ensimmäiseksi tunnistamaansa. Ainakin yhden niistä olisi hyvä olla *.mp3-formaatti.

Jos haluat että soitto jatkuu ja jatkuu, lisää koodiin loop-määre, näin:
<audio src=mattiteppo.ogg controls loop></audio>

Firefox-selaimessa se (kuuluu ja) näyttää tältä:

Jos mukana on autoplay-attribuutti, käynnistyy esitys automaattisesti heti kun sivu on latautunut.
Muuten säätimet toimivat normaalisti.

Firefox-selaimessa se (kuuluu ja) näyttää tältä:


Audio linkkejä
Tehosteääniä löydät esim. Ylen tehoste-arkistosta (mp3-muoto):
https://freesound.org/search/?f=username:%22YleArkisto%22&s=Date+added+(newest+first)&g=0

Firefoxia varten konvertoi äänet ogg-muotoon, ja moneen muuhun, osoitteessa:
http://audio.online-convert.com/convert-to-ogg

ÄÄNIPÄÄ - ääni-ilmaisun ja äänikerronnan erikoissivut:
http://www.aanipaa.tamk.fi/index.html

Paluu pääsivulle»

Päivitetty 11/2024
Jaa somessa:
Punomo Logo

Kirjaudu Punomoon

Ei vielä Punomo tiliä? Rekisteröidy alla

Punomo Logo

Anna palautetta

Käyttäjiemme palaute auttaa Punomon kehittämisessä. Anna palautetta alla.