Ինչպես տեղադրել աուդիո հետքերը html-ում: Պահպանեք աուդիո ինտերնետից ֆայլերում: Ենթագրերի և վերնագրերի ավելացում

Այս հարցը շատ տարածված է, ուստի ես որոշեցի դասերին առանձին հոդված նվիրել դրան: Քանի որ HTML-ը չունի բոլոր բրաուզերների համար աուդիո նվագարկելու ունիվերսալ տեխնոլոգիա, այս խնդիրը լուծելու համար առաջարկում եմ ներբեռնել աուդիո նվագարկչի ֆայլը, ինչպես դա արվում է շատ կայքերում: Մենք ամեն ինչ անում ենք քայլ առ քայլ.

1. Հոսթինգում, որտեղ գտնվում է ձեր կայքը, արմատային գրացուցակում (թղթապանակը, որտեղ գտնվում է ինդեքսային ֆայլը), ստեղծեք աուդիո թղթապանակը: Ապագայում դուք կտեղադրեք բոլոր աուդիո ֆայլերը դրա մեջ:

3. Այժմ ընտրեք անհրաժեշտ ֆայլեր, ցանկալի է mp3 ֆորմատով։ Ստեղծեք թղթապանակ աուդիոկայքի արմատում և ներբեռնեք դրանք:

4. Մնում է միայն նվագարկիչի միացման կոդը տեղադրել: Այն հարմար է ցանկացած կայքի համար Ճիշտ տեղում, միայն անհրաժեշտ է նշել նվագարկչի ֆայլի և աուդիո ֆայլի ուղին, համապատասխանաբար փոխարինելով բառերը your_domainԵվ audio_filename:

Եվ ամեն ինչ պատրաստ է: Դուք կարող եք տեսնել աշխատանքը օրինակ.

ինչպես տեղադրել ֆոնային երաժշտություն html-ում

ես օգտագործում եմ HTML հնարավորություններև բրաուզերը, կարող եք նաև ֆոնային երաժշտություն տեղադրել էջում: Ձեզ անհրաժեշտ կլինի պահանջվող ձևաչափի աուդիո ֆայլ՝ WAV, AU, MIDI կամ MP3: Որպես օրինակ կարող եք օգտագործել նշված ընդլայնմամբ ցանկացած ֆայլ:

Առաջին ճանապարհըներկառուցված պիտակն է: Ներկառուցված տարրը օգտագործվում է բեռնելու և ցուցադրելու առարկաներ (օրինակ՝ վիդեո ֆայլեր, ֆլեշ ֆիլմեր, որոշ աուդիո ֆայլեր և այլն), որոնք զննարկիչն ի սկզբանե չի հասկանում:

Շարահյուսությունը բավականին պարզ է.

Փակման պիտակը պարտադիր չէ:

Այժմ մենք նայում ենք ատրիբուտներով գրառումների օրինակին, իսկ ստորև՝ դրանց վերծանմամբ.

Տեղադրել պիտակի ատրիբուտներ html-ում աուդիո նվագարկելու համար
լայնություն - վահանակի լայնությունը պիքսելներով (կամ տոկոսով)
բարձրություն - վահանակի բարձրությունը պիքսելներով (կամ տոկոսով)
հավասարեցում - վահանակի դիրքը տեքստի նկատմամբ, հնարավոր արժեքները ձախ, աջ, կենտրոն են
թաքնված - թույլ է տալիս թաքցնել վահանակը, հատկանիշի արժեքները. true - վահանակը թաքնված է, false - վահանակը տեսանելի է (կանխադրված արժեք)
autostart - ճշմարիտ - նվագարկիչը ինքնաբերաբար մեկնարկում է, երբ էջը բեռնվում է, false - սպասում է նվագարկման կոճակի սեղմմանը
հանգույց - հանգույց, ճշմարիտ - երգը նվագարկվում է շրջանագծի մեջ, իսկ եթե կեղծ է, միայն մեկ անգամ

