Come inserire una traccia audio in html. Inserimento di audio e video

Penso che sia ora di ottenere una risposta alla domanda su come inserire filmati Flash, file video e audio in un documento HTML.
Ti mostrerò diversi modi per inserire un clip video o un file audio.

Metodo 1.

I file video e audio possono essere inseriti in un documento HTML utilizzando il tag.

Non è richiesto un tag di chiusura.

È possibile che quando controlli l'esempio, il tuo browser richieda la connessione a un plug-in speciale:

L'aspetto del lettore dipende dal plugin connesso e dagli attributi del tag.

Ad esempio, ecco Google Chrome:

Oppure in Internet Explorer:

Attributi INcorpora

altezza - altezza del giocatore (in pixel). Esempio:

Swf" altezza="100">

larghezza - larghezza del giocatore (in pixel). Esempio:

Swf" larghezza="200">

src - indirizzo di un filmato flash, file video o audio. Esempio:

type - specifica il tipo MIME (una specifica per la formattazione dei messaggi e la codifica delle informazioni per la trasmissione su Internet) del contenuto dell'elemento.

pluginspage - l'indirizzo della pagina Internet da cui è possibile scaricare e installare il plug-in del browser.

avvio automatico - se il parametro è "0", significa che dopo aver caricato la pagina web, il lettore verrà arrestato. Se si specifica il parametro "1", dopo aver caricato la pagina Web, il lettore verrà riprodotto automaticamente (funziona nel browser IE). Esempio:

titolo: visualizza una descrizione comando quando si passa il mouse su un lettore audio o video. (Funziona nel browser IE).

Esempio:

Incorporamento del TAG

Risultato in Google Chrome:

Oppure puoi farlo in questo modo:

Incorporamento del TAG

Risultato in Google Chrome:

Metodo 2.

Immagini, audio, video, applicazioni Java, ActiveX, PDF e Flash possono essere inseriti in un documento HTML utilizzando il tag.

Il tag di chiusura è obbligatorio.

Attributi dell'OGGETTO

data – specifica il percorso del file oggetto;
type – tipo di oggetto (facoltativo). Per esempio:

type="application/x-shockwave-flash" o type="image/png" ecc.;

larghezza – larghezza;
altezza – altezza

Puoi anche scrivere del testo tra i tag di apertura. Il testo scritto verrà visualizzato se il browser non supporta l'elemento oggetto.

Esempio:

Tag OBJECT Il tuo browser non supporta il tag object

Il risultato di questo esempio in una finestra del browser se non supporta il tag OBJECT:

Metodo 3.

Puoi anche inserire l'audio in una pagina web utilizzando il tag:

Attributi dei tag AUDIO

riproduzione automatica: l'audio viene riprodotto automaticamente immediatamente dopo il caricamento della pagina Web;

controlli - pannello di controllo per il lettore audio;

altezza - altezza del lettore audio;

loop: ripete la riproduzione audio dall'inizio al termine;

src - percorso del file audio

Esempio:

TAG AUDIO

Risultato:

Puoi anche inserire un video in una pagina web utilizzando il seguente tag:

Attributi dei tag VIDEO

riproduzione automatica: il video viene riprodotto automaticamente immediatamente dopo il caricamento della pagina Web;
controlli - pannello di controllo per il lettore video;
altezza - altezza del lettore video;
larghezza - larghezza del lettore video;
loop: ripete la riproduzione del video dall'inizio al termine;
src: percorso del file video;
poster - indirizzo immagine. L'immagine verrà visualizzata all'utente mentre il video non è disponibile o in riproduzione.

Come aggiungere musica a un video? Utilizza Movavi Video Editor e queste semplici istruzioni.

Installa Movavi Video Editor

Scarica l'editor video in russo dal nostro sito web. Una volta completato il download, esegui il file di installazione del programma e segui le istruzioni di installazione.

Aggiungi video e audio al programma

Avvia il nostro programma per aggiungere musica ai video e seleziona Nuovo progetto. Fai clic sul pulsante Aggiungi file e seleziona il video a cui desideri aggiungere una traccia audio e il file audio che verrà utilizzato come colonna sonora. I file caricati verranno automaticamente aggiunti alle tracce corrispondenti sulla tabella di modifica: video - alla traccia video, audio - alla traccia audio.

Regola la durata del suono

Quando combini musica e video, potresti riscontrare che i file video e audio aggiunti hanno durate diverse. Ci sono due opzioni possibili qui.

• Il file audio è più lungo del video. Fai clic sull'audio, sposta il cursore alla fine del file video sulla timeline e fai clic sull'icona delle forbici. Quindi fai clic sul frammento audio indesiderato e premi Elimina sulla tastiera per eliminare il frammento.
• Il video è più lungo della musica. Aggiungi più copie del file audio selezionato alla traccia audio (fai clic con il pulsante destro del mouse sul file e seleziona Copia, quindi Incolla). Taglia l'eccesso.

