L’elemento audio: src controls loop autoplay
Incorporare lettori audio con gli attributi nativi di HTML5
L’elemento audio: src controls loop autoplay è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Audio nativo in HTML5
HTML5 ha introdotto l'elemento <audio> per incorporare audio senza plugin:
<audio src="podcast.mp3" controls>
Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->L'attributo controls
L'attributo controls visualizza il lettore audio integrato nel browser:
<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>
<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>
<!-- Always include controls for user-accessible audio
Unless it is a background ambient sound (use controls anyway for accessibility) -->L'attributo loop
L'attributo loop riavvia l'audio quando termina:
<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->L'attributo autoplay
L'attributo autoplay avvia la riproduzione al caricamento della pagina:
<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->
<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>L'attributo muted
L'attributo muted avvia l'audio disattivato:
<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>
<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>L'attributo preload
L'attributo preload suggerisce quanti dati caricare:
<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->
<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->
<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->Controllare l'audio con JavaScript
Controlli l'audio con JavaScript:
const audio = document.getElementById('my-audio');
// Play:
audio.play();
// Pause:
audio.pause();
// Current time (seconds):
audio.currentTime = 30; // jump to 30 seconds
// Volume (0 to 1):
audio.volume = 0.5;
// Duration:
console.log(audio.duration);Eventi audio
Eventi audio comuni:
audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));Lettore audio personalizzato
Crei un lettore personalizzato con JavaScript e CSS:
<div class="audio-player">
<audio id="player" src="podcast.mp3" preload="metadata"></audio>
<button id="play-btn" aria-label="Play">▶</button>
<input type="range" id="scrubber" value="0" min="0" max="100">
<span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
audio.paused ? audio.play() : audio.pause();
});
</script>Audio accessibile
Requisiti di accessibilità per l'audio:
- Fornisca una trascrizione per tutti i contenuti audio
- Per i podcast: inserisca un link a una trascrizione testuale
- L'audio con riproduzione automatica viola WCAG 1.4.2 se dura più di 3 secondi
- Si assicuri che i controlli siano accessibili da tastiera (quelli nativi lo sono)
Elemento src e source
Specifichi alternative di formato con <source> (nella prossima lezione):
<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>
<!-- Multiple formats: -->
<audio controls>
<source src="podcast.opus" type="audio/ogg; codecs=opus">
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>Verifica rapida
Quale attributo audio mostra l'interfaccia del lettore integrato nel browser?
Riepilogo: elemento audio
Elementi essenziali dell'elemento audio:
controls— mostra l'interfaccia del lettore (lo includa quasi sempre)loop— riavvia al termineautoplay— riproduce al caricamento (bloccato dalla maggior parte dei browser)muted— avvia l'audio disattivato (abilita autoplay nella maggior parte dei browser)preload="metadata"— valore predefinito appropriato per podcast e musica- Fornisca trascrizioni per l'accessibilità
Domande Frequenti
La lezione «L’elemento audio: src controls loop autoplay» è gratuita?
Sì — il testo completo di «L’elemento audio: src controls loop autoplay» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «L’elemento audio: src controls loop autoplay»?
Incorporare lettori audio con gli attributi nativi di HTML5 Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «L’elemento audio: src controls loop autoplay»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L’elemento audio: src controls loop autoplay
- L’elemento video e le proporzioni
- L’elemento source per più formati
- Sottotitoli con track e WebVTT