Come inserire l'audio in una pagina html. Come inserire l'audio in un documento HTML? Come impostare la musica di sottofondo in html

Questa domanda si presenta molto spesso, quindi ho deciso di dedicarvi un articolo a parte nelle lezioni. Poiché l'HTML non dispone di una tecnologia universale per la riproduzione dell'audio per tutti i browser, per risolvere questo problema suggerisco di scaricare il file del lettore audio, come avviene nella maggior parte dei siti. Facciamo tutto passo dopo passo:

1. Sull'hosting in cui 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 ti servono, preferibilmente in formato mp3. Crea una cartella audio nella root del sito e caricali.

4. Non resta che inserire il codice di connessione del lettore. È adatto a qualsiasi sito Nel posto giusto basta indicare il percorso del file player e del file audio, sostituendo rispettivamente le parole your_domain e audio_file name:

E tutto è pronto! Puoi anche guardare l'esempio funzionante.

Come installare la musica di sottofondo in HTML Utilizzando le funzionalità di HTML e del browser, puoi anche inserire musica di sottofondo nella pagina. Avrai bisogno di un file audio nel formato desiderato: WAV, AU, MIDI o MP3. È possibile utilizzare come esempio qualsiasi file con l'estensione specificata.

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

La sintassi è abbastanza semplice:

Non è richiesto alcun tag di chiusura.

Consideriamo ora un esempio di record con attributi e, di seguito, la loro decodifica:

Incorpora gli attributi dei tag per la riproduzione dell'audio in html
larghezza - larghezza del pannello in pixel (o percentuale)
altezza - altezza del pannello in pixel (o percentuale)
allinea - posizione del pannello rispetto al testo, i valori possibili sono sinistra, destra, centro
nascosto - permette di nascondere il pannello, valori degli attributi: true - il pannello è nascosto, false - il pannello è visibile (valore predefinito)
autostart - true - il lettore si avvia automaticamente al caricamento della pagina, false - attende che venga premuto il pulsante di riproduzione
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 nel tag bgsound. Ora diamo uno sguardo migliore agli attributi dei tag:

