Anna verkkosivuston vierailijoiden toistaa MP3-musiikkia JavaScript-toiminnon avulla.
On useita tapoja upottaa ja toistaa MP3-äänitiedostoja Web-sivuillesi. Vanhentunut "embed"-tunniste HTML: ssä, useissa Flash-soittimissa ja Java-pohjaisissa soittimissa ovat kaikki esimerkkejä. HTML5-standardi, jossa painotetaan komentosarjoja ja se ei ole riippuvainen kolmannen osapuolen ohjelmistoista, tarjoaa yhteensopivimman tavan upottaa ja toistaa MP3-tiedostoja Web-sivuilla jatkossa. Upota MP3-tiedosto HTML5 "audio" -objektilla ja aloita sen toisto JavaScript-toiminnolla
Vaihe 1
Lisää seuraava koodi HTML-dokumentin runkoon:
Päivän video
Tämä koodi upottaa ja lataa MP3-tiedoston, mutta ei toista sitä. "src"-tunnisteen arvo sisältää MP3-tiedoston polun ja tiedostonimen.
Vaihe 2
Lisää seuraava JavaScript-koodi HTML-dokumenttisi "head"-tagien väliin:
Kun tätä toimintoa kutsutaan, se käyttää "audio"-elementtiä sen id: llä ("mp3") ja käyttää menetelmää play() sen toistamiseen.
Vaihe 3
Lisää Web-sivulle painike "playMP3"-toiminnon kutsumiseksi, kun käyttäjä napsauttaa sitä. Lisää seuraava koodi HTML-dokumentin runkoon:
Muuta "arvo"-attribuuttia antaaksesi painikkeelle eri otsikon.
Vaihe 4
Käytä seuraavaa toimintoa "playMP3":n sijaan antaaksesi käyttäjän keskeyttää tiedoston sen käynnistämisen jälkeen:
function playpauseMP3(){ if (document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); } }
Muuta "input"-tunnisteen "onClick"-attribuutti vaiheessa 3 vastaamaan tämän funktion nimeä.
