Audio HTML

Ci sono molti modi per riprodurre suoni in HTML.

Problemi, problemi e soluzioni

Non è facile riprodurre audio in HTML!

Devi padroneggiare molte tecniche per assicurarti che i tuoi file audio possano essere riprodotti su tutti i browser (Internet Explorer, Chrome, Firefox, Safari, Opera) e su tutti i dispositivi hardware (PC, Mac, iPad, iPhone).

In questo capitolo, CodeW3C.com ha riassunto problemi e soluzioni.

Usa i plugin

Il plugin del browser è un piccolo programma informatico che estende le funzionalità standard del browser.

I plugin hanno molti usi: riproduzione musicale, visualizzazione mappe, verifica account bancari, controllo input, ecc.

Puoi usare i tag <object> o <embed> per aggiungere plugin alle pagine HTML.

Questi tag definiscono contenitori per risorse (solitamente non risorse HTML), che vengono visualizzati dal browser o da plugin esterni a seconda del tipo.

Usa l'elemento <embed>

Il tag <embed> definisce un contenitore per contenuti esterni (non HTML) (è un tag HTML5, non valido in HTML4, ma funzionante in tutti i browser).

Il seguente frammento di codice può visualizzare il file MP3 integrato nel sito web:

Esempio

<embed height="100" width="100" src="song.mp3" />

Prova personalmente

Problema:

  • Il tag <embed> non è valido in HTML 4. La pagina non può superare la verifica HTML 4.
  • I browser supportano i formati audio in modo diverso.
  • Se il browser non supporta il formato del file senza plugin, non è possibile riprodurre l'audio.
  • Se l'utente non ha installato il plugin, non può riprodurre l'audio.
  • Se il file viene convertito in un altro formato, non può essere riprodotto in tutti i browser.

Nota:Usa <!DOCTYPE html> (HTML5) per risolvere problemi di validazione.

Usa l'elemento <object>

Il tag <object> può anche definire un contenitore per contenuti esterni (non HTML).

Il seguente frammento di codice può visualizzare il file MP3 integrato nel sito web:

Esempio

<object height="100" width="100" data="song.mp3"></object>

Prova personalmente

Problema:

  • I browser supportano i formati audio in modo diverso.
  • Se il browser non supporta il formato del file senza plugin, non è possibile riprodurre l'audio.
  • Se l'utente non ha installato il plugin, non può riprodurre l'audio.
  • Se il file viene convertito in un altro formato, non può essere riprodotto in tutti i browser.

Usa l'elemento <audio> HTML5

L'elemento <audio> è un elemento HTML5, non valido in HTML 4, ma funzionante in tutti i browser.

Esempio

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Il tuo browser non supporta questo formato audio.
</audio>

Prova personalmente

L'esempio sopra utilizza un file mp3, quindi è efficace in Internet Explorer, Chrome e Safari.

Per rendere questo audio efficace anche in Firefox e Opera, è stato aggiunto un file di tipo ogg. Se fallisce, verrà visualizzato un messaggio di errore.

Problema:

  • Il tag <audio> non è valido in HTML 4. La tua pagina non può superare la verifica HTML 4.
  • Devi convertire il file audio in un formato diverso.
  • L'elemento <audio> non funziona nei browser obsoleti.

Nota:Usa <!DOCTYPE html> (HTML5) per risolvere problemi di validazione.

La migliore soluzione HTML

Esempio

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Prova personalmente

L'esempio sopra utilizza due formati audio diversi. L'elemento <audio> HTML5 cercherà di riprodurre l'audio in mp3 o ogg. Se non riesce, il codice tenterà di utilizzare l'elemento <embed>.

Problema:

  • Devi convertire l'audio in un formato diverso.
  • L'elemento <audio> non può passare la validazione HTML 4 e XHTML.
  • L'elemento <embed> non può passare la validazione HTML 4 e XHTML.
  • L'elemento <embed> non può essere utilizzato per visualizzare messaggi di errore.

Nota:Usa <!DOCTYPE html> (HTML5) per risolvere problemi di validazione.

Il modo più semplice per aggiungere audio a un sito web

Qual è il modo più semplice per aggiungere audio a una pagina web?

Il media player di Yahoo è assolutamente uno di loro.

L'uso del Yahoo Media Player è un approccio diverso. Devi semplicemente lasciare che Yahoo si occupi della riproduzione delle canzoni.

Può riprodurre mp3 e una serie di altri formati. Con una singola riga di codice, puoi aggiungerlo alla tua pagina web, trasformando facilmente una pagina HTML in una playlist professionale.

Yahoo Media Player

Esempio

<a href="song.mp3">Riproduci Suono</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Prova personalmente

L'uso del Yahoo Player è gratuito. Per utilizzarlo, devi inserire questo script JavaScript nella parte inferiore della tua pagina web:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Poi devi semplicemente collegare il link del file MP3 al tuo HTML, JavaScript creerà automaticamente un pulsante di riproduzione per ogni canzone:

<a href="song1.mp3">Riproduci Canzone 1</a>
<a href="song2.mp3">Riproduci Canzone 2</a>
...
...
...

Il Yahoo Media Player offre ai tuoi utenti un piccolo pulsante di riproduzione, non un riproduttore completo. Tuttavia, quando fai clic sul pulsante, viene visualizzato il riproduttore completo.

Notare che il riproduttore è sempre ancorato nella parte inferiore della finestra. Basta cliccarci sopra per aprirlo e trascinarlo fuori.

Utilizzo di collegamenti

Se una pagina web contiene link a file multimediali, la maggior parte dei browser utilizzerà un'applicazione ausiliaria per riprodurre il file.

Il seguente frammento di codice mostra un link a un file mp3. Se l'utente fa clic sul link, il browser avvierà un'applicazione ausiliaria per riprodurre il file:

Esempio

<a href="song.mp3">Riproduci il suono</a>

Prova personalmente

Suoni in linea

Quando si includono suoni in una pagina web o come parte di una pagina web, si parla di suoni in linea.

Se hai intenzione di utilizzare suoni in linea in applicazioni web, devi essere consapevole che molte persone trovano fastidiosi i suoni in linea. Inoltre, nota che l'utente potrebbe aver disattivato l'opzione dei suoni in linea nel browser.

Il nostro miglior consiglio è includerele solo dove l'utente desidera ascoltare suoni in linea. Un esempio positivo è quando l'utente deve ascoltare una registrazione e fare clic su un link, viene aperta una pagina e la registrazione viene riprodotta.

Etichette multimediali HTML 4.01

Etichetta Descrizione
<applet> Non raccomandato. Definire applet incorporato.
<embed> Non raccomandato in HTML4, permesso in HTML5. Definire oggetti incorporati.
<object> Definire l'oggetto incorporato.
<param> Definire i parametri dell'oggetto.

Etichette multimediali HTML 5

Etichetta Descrizione
<audio> L'etichetta definisce suoni, come musica o altri flussi audio.
<embed> Le etichette definiscono il contenuto incorporato, come plugin.