Aggiungere audio a una pagina web con HTML è piuttosto semplice. Chiunque abbia una conoscenza di base di HTML può farlo. La chiave è capire come funziona il tag

Detto questo, la qualità audio è importante tanto quanto la funzionalità. Se stai aggiungendo registrazioni vocali, l’utilizzo di un microfono di qualità può fare una grande differenza. Qualcosa come Hollyland LARK A1 funziona alla grande. Offre prestazioni elevate, con funzionalità come la protezione automatica dal clipping, una portata wireless di 200 metri e 3 livelli di cancellazione intelligente del rumore.

Hollyland LARK A1 - Affordable Wireless Microphone

A perfect starter mic for creators on a budget. It’s simple to use and features effective noise cancellation.

Key Features: 48kHz/24-bit | 3-Level Noise Cancellation | 54-Hour Battery

Check on Amazon

Come funziona il tag audio HTML

Puoi riprodurre suoni su una pagina web usando il tag

Posiziona il tag source all’interno del tag audio per collegare il tuo file. Questo indica al browser quale audio caricare e quale formato aspettarsi. Se un browser non supporta il tag audio, puoi mostrare un breve messaggio. In questo modo, gli utenti sapranno che la funzionalità audio non funziona per loro.

Ci sono anche alcuni attributi extra:

• autoplay: Avvia l’audio quando la pagina viene caricata.
• muted: Disattiva l’audio per impostazione predefinita.
• loop: Ripete l’audio continuamente.

HTML supporta questi tre formati audio:

• MP3 (miglior supporto tra i browser)
• WAV
• OGG

MP3 è la scelta più sicura poiché funziona quasi ovunque.

Come aggiungere audio in HTML: istruzioni passo passo

Segui questi passaggi per aggiungere audio alla tua pagina HTML:

1. Prepara il tuo file audio

• Usa MP3 per ottenere i migliori risultati su tutti i browser.
• Posiziona il file audio nella stessa cartella del tuo file HTML.

• Puoi ottenere musica gratuita dalla libreria audio di YouTube.

Puoi anche scaricare brani da qualsiasi sito web royalty-free.

2. Crea la struttura HTML

• Apri il tuo file HTML.
• All’interno del , aggiungi un tag di apertura e chiusura

<audio></audio>

• Salva il file HTML e aggiorna il browser.

3. Aggiungi controlli al lettore audio

• All’interno del tag di apertura

<audio controls></audio>

• Salva e aggiorna la pagina.
• Dovresti vedere un lettore audio sulla pagina del browser.

Tuttavia, in questo momento, la barra dovrebbe essere disattivata, segnalando che dobbiamo aggiungere più attributi e tag.

4. Collega il file audio

• Tra i tag audio di apertura e chiusura, inserisci un tag.
• Usa l’attributo ‘src’ per puntare al nome del file audio.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Salva e aggiorna. I controlli audio ora dovrebbero essere attivi.

5. Aggiungi un messaggio di fallback

• Nel caso in cui il browser non supporti l’audio, scrivi un semplice messaggio.

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

6. Usa un percorso file (se l’audio è in una cartella diversa)

• Se il file audio non è nella stessa cartella, includi il percorso completo.

<source src="C:/Users/YourName/Desktop/bro_time.mp3" type="audio/mpeg">

7. Ripeti l’audio

• Per ripetere l’audio continuamente, aggiungi ‘loop’ al tag audio.

<audio controls loop>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

8. Avvia l’audio disattivato

• Per riprodurre l’audio in silenzio per impostazione predefinita, usa muted.

<audio controls muted>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

9. Riproduci automaticamente l’audio

• Aggiungi autoplay per avviare automaticamente l’audio.

<audio controls autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

Importante: Autoplay non funziona bene nei browser moderni, specialmente Chrome e sui dispositivi mobili. Inoltre, molti esperti non raccomandano il tag audio autoplay poiché può violare la privacy degli utenti.

10. Nascondi i controlli per l’audio di sottofondo

• Rimuovi l’attributo controls per riprodurre musica di sottofondo senza che sia visibile alcun lettore.

<audio autoplay>

  <source src="bro_time.mp3" type="audio/mpeg">

</audio>

• Usalo con saggezza. La riproduzione automatica di audio nascosto può infastidire gli utenti.

Caso d’uso: creazione di una pagina web con più file audio

Vuoi provare un esempio reale? Creiamo una pagina musicale di base. Questo può essere un progetto divertente. Tutto ciò di cui hai bisogno sono alcuni file audio e un file HTML di base.

