Audio HTML

Ci sono molti modi per riprodurre suoni in HTML.

Problemi, problemi e soluzioni

Non è facile riprodurre audio in HTML!

Dovete padroneggiare molte tecniche per assicurare che i vostri file audio possano essere riprodotti in tutti i browser (Internet Explorer, Chrome, Firefox, Safari, Opera) e su tutte le hardware (PC, Mac, iPad, iPhone).

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

Usa i plugin

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

I plugin hanno molte funzioni: riproduzione musicale, visualizzazione di mappe, verifica di account bancari, controllo dell'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 snippet di codice può visualizzare il file MP3 incorporato nel sito web:

Esempio

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

Provatelo personalmente

Problema:

  • Il tag <embed> non è valido in HTML 4. La pagina non può essere validata con HTML 4.
  • I browser supportano i formati audio in modo diverso.
  • Se il browser non supporta il formato del file senza plugin, l'audio non può essere riprodotto.
  • Se l'utente non ha installato il plugin, non può riprodurre l'audio.
  • Anche 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 snippet di codice può visualizzare il file MP3 incorporato nel sito web:

Esempio

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

Provatelo personalmente

Problema:

  • I browser supportano i formati audio in modo diverso.
  • Se il browser non supporta il formato del file senza plugin, l'audio non può essere riprodotto.
  • Se l'utente non ha installato il plugin, non può riprodurre l'audio.
  • Anche 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>

Provatelo personalmente

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

Per rendere questo audio funzionante anche in Firefox e Opera, è stato aggiunto un file di tipo ogg. In caso di fallimento, verrà visualizzato un messaggio di errore.

Problema:

  • Il tag <audio> non è valido in HTML 4. La tua pagina non può essere validata con 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>

Provatelo personalmente

L'esempio sopra utilizza due formati audio diversi. L'elemento <audio> di HTML5 tenta di riprodurre l'audio in mp3 o ogg. Se fallisce, il codice tenta 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ò tornare indietro 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 di Yahoo Media Player è un approccio diverso. Devi semplicemente far fare a Yahoo il lavoro di 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>

Provatelo personalmente

L'uso di Yahoo Player è gratuito. Per utilizzarlo, devi inserire questo script JavaScript nel fondo della tua pagina web:

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

Poi è sufficiente 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>
...
...
...

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.

Notate che il riproduttore rimane sempre ancorato nella parte inferiore della finestra. Basta farci clic per farlo scorrere fuori.

Utilizzo dei link

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>

Provatelo personalmente

Suono inline

Quando si includono suoni nelle pagine web o come parte delle pagine web, si chiama suono inline.

Se prevedete di utilizzare suoni inline nelle applicazioni web, dovete essere consapevoli che molti utenti trovano i suoni inline fastidiosi. Inoltre, fate attenzione che l'utente potrebbe aver disattivato l'opzione dei suoni inline nel browser.

Il nostro consiglio migliore è includere i suoni inline solo dove l'utente desidera ascoltarli. Un esempio positivo è quando l'utente ha bisogno di ascoltare una registrazione e fare clic su un link, viene aperta una pagina e viene riprodotta la registrazione.

Tag multimediali HTML 4.01

Tag Descrizione
<applet> Non consigliato. Definisce applet incorporati.
<embed> Non consigliato in HTML4, permesso in HTML5. Definisce oggetti incorporati.
<object> Definisce l'oggetto incorporato.
<param> Definisce i parametri dell'oggetto.

Tag multimediali HTML 5

Tag Descrizione
<audio> Il tag definisce suoni, come musica o altri flussi audio.
<embed> I tag definiscono il contenuto incorporato, come plugin.