Երկրորդ ճանապարհը.Շատ հին, բայց նաև գործնական) Ավելացրեք մեղեդին նույն թղթապանակում (տեղեկատու), որտեղ գտնվում է ձեր ֆայլը, և գրեք հետևյալ կոդը մարմնի մեջ.

Արդյունքում էջը բեռնելուց հետո կհնչի bgsound թեգում նշածդ մեղեդին։ Այժմ եկեք ավելի սերտ նայենք պիտակի հատկանիշներին :

src- ձեր աուդիո ֆայլի ուղին
հանգույց- քանի անգամ կրկնել մեղեդին (եթե -1, ապա կրկնվում է անվերջ)
հավասարակշռություն- ստերեո մնացորդի արժեքը (-10000-ից մինչև 10000)
ծավալը- մեղեդու ծավալը, որտեղ 0-ը առավելագույնն է, իսկ -10000-ը նվազագույնն է:

Այնուամենայնիվ, նվագարկիչը որևէ կերպ կառավարելու միջոց չի լինի. ամեն անգամ, երբ էջը թարմացվում է, թրեքը նորից կհնչի:

Ֆոնային երաժշտություն տեղադրելու մեթոդը նկարագրելուց հետո ես ուզում եմ ձեզ հետ պահել դրանից, քանի որ օգտվողների մեծ մասը, որպես կանոն, արդեն երաժշտություն է լսում տարբեր կայքեր այցելելու պահին: Հետևաբար, ուղեկցող երաժշտական ​​նվագակցությունը կարող է միայն ստիպել նրան փակել կայքի ներդիրը:

Աուդիո և երաժշտության ներկառուցում HTML5 - աուդիո պիտակ

աուդիո- զույգ պիտակ, որը սահմանում է ֆոնային ձայնը, երաժշտությունը կամ այլ աուդիո հոսքը կայքում:

Աուդիո պիտակի հատկանիշներ

Ավտոմատ միացում- ֆայլը նվագարկվում է անմիջապես էջի բեռնման ժամանակ (նման է bgsound ֆոնային երաժշտությանը)
վերահսկում է- ցուցադրեք նվագարկչի կառավարման վահանակը բրաուզերում
հանգույց- ֆայլն ավարտվելուց հետո կրկին նվագարկում է
նախաբեռնում- աուդիո ֆայլը կբեռնվի էջի բեռնման հետ մեկտեղ
src- աուդիո ֆայլի ուղի (mp3 կամ ogg)

Նմուշ կոդ աուդիո պիտակով

Աուդիո HTML 5-ում

Նկարագրություն

Ավելացնում, նվագարկում և կառավարում է աուդիո ձայնագրման կարգավորումները վեբ էջում: Ֆայլի ուղին սահմանվում է src հատկանիշի կամ nested tag-ի միջոցով: Տարայի ներսում

Բրաուզերների կողմից աջակցվող կոդեկների ցանկը սահմանափակ է և ներկայացված է Աղյուսակում: 1.

Ներդիր 1. Կոդեկներ և բրաուզերներ

կոդեկ	Internet Explorer	Chrome	Օպերա	սաֆարի	Firefox
ogg/vorbis
wav
mp3
ՇՊԱԿ

Նշված բրաուզերներում ունիվերսալ նվագարկման համար աուդիոն կոդավորվում է տարբեր կոդեկների միջոցով և ֆայլերը միաժամանակ ավելացվում են պիտակի միջոցով: .

Շարահյուսություն

Հատկանիշներ

Ձայնը սկսում է նվագել էջը բեռնվելուն պես: Աուդիո ֆայլին ավելացնում է կառավարման վահանակ: Կրկնում է ձայնը սկզբից այն ավարտվելուց հետո: Օգտագործվում է վեբ էջի բեռնման հետ մեկտեղ ֆայլ ներբեռնելու համար: Նշում է նվագարկվող ֆայլի ուղին:

Փակման պիտակ

Պահանջվում է.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Ալեքսանդր Կլիմենկով - Տասնչորս

Օրինակ արդյունքը Opera բրաուզերցույց է տրված նկ. 1.

