Cum se introduce un fișier audio în HTML. Salvați audio de pe Internet în fișiere

De ce aveți nevoie de muzică pe site?

O întrebare destul de interesantă, joacă muzică sau fișiere vocale pe site sau playerul încorporat ajută vizitatorii site-ului să se relaxeze, provoacă emoții pozitive și se stabilește până la modul dorit, astfel încât să spunem facilitează interacțiunea cu site-ul. Dar aceste efecte funcționează numai atunci când muzica de pe site este aleasă corect, iar volumul sonor nu depășește limitele admise, altfel toate eforturile vor fi în zadar și vor provoca emoții negative de la vizitatorii site-ului.

Cum se introduceți audio (muzică) pe site-ul din HTML?

De multe ori punem o astfel de întrebare, muzica de pe site este un element relevant și creativ și există multe modalități de a le reproduce și nu sunt atât de dificil de implementat. Să începem cu faptul că fiecare utilizator al rețelei globale utilizează orice browser pentru a accesa Internetul și nu există tehnologie generală și universală pentru a reda fișiere de sunet și muzică, fiecare browser funcționează în propriile algoritmi și sunt oarecum diferiți unul de celălalt , atunci când redați muzică din ajutorul introducerii în codul paginii HTML poate apărea. Dar după cum știți, toate problemele sunt rezolvate!

Introduceți muzică la HTML, JavaScript, JQuery, Ajax Metode:

1 mod.

Crearea unui player muzical audio pe site sau pe player

Tehnologia este simplă, fișierul de jucător este creat astfel încât să nu încarce site-ul sau serverul alege tehnologia pe care o vom folosi: JavaScript, JQuery, Ajax. Pe baza tehnologiei selectate, dezvoltăm un script pentru site-ul nostru și introduceți pe site. Scriptul este creat în funcție de ceea ce aveți nevoie: reproducerea automată a muzicii de fundal pe site sau pe playerul condus de utilizator. Apoi, creați un dosar la rădăcina site-ului pentru muzică și încărcați fișiere audio în ea.

Sau ca o compatificare alternativă, puteți crea un jucător pe tehnologia Flash (Flash), un astfel de jucător va arăta mai eficient. Adevărul va fi mai scump și mai greu pentru site (va crește timpul pentru descărcarea paginilor site-ului).

2 mod.

Instalarea muzicii pe site folosind HTML

Utilizarea capabilităților HTML și a browserului pot fi introduse pe site-ul site-ului sau muzicii de fundal. Tehnologia este la fel de simplă: codul HTML5 este creat cu eticheta "Audio" și acest cod este scris pe site și când utilizatorul intră pe site, acesta vede un jucător minimizat, vizitatorul face clic pe butonul de redare sau începe automat pentru a juca muzica de fundal. Vizualizarea jucătorului va depinde de browserul din care a venit vizitatorul, dar funcționalitatea va rămâne standard: jocul, opriți, următorul, prev, butoanele de volum. Arată ca un jucător cu cod HTML ca acesta:

Codul cam pentru a introduce arată astfel:

După cum ați observat comanda "Controls Autoplay" include redarea muzicii de îndată ce vizitatorul vine pe site.

O versiune alternativă a codului HTML este eticheta "bgsound", nu utilizează deloc un jucător vizual, atunci când vizitați site-ul începe să redea muzică pe site, dar ajustați volumul, puneți o pauză etc. Utilizatorul nu va fi capabil. Setarea redării fișierelor de sunet este configurată în codul însuși.

Formatele fișierelor de sunet pentru redarea muzicii pe site pot fi: WAV, Au, MIDI, MP3, OGG (extensii). Fișierele muzicale sunt încărcate pe site sau link-uri către acele site-uri în care se află fișierul de sunet, principalul lucru este că este în accesul deschis.

Cât de des a trebuit să cauți muzica pe care o doriți online? Aceasta este cea pe care ați auzit-o pe site-ul dvs. preferat (rețele sociale, portaluri de muzică). Se întâmplă adesea că pur și simplu nu este altceva.
Matele "căutătorii" vor spune că nu este. Dar să luăm în considerare utilizatorul mediu al cărui cunoaștere a tehnologiilor nu permite "sapat" în codul sursă al paginii sau al cache-ului.

Sa întâmplat așa că majoritatea prietenilor mei sunt doar astfel de utilizatori. Aici pentru ei și sa decis să scrie această extindere a cromului (și altele asemenea).

Ce poate

  • Descarca orice fișier audio de pe orice site (MP3, WAV)
  • Determină corect numele original
  • Arată durata, dimensiunea și rata de biți
  • Descărcați pe aceeași pagină ca o pistă (fără redirecționare)
  • Previzualizați fișierul
