In precedenza, i browser non avevano funzionalità integrate per supportare contenuti audio e video, ma con lo sviluppo di Internet, il supporto per elementi multimediali come funzionalità dei browser moderni è diventato una necessità. Nuovi elementi sono stati introdotti in HTML5

Il formato del file audio determina la struttura e le caratteristiche di presentazione dei dati audio quando vengono memorizzati su un supporto (dispositivo di archiviazione). Per eliminare la ridondanza dei dati audio, di norma vengono utilizzati codec audio speciali, grazie ai quali i dati audio vengono compressi. Browser moderni supporta i seguenti 3 formati audio:

Browser	MP3	Wav	Ogg
SÌ	SÌ	SÌ
SÌ	SÌ	SÌ
musica lirica	SÌ	SÌ	SÌ
SÌ	SÌ	NO
CIOÈ	SÌ	NO	NO
Bordo	SÌ	SÌ	NO

• Formato MP3è un codec e un contenitore allo stesso tempo. È ampiamente utilizzato ovunque per ospitare musica scaricabile.
• formato WAV- anche un codec e un contenitore allo stesso tempo.
• Contenitore Ogg + codec audio Vorbis... Viene comunemente chiamato "Ogg Vorbis". Sviluppato dalla comunità Xiph per sostituire MP3, AAC e WMA brevettati.

Tipi MIME per l'audio:

Formato

Tipi MIME
MP3	audio / mpeg
Ogg	audio / ogg
Wav	audio / wav

Supporto browser

Etichetta			musica lirica		Esploratore	Bordo
	4.0	3.5	10.5	4.0	9.0	12.0

attributi

Attributo	Significato	Descrizione
riproduzione automatica	riproduzione automatica	Indica che l'audio si avvierà automaticamente non appena sarà pronto.
controlli	controlli	Visualizza i controlli dei file multimediali integrati (pulsante di riproduzione/pausa, un dispositivo di scorrimento per passare a una clip specifica e un dispositivo di scorrimento del volume).
ciclo continuo	ciclo continuo	Riproduzione in loop del file (la nostra canzone è buona - ricomincia da capo) ..
disattivato	disattivato	Indica che l'audio sarà disattivato (nessun suono).
precarico	auto metadati nessuno	Specifica come deve essere caricato l'audio al caricamento della pagina. L'attributo viene ignorato se è presente l'attributo di riproduzione automatica.
src	URL	Specifica l'URL del file audio.

Esempio di utilizzo

Elemento

Audio in HTML5

In questo esempio, noi:

