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>