src: percorso del file audio
loop - quante volte ripetere la melodia (se -1, si ripete all'infinito)
bilanciamento - valore del bilanciamento stereo (da -10000 a 10000)
volume - volume di riproduzione della melodia, 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 nuovamente.

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

Inserimento di audio e musica in HTML5 - tag audio
audio: un tag abbinato 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 quando la pagina viene caricata (simile alla musica di sottofondo di bgsound)
controlli: visualizza il pannello di controllo del lettore nel browser
loop: riproduce nuovamente il file al termine
precaricamento: il file audio verrà caricato insieme al caricamento della pagina
src - percorso del file audio (mp3 o ogg)

Codice di esempio con tag audio

Etichetta audio

Audio in HTML5

Il tag audio non è supportato dal tuo browser.
Scaricare musica.

Tag, attributi e valori

• - determina il suono e la musica HTML di sottofondo sul sito. Situato nel settore.
• - definisce l'URL di un file audio in formato Wav o Mp3.
• loop="" - determina il numero di riproduzioni.
• volume="-1000" - regola il volume del suono. In questo caso, il valore indicato verrà sottratto dal livello di volume corrente impostato sul computer dell'utente.
• balance="0" - regola il bilanciamento del suono.

Attenzione! Il metodo sopra descritto per introdurre il suono di sottofondo in una pagina HTML è adatto solo per le prime versioni dei browser Internet Explorer e Opera. Non è adatto ai browser moderni ⇒ la musica e il suono sulla pagina del sito non vengono riprodotti! Pertanto, guarda di seguito, dove viene discusso in dettaglio il metodo cross-browser per inserire suono e musica in un sito Web per tutti i browser (Opera, Firefox, Internet Explorer, Chrome).

Suono in HTML o musica sul sito per tutti i browser

Suono HTML di sottofondo per Opera, Firefox, Internet Explorer, Chrome:

Il codice si trova nel settore.

Attributi e valori

• autostart="" - determinerà se la musica verrà riprodotta automaticamente quando si apre una pagina Internet o meno. Valori possibili: vero - sì o falso - no.
• loop="" - determina se le riproduzioni verranno ripetute. Valori possibili: vero - sì o falso - no.
• hidden="" - determina se il pannello di controllo del lettore sarà nascosto o meno. Valori possibili: vero - sì o falso - no. In caso contrario, vengono indicate le dimensioni del pannello: larghezza="" altezza="" .

Il consiglio suggerisce da solo! Utilizza il suono o la musica HTML di sottofondo sul tuo sito solo quando è veramente giustificato!

L'audio HTML5 offre funzionalità migliorate per lavorare con il contenuto audio. Fino a poco tempo fa, l'unico modo per aggiungere file audio alle pagine web era integrare il suono di sottofondo utilizzando un tag che veniva riprodotto mentre l'utente navigava nella pagina, senza possibilità di disattivarlo.

Grazie all'aggiunta di un nuovo elemento alla specifica HTML5, ora è possibile aggiungere contenuti audio con un'interfaccia di programmazione integrata senza la necessità di plug-in.

Come aggiungere audio HTML5 a una pagina Web 1. Supporto del browser degli elementi

vale a dire: 9.0
Firefox: supporto base 3.5, supporto completo 15.0
Cromo: 3.0
Safari: 3.1
Opera: 10.5
iOSSafari: 7.1
Opera Mini: -
Browser Android: 4.1
Chrome per Android: 44

L'elemento HTML5 viene utilizzato per incorporare contenuti audio nelle pagine web. In generale, il markup HTML si presenta così:

L'attributo controlli aggiunge browser per visualizzare l'interfaccia di controllo del lettore audio: pulsanti di riproduzione, pausa e volume.

Riso. 1. Aspetto del lettore audio nei diversi browser

Al momento non esiste un formato audio che funzioni in tutti i browser, quindi per garantire che il contenuto sia accessibile al pubblico più vasto possibile, si consiglia di includere più fonti audio rappresentate utilizzando l'attributo src dell'elemento. Allo stesso tempo, puoi aggiungere contenuto di fallback per i browser che non supportano l'elemento.

Scarica nome.mp3

Tabella 1. Attributi dei tag Attributo

riproduzione automatica	Riproduzione automatica di un file audio immediatamente dopo il caricamento della pagina.
controlli	Indica al browser di visualizzare i controlli di riproduzione di base (avviare e interrompere la riproduzione, passare a un'altra posizione in una registrazione, regolare il volume).
ciclo continuo	Riproduzione in loop di un file audio.
disattivato	Disattiva l'audio durante la riproduzione di un file audio.
precarico	Un attributo responsabile del precaricamento del contenuto audio. Facoltativo, alcuni browser lo ignorano. Valori possibili: auto: il browser scarica l'intero file audio in modo che sia disponibile quando l'utente inizia a riprodurlo. metadati - Il browser scarica la prima piccola parte del file audio per determinarne le caratteristiche di base. nessuno: nessun download automatico del file audio.
src	Contiene l'URL assoluto o relativo del file audio.

2. Codec audio

Un codec audio (decoder) è un programma per convertire i dati digitali in un file audio o in un formato di flusso audio. I formati audio più diffusi sono:

MP3 è il formato audio più popolare che utilizza la compressione con perdita e consente di ridurre più volte le dimensioni del file. A causa dei costi di licenza, Firefox e Opera non sono supportati.

A.A.C. (Codec audio avanzato)- un codec chiuso, analogo a MP3, ma rispetto a quest'ultimo supporta una qualità del suono superiore con dimensioni del file simili.

Ogg Vorbis è un formato gratuito e open source supportato in Firefox, Opera e Chrome. Fornisce una buona qualità del suono, ma non è ampiamente supportato dai lettori hardware.

3. Risorse multimediali alternative

L'elemento viene utilizzato per aggiungere più risorse multimediali per e . Indica file video/audio alternativi tra cui il browser può scegliere in base al tipo di supporto o codec supportato.

4. Aggiungi sottotitoli e titoli

L'elemento viene utilizzato come elemento figlio e . Aggiunge una traccia di testo per sottotitoli, titoli multimediali o altre informazioni di testo che dovrebbero essere visibili durante la riproduzione di un file audio o video.

Tabella 3. Attributi dei tag Attributo Descrizione, valore accettato

predefinito	Indica che questa traccia viene riprodotta per impostazione predefinita. Solo un elemento può contenere un determinato attributo.
Tipo	Specifica il tipo di traccia di testo che i sottotitoli vengono visualizzati per impostazione predefinita. Valori accettati: didascalie: traduzione di dialoghi ed effetti sonori, visualizzati come testo sul video (per utenti non udenti). capitoli: aggiunge i titoli dei capitoli come elenco per la navigazione nel file multimediale. descrizioni - aggiunge una descrizione audio di ciò che sta accadendo nel video (per utenti non vedenti). metadati: i metadati utilizzati dagli script non vengono visualizzati agli utenti. sottotitoli: duplicazione del testo della traccia audio del video, visualizzata come sottotitoli per il video.
etichetta	Aggiunge un titolo al brano. Se questo attributo non è impostato, il browser applicherà il valore predefinito.
src	Contiene un URL assoluto o relativo ai dati della traccia di testo.
srclang	Lingua del brano riprodotto.

5. Esempio stilizzato di lettore audio

Usando gli stili CSS puoi dare al tuo lettore audio un aspetto insolito. La riproduzione è controllata utilizzando un piccolo script (utilizzando la libreria jQuery), il suono appare quando passi il mouse sopra il record.

Per inserire una clip audio in una pagina Web, HTML 5 fornisce un tag accoppiato. L'indirizzo Internet del file in cui è memorizzato questo clip audio è indicato utilizzando l'attributo SRC di questo tag:

Quando un browser Web rileva un tag, può scaricare e riprodurre immediatamente il file audio, scaricarlo senza riprodurlo o non eseguire alcuna operazione. (In quest'ultimo caso, possiamo avviare la riproduzione da uno script Web; gli script Web verranno discussi nella Parte III.) Può anche fornire controlli sulla pagina Web che consentono a un visitatore di riprodurre, mettere in pausa, avanzare rapidamente o riavvolgere un audio. file. e regola il volume. Tutto questo è personalizzabile utilizzando vari attributi di tag, che esamineremo a breve.

Il tag crea un elemento di blocco della pagina Web. Pertanto non saremo in grado di inserire un clip audio in una pagina Web come parte di un paragrafo. Ma per inserirlo in un paragrafo separato, non dobbiamo eseguire alcuna azione aggiuntiva (a differenza dell'immagine).

Per impostazione predefinita, il browser Web non riprodurrà il clip audio. Per fare ciò, devi specificare l'attributo speciale AUTOPLAY nel tag. Questo è un attributo davvero speciale: non ha significato, è sufficiente la sua semplice presenza nel tag perché abbia effetto (attributo tag senza significato):

Ora sentirai il suono!

Per impostazione predefinita, il clip audio non viene visualizzato in alcun modo sulla pagina Web (il che, tuttavia, è comprensibile: l'audio non deve essere guardato, ma ascoltato). Ma se inserisci un attributo nel tag senza il valore CONTROLS, il browser Web visualizzerà i controlli di riproduzione audio nel punto della pagina Web in cui è inserito il tag. Questi includono un pulsante di riproduzione/pausa, una barra di riproduzione e un controllo del volume:

Premi il pulsante di riproduzione per ascoltare il suono.

Ha senso indicare un attributo senza il valore AUTOBUFFER in un tag solo se lì non è presente l'attributo AUTOPLAY. Se è specificato, il browser Web inizierà a scaricare il file audio immediatamente dopo il caricamento della pagina Web: ciò eliminerà il ritardo del file prima dell'inizio della riproduzione.

Per testare in pratica le conoscenze acquisite, avremo bisogno di un clip audio in un formato supportato dal browser web. L'autore ha trovato un piccolo clip audio in formato WAV-PCM e gli ha dato il nome sound.wav. Puoi utilizzare qualsiasi altro clip audio, ma ovviamente dovrai specificare il nome del file in cui è memorizzato nel codice HTML del Listato 4.2.

. Creiamo una pagina Web che descrive questo tag, il cui codice HTML è mostrato nel Listato 4.2.

Salviamo la pagina Web in un file chiamato t_audio.htm. Inseriamo il file audio selezionato (dell'autore - sound.wav) nella cartella dove si trovano tutti i file del nostro sito Web (incluso t_audio.htm). E apri immediatamente la pagina Web appena creata in un browser Web (Fig. 4.2).

Vedremo il codice di esempio e, di seguito, il risultato della sua esecuzione: elementi utili per controllare la riproduzione di una clip audio. Possiamo premere play e ascoltarlo.

Inserimento di un video

Un tag accoppiato viene utilizzato per inserire un video in una pagina Web. L'indirizzo Internet del file video è indicato utilizzando il familiare attributo SRC di questo tag:

Dopo aver riscontrato questo tag, il browser Web visualizzerà un pannello di visualizzazione del contenuto video nel punto della pagina Web in cui è posizionato. A seconda degli attributi specificati nel tag, potrebbe scaricare e riprodurre immediatamente il file audio, scaricarlo solo senza riprodurlo o non fare nulla. Può anche visualizzare i controlli di riproduzione video su una pagina Web.

Come il tag, il tag crea un elemento di blocco di una pagina Web e supporta gli attributi AUTOPLAY, CONTROLS e AUTOBUFFER:

Se la riproduzione del video non è ancora iniziata, nel riquadro di anteprima verrà visualizzato il primo fotogramma del video o nulla (il comportamento esatto dipende dal browser Web). Ma possiamo specificare un'immagine grafica che verrà visualizzata come schermata iniziale. Questo viene fatto utilizzando l'attributo POSTER del tag; il suo valore indica l'indirizzo Internet del file grafico desiderato:

Qui abbiamo specificato un'immagine splash per il video, che verrà visualizzata nel pannello di visualizzazione prima dell'inizio della riproduzione e che è memorizzata nel file filmposter.jpg.

Bene, facciamo pratica? Innanzitutto, troviamo un file video di un formato adatto. L'autore ha trovato un piccolo video in formato OGG e gli ha dato il nome film.ogg. Puoi scegliere qualsiasi altro video, ma, ovviamente, dovrai specificare il nome del file nel codice HTML sottostante.

SU UNA NOTA

Se non trovi un video in un formato adatto, puoi crearne uno tu stesso transcodificando un video salvato in un formato diverso. A questo scopo è adatta l'utility SUPER © che si trova all'indirizzo Internet http://www.erightsoft.com/SUPER.html. Supporta molti formati multimediali, incluso OGG.

Apriamo la pagina Web index.htm e inseriamo il tag nella sezione tag. Creiamo una pagina Web che descrive questo tag, il cui codice HTML è mostrato nel Listato 4.3.

Salviamo la pagina Web in un file denominato t_video.htm. Inseriamo il file video selezionato (dall'autore - film.ogg) nella cartella in cui si trovano tutti i file del nostro sito Web (incluso t_video.htm). E aprire la pagina Web completata t_video.htm in un browser Web (Fig. 4.3).

Sotto il codice di esempio vedremo il risultato della sua esecuzione: il pannello di visualizzazione e gli elementi per il controllo della riproduzione. Premiamo il pulsante play e guardiamo il film. Tieni presente che una volta avviata la riproduzione, i controlli scompariranno; Per accedervi, è necessario posizionare il cursore del mouse sul pannello di visualizzazione. Una volta terminata la riproduzione del video, questi controlli appariranno nuovamente sullo schermo.

Funzionalità aggiuntive dei tag e

Ma aspetta! In precedenza, abbiamo appreso che l'insieme dei formati multimediali supportati varia tra i diversi browser Web. E può succedere che l'audio o il video inserito nella pagina Web sia troppo difficile per alcuni browser Web. Cosa dovrei fare?

Soprattutto in questi casi, HTML 5 offre la possibilità di indicare più file multimediali in un tag o contemporaneamente. Il browser Web stesso sceglierà tra loro quello di cui supporta il formato.

Se elencheremo più file multimediali in uno o in un tag, dobbiamo fare due cose.

1. Rimuovere dal tag o dal riferimento al file multimediale, ovvero l'attributo SRC e il suo valore.

2. Inserisci all'interno un tag o una serie di tag, ognuno dei quali determinerà l'indirizzo Internet di un file multimediale.

Un singolo tag specifica sia l'indirizzo Internet del file multimediale che il suo tipo MIME. Gli attributi SRC e TYPE di questo tag hanno rispettivamente questo scopo:

Questo tag identifica due file video che memorizzano lo stesso filmato: uno in formato OGG, l'altro in formato QuickTime. Un browser Web che supporta il formato OGG scaricherà e riprodurrà il primo file, mentre un browser Web che supporta QuickTime caricherà e riprodurrà il secondo file.

Tieni presente che il tipo MIME del file video (e, di conseguenza, l'attributo TYPE del tag) può essere omesso. Ma il browser Web dovrà caricare l'inizio del file per vedere se supporta il formato del file. E questo è un carico aggiuntivo e completamente inutile sulla rete. Quindi è meglio specificare sempre il tipo MIME.

Cosa succede se il browser Web non supporta affatto i tag e? In questo caso li ignorerà e non visualizzerà nulla sulla pagina web. Tuttavia, possiamo fornire un testo sostitutivo che descriva il problema che si è verificato e suggerisca qualche modo per risolverlo (ad esempio, cambiare il browser Web). Questo testo sostitutivo viene inserito all'interno di un tag o dopo tutti i tag (se presenti), ad esempio, come nel Listato 4.4.

Tieni presente che non abbiamo specificato i tag che creano il paragrafo nel testo sostitutivo. I tag stessi sono elementi di blocco, quindi non ce n'è bisogno.

Riguarda i media Internet e gli strumenti HTML 5 per supportarli.

Descrizione

Aggiunge, riproduce e gestisce le impostazioni audio su una pagina Web. Il percorso del file viene specificato tramite l'attributo src o un sottotag. Puoi scrivere del testo all'interno del contenitore che verrà visualizzato nei browser che non funzionano con questo tag.

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

Tavolo 1. Codec e browser

Codec	Internet Explorer	Cromo	musica lirica	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

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

Attributi di sintassi Il suono inizia a essere riprodotto immediatamente dopo il caricamento della pagina. Aggiunge un pannello di controllo a un file audio. Ripete il suono dall'inizio alla fine. Utilizzato per scaricare un file insieme al caricamento di una pagina web. Specifica il percorso del file in riproduzione. Etichetta di chiusura

Necessario.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Audio

Alexander Klimenkov - quattordici

Il tag audio non è supportato dal tuo browser. Scaricare musica.

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

Riso. 1. Riproduci 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 durata della traccia, il tempo di riproduzione trascorso e totale e il livello del volume.