Kāpēc vietnē ir nepieciešama mūzika?

Diezgan interesants jautājums, mūzikas vai balss failu atskaņošana vietnē vai iebūvētais atskaņotājs palīdz vietnes apmeklētājiem atpūsties, izraisa pozitīvas emocijas un melodijas pareizajā veidā, tā sakot, atvieglo mijiedarbību ar vietni. Bet šie efekti darbojas tikai tad, ja vietnē ir pareizi izvēlēta mūzika un skaņas skaļums nepārsniedz pieļaujamās robežas, pretējā gadījumā visas jūsu pūles būs veltīgas un izraisīs negatīvas emocijas vietnes apmeklētāju vidū.

Kā ievietot audio (mūziku) vietnē html?

Mums bieži tiek uzdots šis jautājums, vietnē esošā mūzika ir atbilstošs un radošs elements, un ir daudz veidu, kā to reproducēt, un tos nav tik grūti īstenot. Vispirms katrs lietotājs Globālais tīkls izmanto jebkuru pārlūkprogrammu, lai piekļūtu internetam, taču nav vispārējas un universālas skaņas un mūzikas failu atskaņošanas tehnoloģijas, katra pārlūkprogramma darbojas pēc saviem algoritmiem un tie nedaudz atšķiras viens no otra, tāpēc, atskaņojot mūziku, iegulstot lapas HTML kods, var rasties problēmas ... Bet, kā jūs zināt, visas problēmas var atrisināt!

Iegult mūziku savā vietnē HTML, JavaScript, jQuery, AJAX veidos:

1 veids.

Audio atskaņotāja izveide vietnes mūzikai vai atskaņotājam

Tehnoloģija ir vienkārša, atskaņotāja fails tiek izveidots tā, lai tas neielādētu vietni vai serveri, mēs izvēlamies tehnoloģiju, kuru izmantosim: JavaScript, jQuery, AJAX... Pamatojoties uz izvēlēto tehnoloģiju, mēs izstrādājam savas vietnes skriptu un ievietojam to vietnē. Skripts tiek veidots atkarībā no tā, kas jums nepieciešams: automātiska fona mūzikas atskaņošana vietnē vai atskaņotājs, ko kontrolē apmeklētājs. Pēc tam vietnes saknē izveidojiet mapi mūzikai un ielādējiet tajā audio failus.

Vai arī kā alternatīvu sopsob varat izveidot atskaņotāju, izmantojot zibspuldzes tehnoloģiju (Flash), šāds atskaņotājs izskatīsies iespaidīgāk. Patiesība vietnei būs dārgāka un grūtāka (tas palielinās vietnes lapu ielādes laiku).

2. metode.

Mūzikas instalēšana vietnē, izmantojot HTML

Izmantojot HTML un pārlūkprogrammas iespējas, vietnē varat ievietot atskaņotāju vai fona mūziku. Tehnoloģija ir tikpat vienkārša: HTML5 kods tiek ģenerēts ar tagu "audio", un šis kods tiek ierakstīts vietnē, un, kad lietotājs apmeklē vietni, viņš redz minimizēto atskaņotāju, apmeklētājs noklikšķina uz atskaņošanas pogas vai automātiski sāk atskaņot fonu. mūzika. Spēlētāja veids būs atkarīgs no pārlūkprogrammas, no kuras apmeklētājs ienāca, taču funkcionalitāte paliks standarta: pogas Atskaņot, Apturēt, Tālāk, Iepriekšējais, Skaļums. Atskaņotājs ar HTML kodu izskatās šādi:

Faktiskais iegulšanas kods izskatās šādi:

Kā jūs, iespējams, pamanījāt, komanda "kontrolē automātisko atskaņošanu" ļauj automātiski atskaņot mūziku, tiklīdz apmeklētājs ienāk vietnē.

Alternatīva HTML koda versija ir tags "bgsound", tas vispār nav paredzēts, lai izmantotu vizuālo atskaņotāju, kad jūs apmeklējat vietni, tiks sākta mūzikas atskaņošana vietnē, bet gan jāpielāgo skaļums, pauze utt. lietotājs nevarēs. Audio faila atskaņošanas skaļuma iestatīšana ir konfigurēta pašā kodā.

Formāti skaņas failus mūzikas atskaņošanai vietnē var būt: WAV, AU, MIDI, MP3, OGG (paplašinājumi). Vietnē tiek augšupielādēti mūzikas faili vai tiek izmantotas saites uz tām vietnēm, kurās atrodas skaņas fails, galvenais, lai tas būtu publiski pieejams.

Cik bieži jums bija jāmeklē iecienītākā mūzika internetā? Tieši to, ko dzirdējāt savā iecienītākajā vietnē ( sociālie mēdiji, mūzikas portāli). Bieži gadās, ka viņa vienkārši nepastāv nekur citur.
Apgrūtinoši "meklētāji" teiks, ka tas tā nav. Bet ņemsim vērā parasto lietotāju, kura zināšanas par tehnoloģijām neļauj operēt ar "rakšanu" lapas vai kešatmiņas avota kodā.

Tā notika, ka lielākā daļa manu draugu ir tieši tādi lietotāji. Tieši viņiem tika nolemts rakstīt šo paplašinājumu Chrome (un citi viņam līdzīgi).

Kas var

• Lejupielādēt jebkuru audio failu no jebkuras vietnes(mp3, wav)
• Pareizi identificē sākotnējo nosaukumu
• Parāda ilgumu, lielumu un bitu pārraides ātrumu
• Lejupielādēt tajā pašā lapā kā ieraksts (bez novirzīšanas)
• Faila priekšskatīšana

Izmēģiniet Chrome veikala paplašinājumu

Daži attēli un video:

Es priecātos saņemt veselīgu kritiku. Es ceru, ka kādam šis paplašinājums būs noderīgs.
Ja jūs interesē, tad tuvākajā laikā es publicēšu avota koda pārskatu citā centrmezglā un ievietošu to vietnē github.
Plāno arī pāriet uz Firefox un IE.

P.S> Iespēja lejupielādēt video ir arī tur, bet iekšā Šis brīdis atspējots (ar video straumēšanu ir nelielas problēmas).

HTML valoda
Ievietojiet audio un video

Ievietojiet skaņu. Tag
Pievieno, atskaņo un pārvalda audio ierakstīšanas iestatījumus tīmekļa lapā. Faila ceļš tiek norādīts, izmantojot atribūtu src vai ligzdotu tagu .

Sintakse:

Daži

Tagu atribūti

automātiskā atskaņošana- skaņa sāk atskaņot tūlīt pēc lapas ielādes;

vadīklas- audio failam pievieno vadības paneli;

cilpa- atkārto skaņas atskaņošanu no sākuma pēc tās pabeigšanas;

iepriekšēja ielāde- izmanto, lai lejupielādētu failu kopā ar tīmekļa lapas ielādi;

src

Beigu tags ir obligāts.
Tvertnes iekšpusē

Piemērs:

Ievietojiet video. Tag
Pievieno, atskaņo un pārvalda video iestatījumus tīmekļa lapā. Faila ceļš tiek norādīts, izmantojot atribūtu src vai ligzdotu tagu .

Sintakse:

Daži vienumus var saistīt ar dažādiem failiem. Pārlūkprogramma izmantos pirmo palaižamo formātu.

Tagu atribūti

automātiskā atskaņošana- pēc lapas ielādes video sāk atskaņot automātiski;

vadīklas- pievieno videoklipam vadības paneli;

cilpa- atkārto video atskaņošanu no sākuma pēc tā pabeigšanas;

augstums- nosaka video atskaņošanas laukuma augstumu;

platums- nosaka platumu video atskaņošanai;

iepriekšēja ielāde- izmanto, lai lejupielādētu videoklipus kopā ar tīmekļa lapas ielādi;

src- norāda ceļu uz atskaņoto failu.

Beigu tags ir obligāts.
Tvertnes iekšpusē

Piemērs:

Rezultāta piemērs pārlūkprogrammā:

Mūzika vietnē ir vairāk retums nekā norma. Ievietojot mūziku vietnē, jums jāsaprot, ka tā var pat atsvešināt dažus lietotājus. Šajā rakstā mēs apskatīsim vairākas mūzikas ievietošanas iespējas vietnē, kā arī apskatīsim, kā izveidot fona mūziku.

Kā iegult fona mūziku vietnē

Fona mūzikas ievietošana vietnē ir visbīstamākā iespēja zaudēt apmeklētājus. Tā kā fona mūziku ne tikai nevar izslēgt, bet arī tās skaļums nekādā veidā netiek regulēts (tas viss ir atkarīgs no pašreizējā skaļuma datorā). Tāpēc pirms fona mūzikas ievietošanas jums ir jādomā simts reizes.

Ir divi veidi, kā ievietot mūziku html

1. iespēja. Izmantojot html tagu

Fona mūzikas ielīmēšanas sintakse

Tag ir vairāki atribūti:

• cilpa = "vērtība" - mūzikas atkārtojumu skaits (ja -1, tad tas atkārtojas bezgalīgi)
• bilance = "vērtība" - stereo līdzsvars (no -10000 līdz 10000)
• apjoms = "vērtība" - skaļums (maksimums 0, minimums -10000)

Kad lapa tiek ielādēta, mūzika tiks atskaņota automātiski.

Piemēram

2. iespēja. Izmantojot tagu

Sintakse objekta ievietošanai ar mūziku

Tag var izmantot šādus atribūtus:

• platums = "vērtība" - platums (pikseļos vai procentos)
• augstums = "vērtība" - augstums (pikseļos vai procentos)
• align = "value" - izlīdzināšana (pa kreisi - pa kreisi, pa labi - pa labi, centrā - centrā)
• hidden = "value" - paneļa redzamība (true - hide, false - show), pēc noklusējuma panelis ir redzams
• autostart = "value" - atskaņot mūziku lejupielādējot (true - yes, false - no)
• cilpa = "vērtība" - vērtība patiesa - spēlē ciklā, nepatiesa - vienreiz

Piemēram

Katrai pārlūkprogrammai standarta atskaņotājs izskatīsies savādāk, tāpēc mēs neuzskatīsim katru no tiem atsevišķi.

Html5 tagā var izmantot

Taga izmantošanas nozīme

Sintakses tags

Var izmantot šādus atribūtus:

• automātiskā atskaņošana = "vērtība" - atskaņojiet mūziku tūlīt pēc lapas ielādes
• kontrole = "vērtība" - parādīt atskaņotāja vadības paneli pārlūkprogrammā
• cilpa = "vērtība" - ir atbildīga par cilpu
• preload = "value" - nekavējoties ielādējiet mūziku ar lapas ielādi

Manuprāt, apsvērtās iespējas nav ideāli risinājumi, jo visu pamatā ir standarta spēlētāji. Katrai pārlūkprogrammai būs savs noklusējuma atskaņotājs, un dažos gadījumos tas var nedarboties vispār. Tāpēc vislabāk ir lejupielādēt atskaņotāju savā vietnē un lejupielādēt mūziku no tās. Šādam atskaņotājam būs funkcijas apstāties, regulēt skaļumu utt. - viss nepieciešamais komplekts vienkāršam lietotājam.

Šis jautājums rodas ļoti bieži, tāpēc es nolēmu nodarbībās tam veltīt atsevišķu rakstu. Tā kā HTML nav universālas audio atskaņošanas tehnoloģijas visām pārlūkprogrammām, lai atrisinātu šo problēmu, es ierosinu lejupielādēt audio atskaņotāja failu, kā tas tiek darīts lielākajā daļā vietņu. Mēs visu darām soļos:

1. Hostā, kurā atrodas jūsu vietne, saknes direktorijā (mapē, kurā atrodas indeksa fails) izveidojiet audio mapi. Nākotnē jūs tajā ievietojat visus audio failus.

3. Tagad izvēlieties vajadzīgos failus, vēlams mp3 formātā. Izveidojiet mapi audio vietnes saknē un augšupielādējiet tos.

4. Atliek tikai ievietot atskaņotāja savienojuma kodu. Tas ir piemērots jebkurai vietnei Pareizā vietā jums vienkārši jānorāda ceļš uz atskaņotāja failu un audio failu, attiecīgi aizstājot vārdus jūsu_domēns un audio_faila_nosaukums:

Un jūs esat pabeidzis! Jūs varat arī redzēt darbu piemērs.

Kā iestatīt fona mūziku html

Izmantojot HTML un pārlūkprogrammas iespējas, lapā varat ievietot arī fona mūziku. Jums būs nepieciešams pareiza formāta audio fails: WAV, AU, MIDI vai MP3. Kā piemēru varat izmantot jebkuru failu ar norādīto paplašinājumu.

Pirmais veids ir iegulšanas tags. Iegulšanas elements tiek izmantots, lai ielādētu un parādītu objektus (piemēram, video failus, flash filmas, dažus skaņas failus utt.), Kurus pārlūkprogramma sākotnēji nesaprot.

Sintakse ir diezgan vienkārša:

Nav nepieciešams noslēguma tags.

Tagad apskatīsim ieraksta piemēru ar atribūtiem un zemāk ar to atšifrēšanu:

Iegult tagu atribūtus audio atskaņošanai html
platums - paneļa platums pikseļos (vai procentos)
augstums - paneļa augstums pikseļos (vai procentos)
izlīdzināt - paneļa novietojums attiecībā pret tekstu, iespējamās vērtības ir pa kreisi, pa labi, centrā
slēpts - ļauj paslēpt paneli, atribūtu vērtības: true - panelis ir paslēpts, nepatiess - panelis ir redzams (noklusējuma vērtība)
automātiskā palaišana - patiesā vērtība - atskaņotājs sāk darboties automātiski, kad lapa tiek ielādēta, nepatiesa - gaida atskaņošanas pogas nospiešanu
cilpa - cilpa, patiesa - celiņš tiek atskaņots aplī, un, ja nepatiess - tikai vienu reizi

Otrs veids.Ļoti vecs, bet arī praktisks) Pievienojiet melodiju tai pašai mapei (direktorijam), kurā atrodas jūsu fails, un pamattekstā ierakstiet šādu kodu:

Rezultātā pēc lapas ielādes atskanēs jūsu norādītā melodija bgsound tagā. Tagad sīkāk apskatīsim taga atribūtus. :

src- ceļš uz jūsu audio failu
cilpa- cik reizes melodija jāatkārto (ja -1, tad tā atkārtojas bezgalīgi)
līdzsvars- stereo līdzsvara vērtība (no -10000 līdz 10000)
apjoms- atskaņotās melodijas skaļums, kur 0 ir maksimālais un -10000 ir minimālais.

Tomēr spēlētāju nekādā veidā nevarēs kontrolēt - katru reizi, kad lapa tiek atsvaidzināta, celiņš tiks atskaņots vēlreiz.

Pēc fona mūzikas ievietošanas metodes aprakstīšanas es vēlos jūs atturēt, jo lielākā daļa lietotāju, apmeklējot dažādas vietnes, parasti jau klausās mūziku. Tāpēc mūzikas pavadīšana var tikai piespiest viņu aizvērt cilni ar vietni.

Ievietojiet audio un mūziku HTML5 - audio tagā

audio- pārī savienots tags, kas nosaka fona skaņu, mūziku vai citu audio straumi vietnē.

Audio tagu atribūti

automātiskā atskaņošana- fails tiek atskaņots uzreiz pēc lapas ielādes (līdzīgi kā bgsound fona mūzika)
vadīklas- pārlūkprogrammā parādīt atskaņotāja vadības paneli
cilpa- atskaņo failu pēc tā beigām
iepriekšēja ielāde- audio faila lejupielāde notiks kopā ar lapas ielādi
src- ceļš uz audio failu (mp3 vai ogg)

Koda paraugs ar audio tagu

Audio HTML 5