Բրինձ. 1. Աուդիո ֆայլի նվագարկումը

Բրաուզերներ

Աուդիո նվագարկման կառավարումը բրաուզերների միջև տարբերվում է արտաքին տեսքով, սակայն հիմնական տարրերը նույնն են: Սրանք են նվագարկում/դադար կոճակը, ուղու երկարությունը, անցած և ընդհանուր նվագարկման ժամանակը, ինչպես նաև ձայնի մակարդակը:

HTML լեզու
Տեղադրել աուդիո և վիդեո

Տեղադրեք ձայնը: Նշել
Ավելացնում, նվագարկում և կառավարում է աուդիո ձայնագրման կարգավորումները վեբ էջում: Ֆայլի ուղին սահմանվում է հատկանիշի միջոցով srcկամ nested tag .

Շարահյուսություն:

Մի քանի

Պիտակի ատրիբուտներ

Ավտոմատ միացում- ձայնը սկսում է նվագել էջի բեռնումից անմիջապես հետո.

վերահսկում է- աուդիո ֆայլին ավելացնում է կառավարման վահանակ;

հանգույց- կրկնում է ձայնի նվագարկումը սկզբից դրա ավարտից հետո.

նախաբեռնում- օգտագործվում է վեբ էջ ներբեռնելու հետ մեկտեղ ֆայլ ներբեռնելու համար;

src

Փակման պիտակը պարտադիր է:
Տարայի ներսում

Օրինակ:

Տեղադրեք տեսանյութ: Նշել
Ավելացնում, նվագարկում և կառավարում է տեսանյութի կարգավորումները վեբ էջում: Ֆայլի ուղին սահմանվում է հատկանիշի միջոցով srcկամ nested tag .

Շարահյուսություն:

Մի քանի տարրերը կարող են կապված լինել տարբեր ֆայլեր. Բրաուզերը կօգտագործի իր գործարկած առաջին ձևաչափը:

Պիտակի ատրիբուտներ

Ավտոմատ միացում- էջը բեռնվելուց հետո տեսանյութը սկսում է ինքնաբերաբար նվագարկել.

վերահսկում է- տեսանյութին ավելացնում է կառավարման վահանակ;

հանգույց- կրկնում է վիդեո նվագարկումը սկզբից դրա ավարտից հետո.

բարձրությունը- սահմանում է տեսանյութի նվագարկման տարածքի բարձրությունը.

լայնությունը- սահմանում է տարածքի լայնությունը տեսանյութերի նվագարկման համար.

նախաբեռնում- օգտագործվում է վեբ էջ ներբեռնելու հետ մեկտեղ տեսանյութեր ներբեռնելու համար;

src- նշում է նվագարկվող ֆայլի ուղին:

Փակման պիտակը պարտադիր է:
Տարայի ներսում

Օրինակ:

Օրինակ արդյունք բրաուզերում.

Բարև սիրելի բլոգի ընթերցողներ: Զարմանալի չէ, որ վերջին տարիներին մեդիա կայքերն ավելի ու ավելի տարածված են դարձել: Նման կայքերում շատ հետաքրքիր է գտնել, օրինակ, կարող եք դիտել ինչ-որ տեսահոլովակ կամ լսել հիանալի երաժշտություն: Բայց այս անգամ մենք ձեզ հետ երաժշտություն կլսենք, մասնավորապես՝ կսովորենք, թե ինչպես կարելի է աուդիո ֆայլեր տեղադրել մեր կայքում՝ օգտագործելով HTML5:

Ինչպես պարզվում է, HTML5-ն աջակցում է աուդիո պիտակներին, ինչը շատ հեշտ է դարձնում երաժշտության տեղադրումը կայքում: Ճիշտ է, ոչ բոլոր հին բրաուզերներն են նվագարկում աուդիո ֆայլը, բայց բոլոր ժամանակակից բրաուզերները դա անում են աղմուկով:

Դեմո

Բրաուզերի աջակցություն

Բոլոր բրաուզերները, որոնք աջակցում են պիտակին

Օրինակ՝ IE9+-ն աջակցում է միայն mp3 ֆայլեր, այլ ոչ wav և ogg:

Chrome-ը 6-րդ տարբերակից հետո աջակցում է գրեթե բոլոր ձևաչափերը:

Opera 10+-ը չի աջակցում mp3, անկեղծ ասած, ինձ թվում է, որ դա նրա շատ մեծ թերությունն է. հանրաճանաչ ձևաչափև չի աջակցում: Բայց wav-ի և ogg-ի դեպքում դա լավ է ստացվում:

ՀԵՏ Firefox բրաուզերնույն պատմությունը, ինչ Օպերայի հետ: Դրա համար նա հսկայական և գեր մինուս է:

Safari-ն աջակցում է բոլոր աուդիո ձևաչափերին, բացառությամբ ogg-ի:

Կայքում աուդիո ֆայլի ավելացում

Ձեր կայքում աուդիո ֆայլ ավելացնելու համար անհրաժեշտ է պիտակների միջև տրամադրել ուղղակի հղում դեպի ֆայլ: Հղումը նշվում է պիտակի միջոցով . Ահա թե ինչ տեսք կունենա պատրաստի կոդը.

Ձեր դիտարկիչը չի աջակցում աուդիո

Ինչպես տեսնում եք, այստեղ միանգամից 3 ֆայլ է ավելացվել, այնպես որ, եթե որոշ բրաուզեր չի աջակցում mp3, այն ավտոմատ կերպով կխաղարկի այն ձևաչափը, որն աջակցում է և այլն:

Իսկ եթե բրաուզերն ընդհանրապես չի աջակցում պիտակին

Ընկերներ, ահա մեր աշխատանքի օրինակը։ Պարզ խաղացող բրաուզերը փոխարինում է իրեն:

Դեմո

Վերջ, սիրելի ընկերներ։ Եթե ​​ունեք հարցեր կամ դժվարություններ, հարցրեք մեկնաբանություններում։ Կհանդիպենք շուտով:

Ինչու՞ է ձեզ անհրաժեշտ կայքում երաժշտություն:

Բավական հետաքրքրություն Հարցրեք, կայքում երաժշտություն կամ ձայնային ֆայլեր նվագարկելը կամ ներկառուցված նվագարկիչը օգնում է կայքի այցելուներին հանգստանալ, դրական հույզեր առաջացնել և դրանք ճիշտ ձևակերպել, այսպես ասած, հեշտացնում է կայքի հետ փոխգործակցությունը: Բայց այս էֆեկտները գործում են միայն այն դեպքում, եթե կայքում երաժշտությունը ճիշտ է ընտրված, և ձայնի ծավալը չի ​​գերազանցում թույլատրելի սահմանները, հակառակ դեպքում ձեր բոլոր ջանքերն ապարդյուն կլինեն և բացասական հույզեր կառաջացնեն կայքի այցելուների շրջանում:

Ինչպե՞ս տեղադրել աուդիո (երաժշտություն) կայքում html-ով:

Մեզ հաճախ են տալիս այս հարցը, կայքի երաժշտությունը ակտուալ և կրեատիվ տարր է, և այն նվագելու բազմաթիվ եղանակներ կան, և դրանք իրականացնելն այնքան էլ դժվար չէ։ Սկսենք նրանից, որ յուրաքանչյուր օգտվող գլոբալ ցանցԻնտերնետ մուտք գործելու համար օգտագործում է ցանկացած զննարկիչ, բայց չկա ձայնային և երաժշտական ​​ֆայլեր նվագարկելու ընդհանուր և ունիվերսալ տեխնոլոգիա, յուրաքանչյուր զննարկիչ աշխատում է իր ալգորիթմների համաձայն և դրանք որոշակիորեն տարբերվում են միմյանցից, հետևաբար, երաժշտություն նվագարկելիս՝ օգտագործելով HTML-ում ներկառուցումը: էջի կոդը, կարող են խնդիրներ առաջանալ: Բայց ինչպես գիտեք, բոլոր խնդիրները լուծելի են:

Ներդրեք երաժշտությունը վեբ կայքի HTML, JavaScript, jQuery, AJAX ուղիներ:

1 ճանապարհ.

Կայքում կամ նվագարկիչում աուդիո երաժշտական ​​նվագարկչի ստեղծում

Տեխնոլոգիան պարզ է, նվագարկիչի ֆայլը ստեղծվում է այնպես, որ այն չի բեռնում կայքը կամ սերվերը, ընտրեք այն տեխնոլոգիան, որը մենք կօգտագործենք. JavaScript, jQuery, AJAX. Ընտրված տեխնոլոգիայի հիման վրա մենք մշակում ենք սցենար մեր կայքի համար և տեղադրում այն ​​կայք: Սցենարը ստեղծվում է կախված նրանից, թե ինչ է ձեզ անհրաժեշտ՝ ֆոնային երաժշտության ավտոմատ նվագարկումը կայքում կամ նվագարկիչ, որը վերահսկվում է այցելուի կողմից: Այնուհետև ստեղծեք թղթապանակ կայքի արմատում երաժշտության համար և վերբեռնեք դրա վրա աուդիո ֆայլեր:

Կամ, որպես այլընտրանքային միջոց, կարող եք ստեղծել նվագարկիչ՝ օգտագործելով ֆլեշ տեխնոլոգիա (Flash), նման նվագարկիչը ավելի տպավորիչ տեսք կունենա: Ճշմարտությունը ավելի թանկ և դժվար կլինի կայքի համար (դա կավելացնի կայքի էջերի բեռնման ժամանակը):

2 ճանապարհ.

Երաժշտության տեղադրում կայքում՝ օգտագործելով HTML

Օգտագործելով HTML-ի և բրաուզերի հնարավորությունները՝ կարող եք կայքում տեղադրել նվագարկիչ կամ ֆոնային երաժշտություն: Տեխնոլոգիան նույնքան պարզ է՝ HTML5 կոդ է ստեղծվում «audio» պիտակով և այս կոդը գրվում է կայքում, և երբ օգտատերը մտնում է կայք, տեսնում է նվազագույնի հասցված նվագարկիչ, այցելուն սեղմում է նվագարկման կոճակը կամ ֆոնային երաժշտությունը։ ավտոմատ կերպով սկսում է խաղալ: Նվագարկչի տեսքը կախված կլինի զննարկիչից, որտեղից մուտք է գործել այցելուն, սակայն ֆունկցիոնալությունը կմնա ստանդարտ՝ Play, Stop, Next, Prev, Volume կոճակները: HTML կոդով նվագարկիչը այսպիսի տեսք ունի.

Ներկառուցման կոդը այսպիսի տեսք ունի.

Ինչպես նկատեցիք, «վերահսկում է ավտոմատ նվագարկումը» հրամանը հնարավորություն է տալիս երաժշտության ավտոմատ նվագարկումը հենց որ այցելուը մտնում է կայք:

HTML կոդի այլընտրանքային տարբերակն է «bgsound» թեգը, սա ընդհանրապես չի օգտագործում վիզուալ նվագարկիչը, երբ այցելեք կայք, կայքի երաժշտությունը կսկսի նվագել, բայց կկարգավորի ձայնը, դադարը և այլն։ օգտվողը չի կարող: Աուդիո ֆայլի նվագարկման ծավալի կարգավորումը կազմաձևված է հենց կոդի մեջ:

Կայքում երաժշտություն նվագարկելու համար ձայնային ֆայլերի ձևաչափերը կարող են լինել՝ WAV, AU, MIDI, MP3, OGG (ընդլայնումներ): Երաժշտական ​​ֆայլերը վերբեռնվում են կայք, կամ հղումներն օգտագործվում են դեպի այն կայքերը, որտեղ ձայնային ֆայլ, գլխավորն այն է, որ այն գտնվում է հանրային տիրույթում։