English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il suono può essere riprodotto in HTML in modi diversi.
Riprodurre audio in HTML non è facile!
È necessario padroneggiare molte tecniche per garantire che i 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 questa sezione, la guida di base riassume problemi e soluzioni.
Un plugin del browser è un piccolo programma informatico che estende le funzionalità standard del browser.
I plugin possono essere aggiunti alla pagina utilizzando il tag <object> o il tag <embed>.
Questi tag definiscono contenitori per risorse (solitamente non risorse HTML), che possono essere visualizzati dal browser o da plugin esterni in base al tipo.
Il tag <embed> definisce un contenitore per contenuti esterni (non HTML) (è un tag HTML5, non valido in HTML4, ma funziona in tutti i browser).
Il seguente frammento di codice può visualizzare il file MP3 integrato nel sito web:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lezioni di base (oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3"></object> <p>Se non riesci a sentire l'audio, potrebbe essere che il tuo computer o il browser non supportano il formato del file.</p> <p>Oppure non hai aperto il altoparlante.</p> </body> </html>Testa per vedere <‹/›
Il tag <embed> non è valido in HTML 4. La pagina non può essere validata con HTML 4.
I diversi browser supportano i formati audio in modo diverso.
Se il browser non supporta il formato del file, non può riprodurre l'audio senza plugin.
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.
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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lezioni di base (oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3"></object> <p>Se non riesci a sentire l'audio, potrebbe essere che il tuo computer o il browser non supportano il formato del file.</p> <p>Oppure non hai aperto il altoparlante.</p> </body> </html>Testa per vedere <‹/›
I diversi browser supportano i formati audio in modo diverso.
Se il browser non supporta il formato del file, non può riprodurre l'audio senza plugin.
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.
L'elemento <audio> HTML5 è un elemento HTML5, non valido in HTML 4, ma funziona in tutti i browser.
Elemento <audio> funziona in tutti i browser moderni.
Compatibilità del browserI numeri nella griglia rappresentano la versione del browser che supporta la proprietà per la prima volta.
| elemento | Chrome | IE | Firefox | Safari | Opera |
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Di seguito utilizzeremo il tag <audio> per descrivere il file MP3 (valido in Internet Explorer, Chrome e Safari), e abbiamo anche aggiunto un file di tipo OGG (valido in Firefox e Opera). Se fallisce, visualizzerà un messaggio di errore:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lezioni di base (oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> Il tuo browser non supporta questo formato audio. </audio> </body> </html>Testa per vedere <‹/›
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.
Esempio di utilizzo di due formati audio diversi. L'elemento <audio> HTML5 tenta di riprodurre l'audio in mp3 o ogg. Se fallisce, il codice tenta di utilizzare l'elemento <embed>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lezioni di base (oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="/run/html/horse.mp3"> </audio> </body> </html>Testa per vedere <‹/›
Devi convertire l'audio in un formato diverso.
L'elemento <embed> non può essere utilizzato per mostrare messaggi di errore.
Se una pagina web contiene link che puntano a file multimediali, la maggior parte dei browser utilizzerà un "applicazione ausiliaria" per riprodurre il file.
Il seguente frammento di codice mostra un link che puntano a un file mp3. Se l'utente fa clic sul link, il browser avvierà un "applicazione ausiliaria" per riprodurre il file:
<a href="/run/html/horse.mp3">Riproduci il suono</a>Testa per vedere <‹/›
Quando si includono suoni all'interno di una pagina web o come parte di essa, si chiama suono in linea.
Se hai intenzione di utilizzare suoni in linea in un'applicazione web, devi essere consapevole che molti utenti li trovano fastidiosi. Inoltre, notare che l'utente potrebbe aver disattivato l'opzione dei suoni in linea nel browser.
Il nostro consiglio migliore è includerele solo nei punti in cui l'utente desidera ascoltare un suono in linea. Un esempio positivo è quando l'utente deve ascoltare una registrazione e fare clic su un link, viene aperta la pagina e la registrazione viene riprodotta.
Nuovo: Nuova etichetta HTML5
| Etichetta | Descrizione |
| <embed> | Definisce un oggetto incorporato. Non approvato in HTML4, permesso in HTML5. |
| <object> | Definisce un oggetto incorporato. Non approvato in HTML4, permesso in HTML5. |
| <param> | Definisce i parametri dell'oggetto. |
| <audio>HTML5 | Definisce il contenuto audio |
| <video>HTML5 | Definisce un video o un film |
| <source>HTML5 | Definisce le risorse multimediali dell'elemento media (<video> e <audio>) |
| <track>HTML5 | Definire il file di sottotitoli del elemento media o altri file che contengono testo (video e audio) |