Încercați extinderea din magazinul Chrome

Unele imagini și video:

Voi fi fericit cu o critică sănătoasă. Sper că cineva va fi util pentru această expansiune.
Dacă sunteți interesat, atunci în viitorul apropiat voi publica o imagine de ansamblu în sursă într-un alt hub și stau pe Github.
De asemenea, în planurile de portare în Firefox și IE.

P.S\u003e Posibilitatea de a descărca videoclipul este, de asemenea, acolo, dar în momentul oprit (există probleme mici cu streaming video).

Limba HTML.
Introducerea sunetului și a videoclipului


Inserție de sunet. Etichetă
Adaugă, reproduce și controlează înregistrările audio pe o pagină web. Calea către fișier este setată prin atributul sRC. sau eticheta imbricată .


Sintaxă:


niste

Tag-ul atributelor

    redare automata - sunetul începe să redea imediat după încărcarea paginii;

    controlează. - adaugă panoul de control în fișierul audio;

    buclă. - repetă reproducerea sunetului de la început după finalizarea acestuia;

    preîncărcați. - folosit pentru a descărca fișierul împreună cu descărcarea paginii web;

    sRC.

Eticheta de închidere este curativă.
În interiorul containerului

Exemplu:


Introduceți videoclipul. Etichetă
Adaugă, reproduce și controlează setările video pe o pagină web. Calea către fișier este setată prin atributul sRC. sau eticheta imbricată .


Sintaxă:


niste Elementele pot fi asociate cu diverse fișiere. Browserul va utiliza primul format lansat.

Tag-ul atributelor

    redare automata - Video începe să redea automat după încărcarea paginii;

    controlează. - adaugă panoul de control la film;

    buclă. - repetă redarea video de la început după finalizarea sa;

    Înălţime - Specifică înălțimea zonei pentru a reda videoclipul;

    lăţime. - Specifică lățimea zonei pentru a reda videoclipul;

    preîncărcați. - folosit pentru a descărca videoclipul împreună cu descărcarea paginii web;

    sRC. - Specifică calea către fișierul redat.

Eticheta de închidere este curativă.
În interiorul containerului


Exemplu:


Rezultatul exemplului în browser:

Muzica de pe site este destul de rară decât norma. Prin introducerea muzicii pe site, trebuie să înțelegeți că unii utilizatori pot și să se împingă deloc. În acest articol, vom analiza mai multe opțiuni introducând muzică pe site, precum și luați în considerare modul de a face muzica de fundal.

Cum se introduce muzica de fundal pe site

Introducerea muzicii de fundal pe site este cea mai periculoasă opțiune în ceea ce privește pierderea vizitatorilor. Deoarece muzica de fundal nu este suficientă că este imposibil să se oprească, deci nu este de asemenea reglabilă la volum (totul depinde de volumul curent de pe computer). Deci, trebuie să vă gândiți de o sută de ori înainte de a introduce muzica de fundal.

Există două modalități de a introduce muzică în HTML

Opțiunea 1. Prin eticheta HTML

Sintaxă pentru introducerea muzicii de fundal

Taga. Există mai multe atribute:

  • loop \u003d "valoare" - numărul de repetări muzicale (dacă -1, apoi repetat infinit)
  • sold \u003d "valoare" - sold stereo (de la -5000 la 10.000)
  • volum \u003d "Valoare" - Volum (maxim, -10000 minim)

Muzica va reda automat la descărcarea paginii.

de exemplu

Opțiunea 2. Prin etichetă

Sintaxă pentru introducerea unui obiect cu muzică

Taga. Este posibil să utilizați următoarele atribute:

  • lățime \u003d "valoare" - lățime (în pixeli sau la procente)
  • Înălțime \u003d "valoare" - înălțime (în pixeli sau procentaj)
  • align \u003d "valoare" - aliniere (stânga - stânga, dreapta - dreapta, centru centru)
  • ascunse \u003d "valoare" - vizibilitatea panoului (Ascunderea TRUE, FALSE - Afișați), panoul implicit este vizibil
  • autostart \u003d "valoare" - redați muzică la încărcare (TRUE - Da, False - Nu)
  • loop \u003d "Valoare" - Valoare TRUE - Joacă într-un cerc, fals - o dată

de exemplu

Fiecare browser va arăta ca un jucător obișnuit în moduri diferite, așa că nu vom considera fiecare dintre ele separat.

În HTML5 puteți utiliza eticheta

Înțeles etichetă

Eticheta de sintaxă

Următoarele atribute pot fi utilizate:

  • autoPlay \u003d "Valoare" - Activați muzica imediat când descărcați o pagină
  • controale \u003d "Valoare" - Afișați panoul de control al playerului din browser
  • loop \u003d "Semnificație" - Responsabil pentru ciclică
  • preload \u003d "Valoare" - Descărcați imediat muzică cu descărcare pagină

