Come usare JavaScript per riprodurre un file MP3

Esistono diversi modi per incorporare e riprodurre file audio MP3 nelle pagine web. Il tag "embed" deprecato in HTML, vari lettori Flash e lettori basati su Java sono tutti esempi. Lo standard HTML5, con la sua enfasi sullo scripting e la mancanza di dipendenza da software di terze parti, offre il modo più compatibile per incorporare e riprodurre MP3 nelle pagine web. Incorporare il file MP3 con l'oggetto "audio" HTML5, e poi usare una funzione JavaScript per avviarne la riproduzione.

Passaggio 1

Aggiungere il seguente codice al body del documento HTML:

<audio id="mp3" src="percorso/file.mp3"></audio>

Questo codice incorpora e carica il file MP3, ma non lo riproduce. Il valore del tag "src" contiene il percorso e il nome del file MP3.

Passaggio 2

Aggiungere il seguente codice JavaScript tra i tag "head" del documento HTML:

function playMP3() { document.getElementById("mp3").play(); }

Questa funzione, quando chiamata, accede all'elemento "audio" tramite il suo id ("mp3") e usa il metodo play() per riprodurlo.

Passaggio 3

Aggiungere un pulsante alla pagina web per chiamare la funzione "playMP3" quando l'utente lo clicca. Aggiungere il seguente codice al body del documento HTML:

<input type="button" value="Riproduci" onClick="playMP3()">

Modificare l'attributo "value" per dare al pulsante un titolo diverso.

Passaggio 4

Usare la seguente funzione invece di "playMP3" per permettere all'utente di mettere in pausa il file dopo averlo avviato:

function playpauseMP3(){ if(document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); } }

Cambiare l'attributo "onClick" del tag "input" al Passaggio 3 per far corrispondere il nome di questa funzione.