Lezione 19 - Corso Avanzato Html

I File Audio in Html

File Audio

Il tag per inserire file audio in Html è

<audio> </audio>

Per inserire file audio di pubblico utilizzo cercate sul web royalty free music ci sono diversi siti che permettono di usare la loro musica gratuitamente, però fate attenzione a non incorre in problemi di copyright.

Ora parliamo dei formati audio più comuni e compatibili per la maggior parte dei browser, e sono:

- .MP3 è un formato compatibile con tutti i browser, è di buona qualità ed è molto leggero (circa 4.700 Kb), ma è brevettato e potrebbe darci dei problemi.

- .OGG oppure .OGA (si chiama anche Vorbis) questi sono formati che ancora hanno qualche problema di compatibilità con alcuni browser però presentano un file di ottima qualità che pesa molto meno (circa 1/4 meno 1300 Kb) rispetto al formato mp3, fatto molto importante è che il formato è libero di utilizzo.

- .MP4 (è più un file video, ma anche audio) i file li possiamo trovare anche come file MPA (questo, a differenza degli .mp4, è più un file audio) e utilizza la codifica (AAC), questi file son abbastanza leggeri (circa 1900 KB), sono di buona qualità e si possono utilizzare tranquillamente perché non ci sono grossi problemi di royalty.

- .WAV questo formato è compatibile con la maggior parte dei browser. E' un formato senza compressione, viene memorizzato con la massima qualità ma di contro diventa molto pesante, quindi non adatto per riprodurre brani musicali di una certa durata.


Il consiglio è di puntare non su un'unico tipo di file ma su almeno un paio di tipologie diverse di formato per accontentare la maggior parte dei browser.

Per poter inserire più formati bisogna averli salvati nella cartella del sito. Per convertirli da un formato ad un'altro formato basta usare un programma che converte i formati come tanti c'è ne sono in rete, tipo: convert2mp3.net che converte il formato del file nel formato che vogliamo noi.

Vediamo il codice:

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

Nel tag <audio> mettiamo al suo interno l'attributo

- controls (controlli) che è uno strumento che serve per controllare il brano (la classica schermata di controllo di un file audio con il tastino dello stop - pausa, il cursore di avanti e indietro).

- autoplay se si aggiunge l'attributo autoplay ogni volta che si aggiora la pagina parte in automatico il brano.

Se poi tolgo l'attributo controls il brano parte in automatico senza controlli e quindi l'utente non ha la possibilità di fermare il brano, questo serve se voglio una musica di sottofondo alla pagina.

- loop con l'attributo loop (ciclo continuo) indichiamo al browser che una volta finito il brano deve ricominciare.

Il brano viene inserito con il tag:
<source src="" type="">
dove con source indichiamo la (fonte)

con
src="" ne indichiamo la (ricerca) del file

con
type="" ne indichiamo il (tipo), cioè il formato di codifica dei dati, nel nostro caso, sono dati relativi all'audio ed in particolare stiamo usando un formato mp3 (percorso_file_audio.mp3) e quindi la codifica sarà: "audio/mpeg"


Quà di seguito troviamo il formato di codifica dei dati in relazione all'estensione dei file, solo quelli più comuni, solo quelli che noi abbiamo trattato in questa lezione, e sono:

.MP3 - "audio/mpeg"

.MP4 .MPA - "audio/mp4"

.OGG .OGA - "audio/ogg"

.WAV - "audio/wav"