Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Ääni-objektien upotus Web-sivuille

Johdanto

HTML5-suositus toi mukanaan uuden, yksinkertaisen ja kevyen tavan upottaa sivuille äänidataa, kuten musiikkia. Enää ei ole tarvetta ongelmallisille selainlaajennuksille, kamalille skriptikirjastoille, eikä hankalalle ja huonosti tuetulle OBJECT-elementille. Nykyisin (2016) äänet saadaan sivuille mutkattomasti ja kattavasti, vain yhdellä, siihen tarkoitukseen suunnitellulla audio-elementillä.

Äänisoitin

Toimintavalmiiseen ja näkyvillä ohjaimilla varustettuun äänisoittimeen riittää siis yksi audio-elementti kahdella attribuutilla varustettuna:

Edellinen näyttää koodina seuraavalta:

<audio
  controls
  src="audio/Anikdote - Life Is Over.mp3">
<p>Vaihtoehtoinen sisällön saavuttamiskeino tähän!</p>
</audio>

Elementin sisältö on varattu vanhemmille, elementtiämme tukemattomille selaimille.

Koodin tulos

Esimerkkikoodimme tulostuu seuraavasti:

Selaimen tulisi esittää, joko:

Mediaelementtien manipulointi

HTMLMediaElement-rajapinta tarjoaa monipuolisen keinokokoelman mediaelementtien (audio ja video) luontiin ja manipulointiin. Audio-elementti on siis käytettävissä JavaScript-olioina, metodeineen, ominaisuuksineen ja tapahtumineen.

Seuraa muutama esimerkki, joiden koodi on helposti sovellettavissa myös video-elementtiin. Käytännössä riittänee kun vaihtaa luotavan elementin video:ksi ja lähdetiedoston MP4:ksi.

Esimerkki 1 - äänisoittimen dynaaminen luonti

Useimmiten onkin syytä luoda mediaelementti dynaamisesti, mikäli skriptitukea tarvitaan. Seuraavassa luomme samanlaisen soittimen kuin yläpuolella. script-elementtimme näyttää seuraavalta:

/* Luomme elementin ja sille kahvan: */
var soitin = document.createElement('audio');
/* Selaimen toimintaohjaimet näkyville: */
    soitin.controls = true;
/* Lähdetiedosto: */
    soitin.src = 'audio/Anikdote - Life Is Over.mp3';
/* Sijoitetaan soitin e1-solmun (tässä <div id="e1"...)
   viimeiseksi lapseksi: */
    document.getElementById('e1').appendChild(soitin);

Ja esimerkki 1 tulostuu kuten edellinen audio-elementtimme, mikäli ympäristöehdot sen sallivat:

Esimerkki 2 - asiakas valitsee esitettävän äänitiedoston

Joskus samalle sivulle tarvitaan useita ääniobjekteja. Usein, monen soittimen sijaan, on mielekkäämpää käyttää mediaelementtien rajapintaa manipuloimalla yhden soittimen lähdetiedostoa. Seuraava esimerkkimme koostuu valelinkeistä ja niihin toiminnallisuuden tuovasta skriptistä. Näiden avulla vaihdamme ylempänä luodun soittimemme src-attribuutin arvoa.

Merkkauksemme näyttää seuraavalta:

<p>Valitse Anikdoten soitettava kappale:
<b onclick="vaihdaLähde('audio/Anikdote - Life Is Over.mp3');">Life Is Over</b> tai
<b onclick="vaihdaLähde('audio/Anikdote - Which Direction.mp3');">Which Direction</b>.
</p>

Tuossa käytetyt elementit eivät ole oleellisia, vaan nuo onclick-tapahtuma-attribuutit, joiden funktio määritellään seuraavalla skriptillä:

function vaihdaLähde(lähde) {//argumenttina lähteen polku
/* Kahva soittimelle luotiin edellisessä
   skriptissä, joten se on käyttövalmis. */
    soitin.src = lähde;//vaihdetaan äänitiedoston lähde
    soitin.load();//ladataan
    soitin.play();//anna sen soida, whoo-o
}

Esimerkki 2 tulostuu seuraavasti:

Valitse Anikdoten soitettava kappale: Life Is Over tai Which Direction.

Huomaa sijoittaa script-elementti soittimen jälkeen tai muulla tavalla varmistaa että skriptimme "näkee" kahvamme.

Esimerkki 3 - automaattinen soittolista näkymättömällä soittimella

Tässä hieman monipuolisemmassa esimerkissä luodaan myös soitin dynaamisesti, mutta rakentajaa käyttäen. Emme myöskään käytä selaimen toimintaohjaimia, vaan hallitaan soitinta itse määritetyllä elementillä. Lisäksi tulostetaan sivulle kulloisenkin kappaleen otsikko. Taas merkkaus on minimaalista:

<button 
 onclick="soita_paussi();"
 id="soittonappi">Soita lista</button>
<p id="otsikkoalue">Soitettavan kappaleen otsikkoalue.</p>

Skriptimme on monimutkaisempi:

/* Rakennetaan uusi näkymätön soitin (uudella kahvalla),
   argumenttina lähdetiedoston polku: */
var soitin2 = new Audio("audio/Anikdote - Life Is Over.mp3");

/* Luodaan viittaus soita/paussi-nappiin: */
var soittonappi = document.getElementById("soittonappi");//<button id="soittonappi"...

/* luodaan viittaus biisikohtaiseen tekstikappaleeseen: */
var otsikkoalue = document.getElementById("otsikkoalue");//<p id="otsikkoalue"...

 /* Luodaan biisitaulukko, lisää/muokkaa lähteitä tarpeen mukaan: */
var lähteet = [];//luodaan taulukko
 lähteet[0] = "audio/Anikdote - Life Is Over.mp3";   //1. biisi
 lähteet[1] = "audio/Anikdote - Which Direction.mp3";//2. biisi

/* Luodaan biisikohtainen otsikkotaulukko: */
var otsikot = [];
 otsikot[0] = "Anikdote: Life Is Over";   //1. otsikko
 otsikot[1] = "Anikdote: Which Direction";//2. otsikko

/* Luodaan apumuuttuja viittaamaan kulloiseenkin aktiiviin biisiin: */
var kappale = 0;//0 vastaa 1. biisiä

/* Soitto-paussi-funktio: */
function soita_paussi() {
  if (soitin2.paused) {//jos paussi päällä
    soitin2.play();
    otsikkoalue.innerHTML = otsikot[kappale];//vaihdetaan otsikko
    soittonappi.innerHTML = "Paussi";//vaihdetaan napin teksti
  }
  else {//muuten paussi päälle
    soitin2.pause();
    soittonappi.innerHTML = "Jatka toistoa";
  }
}

/* Rekisteröidään tapahtumakuuntelija kuuntelemaan kappaleen loppua: */
soitin2.addEventListener("ended",function() {//ajetaan funktiolauseke
  if (kappale === lähteet.length - 1) {//ollaanko soittolistan lopussa?
      kappale = 0;//mennään listan alkuun
  } else {//muuten
      kappale++;//seuraavaan biisiin
  }
    otsikkoalue.innerHTML = otsikot[kappale];
    soitin2.src = lähteet[kappale];
    soitin2.load();
    soitin2.play();
  });

Esimerkki 3 tulostuu seuraavasti:

Soitettavan kappaleen otsikkoalue.

Dokumentin julkaisupäivämäärä: 2016-02-15.
Osmo Saarikumpu