Ää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:

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

5 kommenttia

  1. Hyvä paketti. Toi HTML5-toteutus on henk. koht. houkuttelevin mutta todennäköisimmin lähtisin ton SoundCloudin suuntaan. Riippuu tietty vähän, että mitä olisin jakamassa.

  2. […] Mikäli selain ei tue HTML5-version ominaisuuksia, käyttäjä näkee vain tekstin Selaimesi ei tue HTML-kielen audio elementtiä. Selaimen päivittäminen korjaa tilanteen eikä mediasoitinta. Voit lukea lisää äänitiedoston lisäämisestä blogiin täältä. […]

  3. Simo

    Tuossa kohta
    ”3. Sivuille asennettu soitin….. MP3 Player..” soitin ,mallia ”multyi player” miten siihen saa lisättyä soittolistoja pelkillä kapple nimillä.? Ohjeistuksessa löytyy kyllä vinkkiä lisätä generaattori vaihessa kaikki soitto kappaleet yhtenä listana pysty viivalla ”|” erotetttuina kirjoitettuna koko lähde osoite soittotiedosto nimineen. Mutta saada näkymään soittimessa pelkät kappale nimet , ilman lähde polkuja se ei onnistu?. Generaattorissa on kyllä valikko johon voi linkittää valmiin soitto listan, mutta soittolistan tiedosto päätteestä ja rakenteesta ei ole ohjeistusta soittimen help tiedoissa? Olisiko tarjolla joku ohje linkki josta em. asia olisi apuna aloittelijalle ?

    1. Simo

      Tarkoitin tietysti ” MP3 Player..” soitin ,mallia ”multi player”. Pahoittelut kirjoitus virheestä.

    2. Jussi Linkola

      Moi Simo. Minulla ei valitettavasti ole enempää kokemusta tuosta esimerkin MP3-soittimesta. Toivottavasti saat sen toimimaan tarpeesi mukaan.

Kommentoi julkaisua

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Täydennä alla oleva laskutehtävä ennen lähettämistä: * Time limit is exhausted. Please reload CAPTCHA.