Opțiunile considerate din opinia mea nu sunt soluții ideale, deoarece toți se bazează pe jucători obișnuiți. Fiecare browser va avea propriul player implicit, iar în unele nu pot lucra deloc. Prin urmare, este mai bine să descărcați playerul pe site-ul dvs. și să descărcați muzică din acesta. Acest player va avea o funcție de oprire, setări de volum etc. - Toate setările necesare pentru un utilizator simplu.

Această întrebare se găsește foarte des, așa că am decis să dedic un articol separat în lecțiile din lecții. Deoarece pentru a juca tehnologia audio universală pentru toate browserele, HTML nu are, apoi pentru a rezolva această problemă, voi propune să descarce fișierul playerului audio, așa cum se face pe majoritatea site-urilor. Facem totul în pași:

1. La găzduire, unde site-ul dvs. este localizat în directorul rădăcină (dosarul unde fișierul index), potriviți folderul audio. În viitor, veți plasa toate fișierele audio.

3. Acum selectați fișierele dorite, mai bine în format MP3. Creeaza dosar audio. La rădăcina site-ului și descărcați-le.

4. Rămâne numai pentru a introduce codul conexiunii Player. Acesta se va potrivi oricărui site în locul potrivit. Trebuie doar să specificați calea către fișierul player și, respectiv, la fișierul audio, înlocuind cuvintele your_domen. și name_audio_file.:






Și totul este gata! Puteți vedea și lucra. exemplu.

Cum se instalează muzica de fundal în HTML

Folosesc capabilitățile HTML și browser-ul, puteți introduce și muzica de fundal la pagină. Veți avea nevoie de un fișier audio al formatului dorit: WAV, Au, MIDI sau MP3. Puteți utiliza orice fișier cu extensia specificată ca exemplu.

Prima metodă - Aceasta este eticheta încorporată. Elementul încorporat este utilizat pentru a descărca și a afișa obiecte (de exemplu, fișiere video, rolele flash, unele fișiere de sunet etc.) că browserul nu înțelege.

Sintaxa este destul de simplă:

Eticheta de închidere nu este necesară.

Acum vedem un exemplu de scriere cu atribute și mai jos cu decodarea lor:

Atribute etichetă încorporată pentru a reda audio în HTML
Lățimea lățimii panoului în pixeli (sau procentaj)
Înălțime - Înălțimea panoului în pixeli (sau procente)
Aliniați - locația panoului în raport cu textul, stânga, dreapta, centru
Ascuns - vă permite să ascundeți panoul, valorile atributului: Panoul adevărat este ascuns, False - Panou vizibil (valoarea implicită)
AutoStart - TRUE - Playerul pornește automat când pagina este încărcată, False așteaptă butonul de redare
Loop - ciclu, redarea adevărată - piesă într-un cerc și cu o valoare falsă - o singură dată

Al doilea mod. Foarte vechi, dar și practic) Adăugați o melodie în același dosar (director), unde fișierul dvs. este minciună și în organism, veți scrie următorul cod:


Ca rezultat, după încărcarea paginii va suna melodia specificată în eticheta Bgsound. Acum luați în considerare eticheta mai bună a atributelor :

sRC. - calea către fișierul dvs. audio
buclă. - de câte ori pot repeta melodia (dacă -1, apoi repetată infinit)
echilibru - valoarea soldului stereo (de la -5000 la 10.000)
vOLUM. - Melodia volumului luminozității, unde numărul maxim și -10000 minim.

Cu toate acestea, nu va fi posibil să controlați cumva jucătorului - de fiecare dată când pagina este actualizată, piesa va fi redată din nou.

După ce ați descoperit metoda de introducere a muzicii de fundal, vreau să vă descurajeze de la aceasta, deoarece majoritatea utilizatorilor la momentul vizitei a diferitelor site-uri ascultă deja muzică. Prin urmare, acompaniamentul muzical de trecere poate face ca acesta să fie aproape să închidă fila cu site-ul.

Inserați audio și muzică în HTML5 - Tag Audio


audio. - o etichetă pereche care definește sunetul de fundal, muzică sau alt flux audio de pe site.

Atribute eticheta audio.

redare automata- Fișierul este redat imediat când se încarcă pagina (similar cu muzica de fundal Bgsound)
controlează. - Afișați panoul de control al playerului din browser
buclă. - pierde fișierul re-după sfârșit
preîncărcați. - Descărcați fișierul audio va apărea cu pagina de descărcare
sRC. - calea către fișierul audio (MP3 sau OGG)

Codul eșantionului etichetat cu Audio





Etichetă audio.


Audio în HTML 5