Visita Orebla.it su Facebook Segui Orebla.it su Twitter Vedi i video su YouTube di Orebla.it Unisciti alle cerchie di Orebla.it
DOVE TI TROVI: \\ Home Page\\Guida su HTML 5: il TAG <audio>, ascoltare mp3 dal browser

Guida su HTML 5: Il TAG <audio>

autore: Orebla
10/03/11

Introduzione al TAG <audio></audio>:

Prima di partire con la lettura di questa guida sul TAG Audio, vi consiglio di leggere la guida relativa al TAG Video: HTML 5 e il TAG VIDEO. Questo, non per annoiarvi, ma perchè questi due TAG (audio e video) condividono quasi tutte le proprietà e quindi, in questa guida, non ripeterò le spiegazioni per i vari attributi e li darò per scontati!

Il codice <audio></audio> è stato introdotto per permettere all'utente di poter riprodurre un file musicale, una registrazione o un suono senza dover ricorrere a plug-in esterni, proprio come il TAG VIDEO.

Allo stato attuale i browser che supportano, nativamente, il tag video sono:

  • Chrome 3+
  • Firefox 3.5+ con riserva
  • Internet Explorer 9+
  • Opera 10
  • Safari 3.2+

Il TAG AUDIO, come utilizzarlo:

Anzitutto vediamo un primo esempio di codice, e poi parto con la spiegazione di esso:

<audio controls>
<source src="file.estensione" type="audio/mime type; codecs=nome codecs">
</audio>

In questo guida non vi ho illustrato, appositamente, la versione più compressa di questo TAG come avevo fatto con il TAG VIDEO. Non l'ho fatto per un motivo molto semplice: le nuove specifiche del HTML 5 cercano, già di loro,di rendere più leggero possibile il codice delle pagine web se poi noi togliamo proprio tutto non ci rimane nulla. Lasciando così il browser in difficoltà nel distinguere le varie opzioni e magari ottenendo risultati non voluti!

Come vedete il TAG AUDIO pretende l'attributo "controls" (booleano) per visualizzare o meno i controlli da browser!

La seconda riga presenta 3 attributi:

  • src -> dove dobbiamo indicare il file audio di origine;
  • type -> mime type;
  • codecs -> nome codec utilizzato per la compressione.

Nel caso dei file audio non abbiamo, per fortuna, il problema di dover riempire il codice di formati differenti (se non capisci il perchè di questo mio riferimento leggi la guida sul TAG VIDEO!, nda) per essere sicuri che tutti i browser li possano leggere senza problemi. Utilizziamo il formato di file .mp3 che li accontentiamo tutti!

Ecco la finestra che il browser visualizzerà (vai all'esempio):

HTML 5 TAG AUDIO controlli su Chrome

In questo caso vi ho mostrato la finestra di Google Chrome che rimane, per ora, il browser con il maggior supporto alla tecnologia HTML 5!

ATTRIBUTI AUTOPLAY, LOOP e PRELOAD:

Anche qui vi mostrerò solamente gli esempi da me scritti, in quanto tutti i dettagli li trovate nella guida sul TAG VIDEO!

In questo caso ho attivato l'attributo AUTOPLAY: vai all'esempio.

<audio controls autoplay>
<source src="homer.mp3" type="audio/mpeg">
</audio>

Qui invece l'attributo LOOP: vai all'esempio.

<audio controls loop>
<source src="homer.mp3" type="audio/mpeg">
</audio>

COME SCARICARE I FILE MP3 DALLE PAGINE WEB CON CHROME:

La nuova specifica HTML 5 ci permette anche di scaricare il file audio semplicemente con un clic. È vero che un esperto di HTML in pochi passi ti trova nel codice il percorso ma se abbiamo la possibilità di fare meno fatica, non facciamola!

Per farlo vi basta cliccare con il tasto del destro del mouse sulla finestra del lettore e poi selezionare la voce "Scarica audio come..."; questo però su Google Chrome!

Nella prossima puntata della guida vedremo anche come utilizzare la libreria Modernizr per creare un telecomando in Javascript per il nostro lettore e come rendere la riproduzione dell'audio dinamica!

 

 

 






Articoli utili:
Jailbreak iOS 10: tweaks compatibili

Recensione iPhone 6

IPhone 7 uscito, novita, prezzi