Ricorda che in Movavi Video Editor puoi inserire più tracce audio in un video contemporaneamente. Ad esempio, una traccia può essere utilizzata per la musica di sottofondo e un'altra per effetti sonori speciali.

Salva il risultato

Aggiungere l'audio al video si è rivelato abbastanza semplice. Ora non resta che registrare tutto in un unico file video. Fai clic sul pulsante Salva e seleziona una delle opzioni di esportazione dalle schede sul lato sinistro della finestra. Il programma offrirà di salvare il video nella cartella Libreria Movavi. Puoi cambiare la cartella se lo desideri. Specifica il formato video o il modello del tuo dispositivo mobile e fai clic sul pulsante Start. Una volta completato il processo di salvataggio, troverai il file video finito nella cartella selezionata. Ora sai come aggiungere audio al video!

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 un tag di chiusura.

Ora guarda un esempio di un record con attributi e sotto con 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.

Saluti, amici! In questo video continueremo la nostra conversazione sull'inserimento di oggetti in un documento HTML.

Dopo che lo script è connesso, dobbiamo aggiungere un altro script per connettere la shell del lettore stesso e specificare i parametri del lettore:

AudioPlayer.setup("cartella file/player.swf", (larghezza: 290, volume iniziale: 100, paginatrasparentebg: "sì", sinistra: "000000", icona sinistra: "FFFFFF" ));

Questo script deve essere scritto anche prima del tag di chiusura. Vale la pena notare che qui abbiamo indicato la larghezza, il volume, che verrà impostato automaticamente durante la riproduzione, e altri parametri che possiamo modificare a nostra discrezione.

Dopo aver collegato gli script, dobbiamo solo aggiungere una composizione musicale alla pagina in modo che sia disponibile per l'ascolto. Per fare ciò utilizzeremo i tag di paragrafo, all'interno dei quali potremo lasciare informazioni che verranno visualizzate se il player non appare. Colleghiamo un altro script che indica l'ID del lettore e il percorso del file musicale. Apparirà qualcosa del genere:

Musica

Qui vale anche la pena prestare attenzione all'ID, che viene utilizzato per visualizzare il giocatore. Da notare che se vogliamo aggiungere più di una composizione ad una pagina, dobbiamo registrare un nuovo ID per ogni file. Ad esempio, per aggiungere un altro file cambieremo leggermente l'ID, qualcosa del genere:

Musica

AudioPlayer.embed("audioplayer_2", (soundFile: "percorso della cartella con file musicale/nome file.mp3"));

Bene, questo è praticamente tutto. Ora sappiamo come aggiungere audio a un documento HTML. Naturalmente ci sono altri modi. Ma penso che nel nostro caso questa opzione sia abbastanza sufficiente.

Video lezione: come inserire l'audio in un documento HTML?

La directory HTML e altri materiali possono e devono essere scaricati!

muzicons.com - non scarica file da un computer, inserendo l'audio tramite collegamenti diretti al file o tramite il motore di ricerca integrato si presenta così:

www.jetune.ru: funziona completamente solo per gli utenti russi. Per caricare una traccia, devi trovare sul sito (senza registrazione) o caricare il tuo artista (con registrazione), fare clic su una traccia specifica e ottenere il codice giocatore:

prostopleer.com: scarica o cerca musica sul sito e ottieni il codice del lettore: alcuni servizi di file hosting dispongono di lettori audio per file mp3

Rappresentanti tipici della fauna della rete:

Registrati su divshare.com. Fai clic su "Carica nuovo file", carica la traccia. Fare clic su "dashboard" (sopra) e verrà visualizzato il file. Fai clic destro su di esso, seleziona "condividi", copia "Incorpora playlist" e incolla:

box.net dopo aver scaricato il file (cliccando su condiviso) visualizzerà un collegamento a una pagina per ascoltare e scaricare un file come:
www.box.net/shared/zf1uk007vy

2. Imparare a “prendere i pesci”

Avendo compreso il principio, puoi dimenticarti di tali servizi, che spesso vengono chiusi, eliminano file, modificano le condizioni, ecc.
Il codice per inserire la musica in un blog è costituito da due componenti principali: un flash player (file *.swf nel formato http://../player.swf) e un file audio (nel formato http://.. /song.mp3) - il resto è HTML, cioè lettere.
Sembra qualcosa del genere:




Ho caricato il flash player qui e ho ottenuto:
http://site/wp-content/uploads/2009/06/webplayer.swf
quindi caricato la traccia:
http://site/wp-content/uploads/2009/06/08-caravan.mp3
Ho incollato questi collegamenti nel codice sopra:

Codice completo per l'indignazione: