Հեշտությամբ պատրաստեք ձեր սեփական վիջեթները ՝ արագ BPM հաշվիչ ՝ 6 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Վեբ ծրագրերը սովորական տեղ են, բայց վեբ ծրագրերը, որոնք ինտերնետ մուտք չեն պահանջում, այդպիսին չեն:

Այս հոդվածում ես ձեզ ցույց եմ տալիս, թե ինչպես եմ պատրաստել BPM հաշվիչ ՝ պարզ HTML էջում ՝ զուգորդված վանիլային javascript- ի հետ (տե՛ս այստեղ): Ներբեռնելու դեպքում այս վիջեթը կարող է օգտագործվել անցանց ռեժիմում `իդեալական այն երաժիշտների համար, ովքեր ցանկանում են ստեղծագործել, բայց ոչ միշտ ինտերնետ ունեն: Նույնիսկ ավելի լավ, օգտագործելով OSX վահանակի ծրագիրը (որը նախկինում երբեք այդքան էլ օգտակար չէր թվում), մենք կարող ենք այս BPM հաշվիչը լրացուցիչ արագ դարձնել օգտագործման համար:

Քայլ 1: Ինչպիսի՞ն պետք է լինի այն:

Ակնհայտ է, որ հարցի պատասխանը կարծիքի հարց է: Իմ դիրքորոշումն այն է, որ այն պետք է լինի չափազանց պարզ և կատարի միայն այն, ինչ անհրաժեշտ է BPM հաշվիչին. Հաշվել զարկերը րոպեում: Հետևաբար, այն ամենը, ինչ պետք է լինի, դա կոճակ և հաշվարկի արժեք է:

Քայլ 2: Տրամաբանություն

BPM- ի գնահատումը նույնքան հեշտ է, որքան երկու հաջորդական զարկերի միջև ընկած ժամանակը չափելը և հաշվելը, թե դրանցից քանիսին կարող եք տեղավորել մեկ րոպեում:

թող prev_click = նոր Ամսաթիվ (); const getBPM = գործառույթ () {const currentTime = նոր Ամսաթիվ (); const interval = (currentTime - prev_click)/1000; const bpm = 60/ընդմիջում; prev_click = currentTime; վերադարձի րոպե / րոպե; } get_bpm (); // օրինակ 120

Ես սա ավելի առաջ տարա ՝ միջինում ունենալով նախորդ 3 հարվածները այսպես.

միջին միջին = 3;

const prev_bpms = [60]; թող prev_click = նոր Ամսաթիվ () const getBPM = գործառույթը () {const currentTime = նոր Ամսաթիվ (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / ընդմիջում; prev_click = currentTime; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); average_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; վերադարձի րոպե / րոպե; } get_bpm (); // օրինակ 120

Բացի այդ, ոչ բոլորը ցանկանում են սեղմել կոճակը, այլ գուցե դրա փոխարեն ստեղնը.

// տիեզերական սանդղակի ձգան

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // ակնթարթային ունակություն document.querySelector ('. սեղմողի կոճակ'): կենտրոնացում ();

Այժմ օգտվողները կարող են նաև հպել ՝ օգտագործելով տիեզերական սանդղակը, հենց որ էջը բեռնվի:

Քայլ 3: Լսեք ձեր BPM- ը

Դուք դիպչել եք ձեր BPM- ին, բայց այժմ ցանկանում եք այն նվագարկել, որպեսզի կարողանաք միանալ ձեր նախընտրած տեմպին:

Դա անելու համար մենք պետք է ձայն հանենք: Բայց ինչպես? Մենք ունենք AudioAPI դիտարկիչում ներկառուցված երկու տարբերակ ՝ օգտագործել ձայնային ֆայլ կամ ստեղծել սինթեզատոր: Մենք նախ կօգտագործենք սինթեզատորը ՝ ազդանշան ստեղծելու համար.

const AudioContext = window. AudioContext || window.webkitAudioContext;

թող համատեքստ, տատանում; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (ազդանշան, bpmInterval); const beep = գործառույթ () {if (! համատեքստ) համատեքստ = նոր AudioContext (); oscillator = context.createOscillator (); oscillator.type = "սինուս"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Այժմ եկեք նման բան անենք ՝ փոխարենը օգտագործելով Աուդիո ֆայլ.

const click = new Audio (‘./ cowbell.mp3’);

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (ազդանշան, bpmInterval); const beep = գործառույթ () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Վերջապես ավելացնելով այն վերահսկող տրամաբանությունը.

// JSlet isPlayerPlaying = կեղծ;

թող bpmRepeaterId; const togglePlayerOutput = գործառույթ () {const կոճակ = document.querySelector ('. նվագարկիչի կոճակ'); եթե (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (ազդանշան, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Քայլ 4: Այս ամենը միասին հավաքելը

Այժմ միացնելով բոլոր հնարավորությունները և ավելացնելով մի փոքր ոճավորում (որը ես չեմ պատրաստվում բացատրել) ՝ մենք ունենք այս վերջնական արտադրանքը.

Ես չգիտեմ, թե որքան կոդ են մարդիկ իսկապես ցանկանում տեսնել անմիջապես հոդվածում, այնպես որ ամբողջական կոդը գտեք https://gitlab.com/t3chflicks/bpm-counter կայքում:

Քայլ 5: Արդյունավետ օգտագործում (միայն OSX օգտվողների համար)

Եթե նախկինում օգտագործել եք mac, հնարավոր է, որ պատահաբար պատահել է, որ տեղակայված է Dashboard հավելվածը, բայց հավանաբար երկար չեք մնա:

Ես երբեք չեմ օգտագործել այն … մինչ այժմ: Safari- ում կարող եք աջ սեղմել էջի վրա, ինչը երբեմն առաջացնում է գործողությունների ընտրանի, այդ թվում ՝ բացել կառավարման վահանակում…

Սեղմելով դրա վրա ՝ ձեզ կհայտնվի վեբ էջի վիջեթ ստեղծող: Դուք կարող եք ընտրել էջի մի մասը, որը կցանկանայիք ավելացնել ձեր վահանակին: Սա բավականին թույն հատկություն է, բայց մեր դեպքում դա սուպեր թույն հատկություն է: Բացելով մեր պատրաստած BPM հաշվիչը, կարող եք ընտրել տուփը այսպես.

Այժմ օգտագործեք F12 ստեղնի դյուրանցումը: ԲՈMՄ Երբեք այդքան հեշտ չի եղել ինքնուրույն վիջեթներ ստեղծելը ՝ արագ և հեշտությամբ:

Քայլ 6: Նշումներ

Ձեզ կարող է հետաքրքրել, թե ինչու այս մեկը չի ներառում մետրոնոմի նվագարկման գործառույթը: Երբ ես փորձեցի օգտագործել այն կառավարման վահանակում, ծրագիրը հուսալիորեն չէր նվագարկի աուդիո ձայնը. (Բայց գոնե տրամաբանությունը կարող է հեշտությամբ կատարել այդ մասը:

Եվ պատճառը, թե ինչու ես ձեզ ցույց տվեցի, թե ինչպես ստեղծել ձայներ երկու տարբեր եղանակներով, այն է, որ սինթեզատոր օգտագործող Audio Context տարբերակը չի աշխատի վահանակի ներսում:

Ի վերջո, դուք չեք կարող պարզապես սեղմել F12- ը և շարունակել տիեզերք օգտագործել տեմպը ստանալու համար, դուք պետք է ուղղակիորեն սեղմեք կոճակը, որը նվազեցում է: Բայց ես կարծում եմ, որ այսուհետ այսպես կարող եմ փոքրիկ վիջեթներ պատրաստել: Եթե դրա համար ինչ -որ հիանալի գաղափարներ ունեք, ցույց տվեք, թե երբ եք դրանք իրականացրել:)

Գրանցվեք մեր Փոստային ցուցակին:

Եվ այո, ստուգեք T3chFlicks- ը, մենք պատրաստում ենք իրեր: