Esercizi Tag Audio HTML
Codegrind Team•Jul 16 2023
Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo dell’elemento <audio>
per importare file in HTML.
Esercizio 1
Inserisci un file audio nella tua pagina HTML.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 1</title>
</head>
<body>
<audio src="path/to/audio.mp3" controls></audio>
</body>
</html>
Esercizio 2
Fai in modo che il file audio si avvii automaticamente all'apertura della pagina.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 2</title>
</head>
<body>
<audio src="path/to/audio.mp3" controls autoplay></audio>
</body>
</html>
Esercizio 3
Aggiungi un testo alternativo nel caso in cui il browser non possa riprodurre il file audio.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 3</title>
</head>
<body>
<audio src="path/to/audio.mp3" controls>
Il tuo browser non supporta la riproduzione audio.
</audio>
</body>
</html>
Esercizio 4
Fai in modo che il file audio venga riprodotto in loop continuo.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 4</title>
</head>
<body>
<audio src="path/to/audio.mp3" controls loop></audio>
</body>
</html>
Esercizio 5 (difficile con JS)
Aggiungi un controllo del volume per il file audio.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 5</title>
</head>
<body>
<audio src="path/to/audio.mp3" controls>
Il tuo browser non supporta la riproduzione audio.
</audio>
<input
type="range"
min="0"
max="1"
step="0.1"
value="1"
oninput="audio.volume = this.value" />
</body>
</html>
Esercizio 6 (difficile con JS)
Aggiungi un controllo per il tempo di riproduzione del file audio.
<!DOCTYPE html>
<html>
<head>
<title>Esercizio 6</title>
</head>
<body>
<audio src="path/to/audio.mp3" controls>
Il tuo browser non supporta la riproduzione audio.
</audio>
<input
type="range"
min="0"
max="audio.duration"
value="0"
oninput="audio.currentTime = this.value" />
</body>
</html>