Segui questi passaggi per costruirlo:

Prepara i tuoi file audio

• Scegli almeno quattro canzoni MP3 o clip audio
• Nominali chiaramente come bro_time.mp3, block_party.mp3
• Posiziona tutti i file audio nella stessa cartella del tuo file HTML

Inizia un nuovo documento HTML

• Apri qualsiasi editor di testo come Notepad o VS Code
• Crea un file .html vuoto
• Salvalo nella stessa cartella dei tuoi file audio

Imposta il titolo della pagina

• All’interno della sezione , aggiungi un’intestazione principale

MeTunes

Aggiungi la prima traccia audio

• Digita il nome della canzone usando un tag

• Aggiungi un lettore audio sotto con il file sorgente

<h3>Bro Time</h3>

<audio controls>

  <source src="bro_time.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Ripeti per altre canzoni

• Copia e incolla la stessa struttura
• Cambia l’intestazione e il nome del file sorgente

<h3>Block Party</h3>

<audio controls>

  <source src="block_party.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>City Night Lights</h3>

<audio controls>

  <source src="city_night_lights.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<h3>Beat Your Competition</h3>

<audio controls>

  <source src="beat_your_competition.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

Aggiungi spazio tra ogni traccia

• Usa i tag
  per aggiungere spazio extra
• Questo mantiene la pagina pulita e facile da leggere

Testalo in un browser

• Fai doppio clic sul tuo file HTML per aprirlo
• Assicurati che tutte le canzoni funzionino correttamente
• Se qualcosa non viene riprodotto, controlla i nomi dei file e i percorsi

Ora hai una pagina musicale funzionante usando HTML di base. Ogni file audio mostra il proprio lettore e tutto viene riprodotto correttamente.

CONSIGLIO: Ecco il codice completo di questo progetto. Semplicemente copialo e incollalo. Cambia i percorsi dei file e i nomi delle canzoni per esercitarti ad aggiungere le tue canzoni preferite a un sito HTML.

<!DOCTYPE html>

<html>

  <head>

  <title>MY PRACTICE AUDIO HTML SITE</title>

</head>

  <body>

    <h1>SongSite</h1>

    <br>

Song One:

    <br>

<audio controls>

  <source src="song_one.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

Song Two:

    <br>

<audio controls>

  <source src="song_two.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  Song Three:

    <br>

<audio controls>

  <source src="song_three.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

<br>

    Song Four:

    <br>

<audio controls>

  <source src="song_four.mp3" type="audio/mpeg">

  Your browser does not support audio.

</audio>

    <br>

  </body>

</html>

Se lo hai fatto correttamente, la pagina HTML dovrebbe apparire simile a questa:

Conclusione

Quando capisci le basi del tag audio, inserire musica in una pagina HTML diventa un gioco da ragazzi. Questo articolo mostra ogni passaggio essenziale che ti consente di aggiungere una traccia audio a HTML.

Tuttavia, è importante utilizzare gli attributi corretti per garantire la privacy dell’utente. Allo stesso modo, raccomandiamo sempre di utilizzare musica gratuita o con licenza per evitare violazioni del copyright.

Domande frequenti

1. Come si rende invisibile il lettore audio in HTML?

Per mantenere nascosto il lettore audio, salta la parola controls nel tag. Quando qualcuno visita la tua pagina, l’audio viene riprodotto senza mostrare nulla. Se usi anche autoplay, si avvia subito. Fai solo attenzione. Alcuni browser potrebbero bloccare il suono se non ci sono controlli.

2. Cosa fanno i tag audio e video in HTML?

I tag audio e video ti consentono di aggiungere suoni o video. Puoi posizionare musica o clip direttamente sulla tua pagina. Questi tag fanno parte di HTML5 e funzionano nella maggior parte dei browser oggi. Aggiungili all’interno della sezione body per mostrare i lettori sullo schermo. Supportano anche diversi tipi di file, a seconda del browser.

3. Le persone usano ancora HTML per i siti web moderni?

Sì, HTML viene ancora utilizzato per costruire ogni sito online. Anche le pagine avanzate hanno bisogno di HTML per la struttura e il layout. Aiuta con SEO, velocità di caricamento e design della pagina. Che si tratti di una piccola pagina o di una complessa, HTML è ancora importante. Senza di esso, nessun sito web si caricherebbe correttamente in alcun browser.