Aggiunto contenuto audio alla pagina (tag

Una delle caratteristiche più notevoli HTML5 sta trasmettendo l'audio.

Se sei impegnato nel campo dello sviluppo web, allora una selezione di 10 incredibili lettori audio HTML5 molto utile per te.

- riproduttore audio e video, scritto in clean HTML5 e CSS... Il supporto per i browser più vecchi è fatto con Veloce e Silverlight giocatori che imitano API HTML5 MediaElement.
MediaElement ha molte skin e supporto per piattaforme popolari: WordPress, Drupal, Joomla, ecc.

Questo lettore è abbastanza minimalista, ma funzionale. Ottimo per quando hai bisogno di playlist ed effetti alla moda!

Un altro grande giocatore, probabilmente il migliore in questa lista. professionisti in quanto è molto facile da personalizzare ed è abbastanza flessibile nelle dimensioni e personalizzabile per un numero illimitato di colori.
Ho supporto cross-browser, e per i browser più vecchi c'è Veloce-analogico.

Tu stai usando Mootools sul tuo sito web? Se sì, allora forse ti piacerà questo giocatore realizzato su HTML5 e JavaScript di Mootools struttura. Il player funziona perfettamente in tutti i browser moderni.

Questo giocatore è l'unico della lista che viene pagato. Vale tutto $5 ma funziona perfettamente. Il lettore ha molte funzioni utili, come la protezione dell'audio dall'intercettazione tramite sovraincisione, che è molto utile per l'uso commerciale.

Una fonte: http://codecanyon.net/item/universal-html5-audio-player

V tecnologie coinvolte HTML5 e Veloce che lo rende molto leggero ( 10 Kb) un'affidabile soluzione cross-browser per la riproduzione di audio in streaming.
Vuoi sapere cosa puoi fare con Sound Manager 2? Visita per visualizzare una demo!

Descrizione

Aggiunge, riproduce e gestisce le impostazioni di registrazione audio su una pagina web. Il percorso del file viene specificato tramite l'attributo src o un tag annidato. All'interno del contenitore

L'elenco dei codec supportati dai browser è limitato ed è mostrato nella tabella. 1.

tab. 1. Codec e browser

Codec	Internet Explorer	Cromo	musica lirica	Safari	Firefox
ogg / vorbis
onda
mp3
AAC

Per la riproduzione universale nei browser specificati, l'audio viene codificato utilizzando diversi codec e i file vengono aggiunti contemporaneamente tramite il tag .

Sintassi

attributi

Il suono inizia a suonare non appena la pagina viene caricata. Aggiunge una barra di controllo al file audio. Ripete il suono dall'inizio alla fine. Utilizzato per caricare un file insieme al caricamento di una pagina web. Specifica il percorso del file in riproduzione.

Tag di fine

Necessario.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Alexander Klimenkov - Quattordici

Il risultato dell'esempio nel browser Opera è mostrato in Fig. 1.

Riso. 1. Riproduzione di un file audio

Browser

I controlli di riproduzione audio variano nell'aspetto tra i browser, ma gli elementi di base sono gli stessi. Questi sono il pulsante di riproduzione/pausa, la lunghezza della traccia, il tempo di riproduzione trascorso e totale e il livello del volume.

Con l'avvento di connessioni Internet ragionevolmente veloci, Flash è stato l'unico strumento per riprodurre suoni sui siti web. Ma HTML5 cambierà radicalmente il modo in cui i suoni vengono riprodotti su Internet. In questo articolo voglio spiegarti nel dettaglio come utilizzare il tag sui tuoi siti

Noi usiamo

Di seguito è riportato l'esempio più semplice di utilizzo del tag, scarica un file mp3 e lo riproduce. Attenzione all'attributo autopaly che viene utilizzato per riprodurre automaticamente il suono. Tuttavia, non dovresti riprodurre automaticamente i suoni sul sito, perché infastidisce gli utenti.

Riproduci l'audio in loop

Vuoi riprodurre il suono in loop? L'attributo loop ti aiuterà a farlo. Ma ancora una volta, non abusare della riproduzione automatica e del loop se non vuoi che l'utente lasci il sito prematuramente.

Visualizzazione dei controlli

Invece di riprodurre automaticamente i suoni, il che è decisamente una cattiva pratica, dovresti lasciare che il browser visualizzi alcuni controlli, come il volume e i pulsanti di riproduzione (pausa). Questo è facile da fare semplicemente aggiungendo l'attributo controlli.

Vari formati di file

Il tag è supportato dalla maggior parte dei browser moderni, ma il problema è che browser diversi supportano formati di file diversi. Safari, ad esempio, può riprodurre MP3, ma Firefox no, e riproduce invece file OGG. La soluzione a questo problema è utilizzare entrambi i formati in modo che ogni visitatore possa sentire il suono, indipendentemente dal browser utilizzato.

Specificare il tipo MIME dei file

Quando si utilizzano formati di file diversi, è buona norma specificare il tipo MIME per ciascun file per aiutare il browser a localizzare il file che supporta. Questo può essere fatto facilmente usando l'attributo genere.

Per i browser più vecchi

Cosa succede se il visitatore utilizza IE6 o qualche altro browser preistorico che non supporta il tag? Tutto è facile: di seguito il codice che visualizzerà il messaggio per i browser che non supportano il tag.

Buffer file

Quando si riproducono file di grandi dimensioni, è possibile utilizzare il buffer dei file. Per questo puoi usare l'attributo precarico... Può assumere 3 valori:

• nessuno- se non si desidera utilizzare il buffer dei file;
• auto- se vuoi che il browser tamponi l'intero file;
• metadati- scaricare solo informazioni di servizio (durata del suono, ecc.).

Controllo della riproduzione JavaScript

È molto facile controllare il lettore audio HTML5 tramite JavaScript. L'esempio seguente mostra come creare i controlli di base del lettore audio utilizzando JavaScript:

È tutto per oggi.
Spero che questo articolo ti abbia aiutato a comprendere le funzionalità di base dei tag HTML5. .

Questa domanda si verifica molto spesso, quindi ho deciso di dedicarvi un articolo separato nelle lezioni. Poiché HTML non dispone di una tecnologia universale per la riproduzione dell'audio per tutti i browser, per risolvere questo problema propongo di scaricare un file di lettore audio, come avviene nella maggior parte dei siti. Facciamo tutto in passi:

1. Sull'hosting, dove si trova il tuo sito, nella directory principale (la cartella in cui si trova il file indice), crea la cartella audio. In futuro, inserirai tutti i file audio al suo interno.

3. Ora seleziona i file che desideri, preferibilmente in formato mp3. Crea una cartella Audio alla radice del sito e caricarli.

4. Non resta che inserire il codice di connessione del giocatore. È adatto a qualsiasi sito Nel posto giusto, è sufficiente specificare il percorso del file del lettore e del file audio, sostituendo le parole di conseguenza tuo_dominio e nome_file_audio:

E hai finito! Puoi anche vedere il lavoro esempio.

Come impostare la musica di sottofondo in html

Utilizzando le funzionalità dell'HTML e del browser, puoi anche inserire musica di sottofondo nella pagina. Avrai bisogno di un file audio del formato corretto: WAV, AU, MIDI o MP3. Puoi usare qualsiasi file con l'estensione specificata come esempio.

Il primo modoè il tag di incorporamento. L'elemento embed viene utilizzato per caricare e visualizzare oggetti (ad esempio file video, filmati flash, alcuni file audio, ecc.) che il browser non comprende in modo nativo.

La sintassi è piuttosto semplice:

Nessun tag di chiusura richiesto.

Ora diamo un'occhiata a un esempio di un record con attributi, e sotto con la loro decodifica:

Incorpora gli attributi dei tag per riprodurre l'audio in html
larghezza - la larghezza del pannello in pixel (o percentuale)
altezza - l'altezza del pannello in pixel (o percentuale)
allinea - la posizione del pannello rispetto al testo, i valori possibili sono sinistra, destra, centro
nascosto - consente di nascondere il pannello, i valori degli attributi: true - il pannello è nascosto, false - il pannello è visibile (valore predefinito)
autostart - valore true - il player si avvia automaticamente al caricamento della pagina, false - attende che venga premuto il pulsante play
loop - loop, true - la traccia viene riprodotta in cerchio e, se false, solo una volta

Secondo modo. Molto vecchio, ma anche pratico) Aggiungi la melodia alla stessa cartella (directory) in cui si trova il tuo file e nel corpo scrivi il seguente codice:

Di conseguenza, dopo aver caricato la pagina, suonerà la melodia specificata da te nel tag bgsound. Ora diamo un'occhiata più da vicino agli attributi del tag. :

src- percorso del tuo file audio
ciclo continuo- quante volte ripetere la melodia (se -1, allora si ripete all'infinito)
bilancia- valore di bilanciamento stereo (da -10000 a 10000)
volume- il volume della melodia in esecuzione, dove 0 è il massimo e -10000 è il minimo.

Tuttavia, non sarà possibile controllare in alcun modo il lettore: ogni volta che la pagina viene aggiornata, la traccia verrà riprodotta di nuovo.

Dopo aver descritto il metodo di inserimento della musica di sottofondo, voglio dissuaderti da questo, poiché la maggior parte degli utenti al momento di visitare vari siti già, di regola, ascolta musica. Pertanto, la musica di accompagnamento non può che costringerlo a chiudere la scheda con il sito.

Inserisci audio e musica in HTML5 - tag audio

Audio- un tag associato che definisce il suono di sottofondo, la musica o altro flusso audio sul sito.

Attributi dei tag audio

riproduzione automatica- il file viene riprodotto immediatamente al caricamento della pagina (simile alla musica di sottofondo bgsound)
controlli- visualizzare il pannello di controllo del lettore nel browser
ciclo continuo- riproduce di nuovo il file dopo la sua fine
precarico- il download del file audio avverrà insieme al caricamento della pagina
src- percorso del file audio (mp3 o ogg)

Codice di esempio con il tag audio

Audio in HTML 5