Ääntä websivulle

Miten lisätään ääntä verkkosivulle? Tähän löytyy useita mahdollisuuksia, joista esittelen tässä muutaman.

Käytän esimerkkinä musiikkikappaletta, jonka olen tallentanut www-palvelimelle osoitteeseen:

http://jml.kapsi.fi/pore/music/Pore_02_-_I_know_where_I_stand.mp3

Minulla on siis mp3-tiedosto nimeltään Pore_02_-_I_know_where_I_stand.mp3, joka sijaitsee palvelimella jml.kapsi.fi hakemistossa /pore/music/. Näin se saadaan soimaan:

1. Suora linkki tiedostoon

Ensimmäinen tapa tarjota kyseinen tiedosto on tehdä siihen normaali linkki:

I Know Where I Stand (mp3 3.5M).

Se, mitä linkkiä klikkaamalla tapahtuu, riippuu www-selaimesta. Selain saattaa osata soittaa tiedoston tai mahdollisesti se ehdottaa lataamaan tiedoston omalle koneelle, mistä sen voi toistaa koneen mediasoittimella. Tiedoston voi yleensä tallentaa myös klikkaamalla sitä hiiren oikeanpuoleisella napilla ja valitsemalla tallenna nimellä tai jotain vastaavaa. Tapa sopiikin parhaiten sellaisiin tilanteisiin, joissa halutaan jakaa tiedosto tallennettavaksi ja käyttäjän omilla audiosoittimilla kuunneltavaksi.

2. HTML5 & <audio>-elementti

Seuraava tapa voisi olla hyödyntää HTML5-kuvauskielen <audio>-elementtiä sivun koodauksessa seuraavasti:

<audio controls>
<source src="http://jml.kapsi.fi/pore/music/Pore_02_-_I_know_where_I_stand.mp3" type="audio/mpeg">
Valitettavasti selaimesi ei tue tätä audiomuotoa 
</audio>

Tämän tuloksena nykyaikainen www-selain esittää audiosoittimen ja vanhentunut selain ilmoittaa virheestä:

Tämä on suhteellisen helppo ja kevyt toimitatapa, joka vaatii jonkin verran HTML-osaamista. Miinuspuolena on HTML5-vaatimus, jota vanhemmat www-selaimet eivät välttämättä tue (jos et näe yllä audiosoitinta, päivitä www-selaimesi).

3. Sivuille asennettu soitin

Verkosta löytyy useita audiosoittimia, jotka voi asentaa omalle sivustolle. Tässä esimerkki MP3 Player -soittimesta, jonka olen asentanut Tarkkaamo-blogiin:

Soittimen HTML-koodi näyttää tältä:

<object type="application/x-shockwave-flash" data="http://jml.kapsi.fi/jussi/wp-content/plugins/mp3player/player_mp3_maxi.swf" width="400" height="30">
<param name="FlashVars" value="mp3=http://jml.kapsi.fi/pore/music/Pore_02_-_I_know_where_I_stand.mp3&showstop=1&showvolume=1&bgcolor1=9999aa&bgcolor2=ddddee" />"</object>

On huomioitava, että tämä vaatii riittäviä oikeuksia www-palvelimelle, jolla sivusto toimii. Jos käytössä on esimerkiksi Blogger -blogialusta, ei tätä vaihtoehtoa voi käyttää, koska palveluun ei ole mahdollista asentaa tarvittavaa Flash-tiedostoa.

Myös tämän esimerkin soittimessa miinuksena on Flash-toteutus, eli se ei toimi iPadissä eikä iPhonessa. Vaihtoehtona voisi käyttää jotain HTML5-soitinta, esimerkiksi:

• MediaElements.js tai
• JPlayer

4. Äänen tallennukseen ja jakamiseen tarkoitettu verkkopalvelu

Viimeinen, monia etuja tarjoava keino on tallentaa äänitiedostot tätä tarkoitusta varten kehitettyyn verkkopalveluun ja käyttää palvelun tarjoamia jakamis- ja upotusmahdollisuuksia. Suosittelen tähän SoundCloud -palvelua. Sen avulla tiedoston voi upottaa monipuolisen soittimen avulla osaksi www-sivua, ja se mahdollistaa myös muita jakamistapoja:

Yllä oleva upotus toimii seuraavan koodin avulla:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F20013221"></iframe>

SoundCloudin soitin toimii myös iPadilla, ja palvelussa on mainiot mahdollisuudet kommentoimiseen ja kuuluvuuden lisäämiseen, jos se on tavoitteena. Kaupan päälle saa myös tilastointia tiedostojen soittomääristä.