Tag audio in HTML | Spiegato

HTML5 fornisce un tag per aggiungere file audio ai siti Web. L'aggiunta di multimedia a qualsiasi sito Web è un modo notevole per attirare il pubblico e l'uso adeguato dei file audio su qualsiasi sito Web porta a una migliore esperienza Web. Con l'aiuto di elementi multimediali come e, possiamo aggiungere suoni e visioni a qualsiasi sito Web e possiamo facilmente suonarli senza componenti aggiuntivi. Usando il tag possiamo incorporare un file audio sui nostri siti Web in vari formati i.e. mp3, wav, ogg.

Sei disposto a imparare come funziona Tag, se sì, devi capire i seguenti aspetti del tag HTML:

• La sintassi di base del tag
• Attributi di tag
• Formati audio comunemente usati
• Supporto del browser per tag
• Come usare il tag

Iniziamo!

Sintassi

Lo snippet dato qui mostra la sintassi di base del tag:

• Src e il tipo sono attributi di tag, ne impareremo nella sezione Attributi.
• Qui, un punto chiave da capire è tutto ciò che scriviamo all'interno dei tag iniziali e finali verranno visualizzati solo se il browser non supporta il file audio

Attributi

Ci sono alcuni attributi che possono essere utilizzati nel tag come elencato di seguito:

• Controlli: Come suggerisce il nome stesso, ci consente di controllare il file audio i.e. Specifica quali controlli dovrebbero essere visibili all'utente E.G. Gioca, pausa, muto, ecc.
• src: determina l'indirizzo del file audio.
• ciclo continuo: Abilita la struttura a loop i.e. I file audio verranno riprodotti più e più volte.
• tenuto: Determina se il file audio verrà disattivato
• Preload: Determina l'opinione dell'autore su come verrà caricato il file audio quando la pagina web carica
• riproduzione automatica: determina che il file verrà riprodotto all'istante

Formati

Tag è un tag moderno introdotto in HTML5, attualmente supporta tre formati di file i.e. "MP3", "Wav", "Ogg".

Supporto browser

Di seguito è riportato l'elenco dei browser per i vari formati di file audio:

• Chrome, Microsoft Edge, Opera e Mozilla Firefox supportano tutti e tre i formati i.e. mp3, wav, ogg.
• Internet Explorer supporta solo il formato MP3
• Safari supporta i formati WAV e MP3

Come usare il tag

Considera lo snippet di codice di seguito per capire come utilizzare il tag per incorporare un file audio in una pagina Web:

Tag audio

File non supportato

Questo codice esegue le seguenti funzionalità:

• Abbiamo aggiunto l'attributo "Controlli" nel tag in modo che un utente possa controllare il file in termini di riproduzione/pausa, muto/non -muto ecc.
• Tag aiutaci a specificare i file multipli.

Il seguito sarà l'output per lo snippet di codice sopra:

Più formati di file possono essere specificati nel tag in tale caso, il browser riprodurrà la prima sorgente riconosciuta.

Modifichiamo un po 'l'esempio e aggiungiamo l'attributo "muto" nel tag

Tag audio

File non supportato

Ora, quando eseguiamo il codice, inizialmente il file verrà disattivato:

Allo stesso modo, è possibile utilizzare l'autoplay, loop o qualsiasi altro attributo in base al tuo bisogno.

Conclusione

Il tag audio può essere utilizzato per aggiungere un file audio a qualsiasi documento/sito Web, possono essere utilizzati diversi attributi all'interno del tag audio per eseguire funzionalità diverse. Se specifichiamo gli indirizzi di più di un file audio, il browser allegherà il primo file al documento. Questo articolo dimostra ciò che è il tag HTML e come utilizzare il tag. Inoltre, fornisce una spiegazione dettagliata dei formati di file audio disponibili e dei browser supportati.