HTML5 audio

HTML5 audio fornisce una maggiore capacità di lavorare con contenuti audio. Fino a poco tempo fa, l'unico modo per aggiungere file audio a una pagina Web era l'integrazione del suono di sottofondo utilizzando tag <bgsound> che riproduce il suono  durante la visualizzazione della pagina senza la possibilità di spegnere da parte del'utente.

Aggiungendo nella specifica di HTML5 nuovo elemento <audio>,  abbiamo la  possibilità di aggiungere contenuti audio senza coinvolgere i plug-in esterni.

Come aggiungere HTML5 audio su una pagina Web

1.  Elemento <audio>

Supporto del browser

IE: 9.0
Firefox: 3.5 supporto parziale, 15.0 — totale
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

Elemento <audio> nel 'HTML5,  è utilizzato per incorporare i contenuti audio in una pagina web. In generale, imarkup HTML è seguente:

<audio src="/name.ogg" controls></audio>

 

Attributo controls aggiunge visualizzazione nei browser la  interfaccia di controllo del player audio, per far partire riproduzione, mettere in pausa, fermare e regolare volume..

audio1

Al momento, non c'e alcun formato audio che avrebbe funzionato in tutti i browser, perciò per garantire la disponibilità di contenuti al pubblico più ampio possibile si raccomanda  ad includere diverse sorgenti sonore forniti con l'attributo src del tag <source> . Allo stesso tempo, è possibile aggiungere un contenuto di riserva  per i browser che non supportano l'elemento <audio>

<audio controls>
  <source src="/name.ogg" type="audio/ogg">
  <source src="/name.mp3" type="audio/mpeg">
  <a href="/sounds/name.mp3">Scaricare nome.mp3</a>
</audio>

 

Attributo Descrizione,
autoplay Riprodurre automaticamente file audio subito dopo il caricamento della pagina.
controls Specifica al browser che deve visualizzare elementi di controllo di riproduzione di base (avviare o interrompere la riproduzione, passare ad un altro frammento del fail audio, regolare il volume).
loop Riproduce ciclicamente l'audio fail
muted Spegnere il suono durante la riproduzione di un file video.
preload Attributo prevede pre-caricamento dei contenuti audio. Non è obligatorio, alcuni browser ignorano questo atributo. I valori possibili sono: auto - il browser carica un file audio completamente, in modo che sia disponibile quando l'utente vorrebbe ascoltarlo. metadata - browser carica una piccola prima porzione del file audio per determinare le sue caratteristiche. nessuno - nessun caricamento automatico del file audio.
src Esso contiene un indirizzo URL assoluto o relativo del file audio.

2. Audio codec

Codec audio (Decoder) è un programma per la conversione di dati digitali in un formato di file audio o un flusso audio. formati audio più diffusi sono i seguenti:

MP3 - il formato audio più popolare, utilizza la compressione con delle perdite nella qualita e permette di ridurre molto la dimensione del file. A causa di costi di licenza non è supportato da Firefox e Opera.(anche se dipende dalla sistema operativa in uso, il fail potrebbe essere comunque riprodotto anche in questi browser  )

AAC (Advanced Audio Codec) – un codec QUISO, analogo MP3, ma rispetto a quest'ultimo, riesce di mantenere una qualità superiore del suono in file di dimensioni simili.

Ogg Vorbis – formato gratuito open source supportato da Firefox, Opera e Chrome. Fornisce una buona qualità del suono, ma non è ampiamente supportato varie  hardware.

3. Media risorse alternative

Elemento <Source> è utilizzato per aggiungere più risorse multimediali per le tag <audio> e <video>. Indica file/video alternativi che il browser del utente può selezionare sulla base delle proprie impostazioni o tipi di codec supportati.

Attributo Descrizione e valore che può assumere
media Esso determina il tipo di dispositivo multimediale (cioè per quale dispositivo è stato ottimizzato il fail ).
src Esso contiene un URL-indirizzo assoluto o relativo del media file.
type Definisce tipo di MIME del media fail.

4. Aggiungere  titoli e didascalie

Elemento<track> viene utilizzato come figlio di elemento <audio> e <video>. Aggiunge una traccia di testo per i sottotitoli, titoli o altro testo che dovrebbe essere visibile durante la riproduzione di file audio o video.

Attributi Descrizione
default Esso indica che la tracia audio o video vene riprodotta con delle impostazioni predefinite. Solo un elemento può contenere questo attributo.
kind Specifica il tipo di traccia di testo, da default viene visualizzata in forma di sottotitoli (subtitles). I valori che puo avere:
captions — mostra dialoghi ed effetti sonori in forma del testo sopra il video (per gli utenti non udenti)..
chapters — aggiunge titoli dei capitoli in forma di un elenco per navigare per il file media.
descriptions — aggiunge descrizione audio di ciò che accade nel video (per gli utenti non vedenti).
metadata — metadati utilizzati dagli script non vengono visualizzati per l'utente.
subtitles — duplicazione testuale della colonna sonora, viene visualizzato come sottotitoli al video..
label Aggiunge il nome della traccia audio. Se questo attributo non è specificato, il browser utilizzerà il valore predefinito.
src Contiene indirizo URL absoluto o relativo del fai audio o video.
srclang Lingua della tracia audio.

5. Un esempio stilizzato del lettore audio

Con i stili CSS si puo creare un lettore audio d'aspetto insolito. La riproduzione è controllata da un piccolo script (utilizzando la libreria jQuery), il suono appare quando si passa sulla copertina.

P.s.
Potrebbe succedere che anche se avete un fail mp3 funzionante, che viene riprodotto corettamente sul vostro media player del sistema, per esempio, l'esso no viene riprodotto su una pagina html, in quel caso provate di convertirlo di nuovo in formato mp3 ma con un altro codec. Usate questo sito http://audio.online-convert.com.

Letto 1268 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso