Ինչու՞ է պետք երաժշտությունը կայքում:

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

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

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

Ձեր կայքում տեղադրեք երաժշտություն HTML, JavaScript, jQuery, AJAX եղանակներով.

1 ճանապարհ.

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

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

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

Մեթոդ 2.

HTML- ի միջոցով կայքում երաժշտության տեղադրում

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

Փաստացի ներկառուցված ծածկագիրն այսպիսին է.

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

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

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

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

Այնպես պատահեց, որ իմ ընկերներից շատերը հենց այդպիսի օգտվողներ են: Նրանց համար էր, որ որոշվեց գրել այս ընդլայնումը Chrome (և նրա նմանները):

Ինչ կարող է

• Բեռնել ցանկացած աուդիո ֆայլ ցանկացած կայքից(mp3, wav)
• Identիշտ է նույնացնում սկզբնական անունը
• Shույց է տալիս տևողությունը, չափը և բիթային արագությունը
• Ներբեռնեք երգի հետ նույն էջում (առանց վերահղման)
• Ֆայլի նախադիտում

Փորձեք ընդլայնում Chrome խանութից

Որոշ նկարներ և տեսանյութեր.

Ուրախ կլինեի առողջ քննադատության արժանանալ: Հուսով եմ, որ ինչ -որ մեկը օգտակար կգտնի այս ընդլայնումը:
Եթե ​​ձեզ հետաքրքրում է, ապա մոտ ապագայում ես այլ հանգույցում կհրապարակեմ աղբյուրի կոդի ակնարկ և կտեղադրեմ github- ում:
Նաև նախատեսում է տեղափոխել Firefox և IE:

P.S> Տեսանյութ ներբեռնելու ունակությունը նույնպես կա, բայց ներսում այս պահինհաշմանդամ (տեսանյութի հոսքի հետ կապված փոքր խնդիրներ կան):

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

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

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

Մի քանի

Պիտակի հատկանիշներ

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

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

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

նախաբեռնել- օգտագործվում է ֆայլ ներբեռնելու համար, ինչպես նաև վեբ էջ բեռնելիս.

src

Վերջի պիտակը պարտադիր է:
Կոնտեյների ներսում

Օրինակ:

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

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

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

Պիտակի հատկանիշներ

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

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

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

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

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

նախաբեռնել- օգտագործվում է վիդեո էջը բեռնելուն զուգահեռ տեսանյութեր ներբեռնելու համար.

src- ցույց է տալիս նվագարկվող ֆայլի ուղին:

Վերջի պիտակը պարտադիր է:
Կոնտեյների ներսում

Օրինակ:

Բրաուզերում արդյունքի օրինակ.

Կայքում տեղ գտած երաժշտությունն ավելի հազվադեպ է, քան նորմ: Կայքում երաժշտություն տեղադրելիս պետք է հասկանալ, որ այն կարող է նույնիսկ օտարել որոշ օգտվողների: Այս հոդվածում մենք կդիտարկենք կայքում երաժշտություն տեղադրելու մի քանի տարբերակ, ինչպես նաև կանդրադառնանք, թե ինչպես կատարել ֆոնային երաժշտություն:

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

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

HTML- ում երաժշտություն տեղադրելու երկու եղանակ կա

Տարբերակ 1. html պիտակի միջոցով

Շարահյուսություն ֆոնային երաժշտություն տեղադրելու համար

Պիտակ կան մի քանի հատկանիշներ.

• հանգույց = "արժեք" - երաժշտության կրկնությունների քանակը (եթե -1, ապա այն կրկնում է անորոշ ժամանակով)
• մնացորդ = "արժեք" - ստերեո հաշվեկշիռ (-10000 -ից 10000)
• ծավալը = "արժեքը" - ծավալը (0 առավելագույնը, -10000 նվազագույնը)

Երաժշտությունը ինքնաբերաբար կհնչի, երբ էջը բեռնվի:

Օրինակ

Տարբերակ 2. Պիտակի միջոցով

Շարահյուսություն ՝ առարկան երաժշտությամբ տեղադրելու համար

Պիտակ կարող են օգտագործվել հետևյալ հատկանիշները.

• լայնություն = "արժեք" - լայնություն (պիքսելներով կամ տոկոսներով)
• բարձրություն = "արժեք" - բարձրություն (պիքսելներով կամ տոկոսներով)
• հավասարեցում = "արժեք" - հավասարեցում (ձախ - ձախ, աջ - աջ, կենտրոնակենտրոն)
• թաքնված = "արժեք" - վահանակի տեսանելիություն (ճշմարիտ - թաքցնել, կեղծ - ​​ցույց տալ), լռելյայն վահանակը տեսանելի է
• autostart = "արժեք" - նվագարկել երաժշտություն ներբեռնման ժամանակ (ճշմարիտ - այո, կեղծ - ​​ոչ)
• հանգույց = "արժեք" - արժեք ճշմարիտ - խաղալ հանգույցով, կեղծ - ​​մեկ անգամ

Օրինակ

Յուրաքանչյուր զննարկչի համար ստանդարտ նվագարկիչը տարբեր տեսք կունենա, այնպես որ մենք նրանցից յուրաքանչյուրը առանձին չենք դիտարկի:

Html5- ում պիտակը կարող է օգտագործվել

Պիտակի օգտագործման իմաստը

Շարահյուսական պիտակ

Հետևյալ հատկանիշները կարող են օգտագործվել.

• autoplay = "արժեք" - երաժշտություն նվագել էջի բեռնման ժամանակ
• Controls = "value" - ցուցադրեք նվագարկիչի կառավարման վահանակը դիտարկիչում
• loop = "արժեքը" - պատասխանատու է looping- ի համար
• նախաբեռնում = "արժեք" - անմիջապես բեռնել երաժշտությունը էջի բեռնումով

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

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

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

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

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

Եվ դուք ավարտեցիք: Կարող եք տեսնել նաև աշխատանքը օրինակ.

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

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

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

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

Փակման նշան չի պահանջվում:

Այժմ եկեք նայենք հատկանիշներով ձայնագրության օրինակին, իսկ ստորև ՝ դրանց վերծանմանը.

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

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

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

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

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

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

Տեղադրեք աուդիո և երաժշտություն HTML5- ում `աուդիո պիտակ

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

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

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

Աուդիո պիտակով կոդի նմուշ

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