Tengeneza Wijeti Zako mwenyewe kwa urahisi - Kukabiliana na BPM ya haraka: Hatua 6

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:48

Programu za wavuti ni mahali pa kawaida, lakini programu za wavuti ambazo hazihitaji ufikiaji wa mtandao sio.

Katika kifungu hiki ninakuonyesha jinsi nilivyotengeneza Kaunta ya BPM katika ukurasa rahisi wa HTML uliounganishwa na vanilla JavaScript (tazama hapa). Ikiwa imepakuliwa, wijeti hii inaweza kutumika nje ya mtandao - bora kwa wanamuziki ambao wanataka kuunda lakini hawana ufikiaji wa mtandao kila wakati. Bora zaidi, kwa kutumia programu ya dashibodi ya OSX (ambayo haijawahi kuonekana kuwa muhimu hapo awali), tunaweza kuifanya Badi hii ya BPM kuwa ya haraka kutumia.

Hatua ya 1: Inapaswa Kuonekanaje?

Kwa wazi, jibu la swali ni suala la maoni. Msimamo wangu ni kwamba inapaswa kuwa rahisi sana na ifanye tu kile kaunta ya BPM inahitaji: kuhesabu Beats Kwa Dakika. Kwa hivyo, inahitajika tu kuwa kitufe na thamani ya kuhesabu.

Hatua ya 2: Mantiki

Kukadiria BPM ni rahisi kama kupima wakati kati ya mapigo mawili na kuhesabu ni ngapi kati ya hizi unaweza kutoshea kwa dakika.

let prev_click = Tarehe mpya (); muda wa const = (currentTime - prev_click) / 1000; const bpm = 60 / muda; prev_click = wakati wa sasa; kurudi bpm; } kupata_bpm (); // n.k. 120

Nilichukua hii zaidi kwa wastani wa midundo 3 iliyopita kama hii:

wastani wastani = 3;

const prev_bpms = [60]; let prev_click = Tarehe mpya () const getBPM = kazi () {const currentTime = new Date (); muda wa const = (currentTime - prev_click) / 1000; const bpm = 60 / muda; prev_click = wakati wa sasa; wakati (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); wastani_bpm = prev_bpms.punguza ((acc, cVal) => acc + cVal) / prev_bpms.length; kurudi bpm; } kupata_bpm (); // n.k. 120

Pia, sio kila mtu anataka kubonyeza kitufe lakini labda badala ya ufunguo:

// nafasi ya bar ya nafasi

dirisha.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // hati ya uwezo wa papo hapo.querySelector ('. clicker button'). kuzingatia ();

Sasa, watumiaji wanaweza pia kugonga kutumia mwambaa wa nafasi mara tu ukurasa unapobeba.

Hatua ya 3: Sikia BPM Yako

Umegusa BPM yako, lakini sasa unataka kuicheza tena ili uweze kujazana kwenye tempo yako uipendayo.

Ili kufanya hivyo, lazima tutoe sauti. Lakini vipi? Tuna chaguzi mbili zilizojengwa kwenye kivinjari AudioAPI, tumia faili ya sauti au tengeneza synthesizer. Kwanza tutatumia synthesizer kuunda beep:

const AudioContext = dirisha. AudioContext || dirisha.webkitAudioContext;

let muktadha, oscillator; const bpm = 60; const bpmInterval = 60 / bpm * 1000; // mssetInterval (beep, bpmInterval); const beep = kazi () {ikiwa (! muktadha) muktadha = mpya AudioContext (); oscillator = muktadha.createOscillator (); oscillator.type = "sine"; kuanza (0); oscillator.connect (muktadha.destination); setTimeout (oscillator.disconnect, 150, muktadha.destination); }

Sasa wacha tufanye kitu kama hicho kutumia faili ya Sauti badala yake:

const bonyeza = mpya Audio ('./ cowbell.mp3');

const bpm = 60; const bpmInterval = 60 / bpm * 1000; // ms setInterval (beep, bpmInterval); const beep = kazi () {click.play (); setTimeout (() => {click.pause (); bonyeza. TurrentTime = 0.0;}, 150); };

Mwishowe nikiongeza mantiki inayowadhibiti:

// JSlet isPlayerPlaying = uwongo;

hebu bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. player button'); ikiwa (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (beep, bpmInterval); } mwingine {button.innerHTML = '▶'; waziInterval (bpmRepeaterId); } isPlayerPlaying =! ni kucheza kucheza; };

Hatua ya 4: Kuiweka Pamoja

Sasa kuweka huduma zote pamoja na kuongeza maridadi kidogo (ambayo sitaelezea), tuna bidhaa hii ya mwisho:

Sijui ni watu wangapi wanataka kuona nambari moja kwa moja kwenye nakala hiyo, kwa hivyo pata nambari kamili kwenye

Hatua ya 5: Matumizi madhubuti (Watumiaji wa OSX pekee)

Ikiwa umetumia mac hapo awali, huenda ukajikwaa kwenye Programu ya asili ya Dashibodi, lakini labda haungekaa muda mrefu.

Sijawahi kuitumia… mpaka sasa. Katika Safari unaweza kubofya kulia kwenye ukurasa, ambayo wakati mwingine husababisha uteuzi wa vitendo kujitokeza ikiwa ni pamoja na kufunguliwa kwenye dashibodi…

Kubofya hii itakufunulia waundaji wa ukurasa wa wijeti. Unaweza kuchagua sehemu ya ukurasa ambao ungependa kuongeza kwenye dashibodi yako. Hii ni sifa nzuri, lakini kwa upande wetu, ni huduma nzuri sana. Kufungua kaunta ya BPM ambayo tumetengeneza tu, unaweza kuchagua kisanduku kama hiki:

Sasa tumia njia ya mkato ya kitufe cha F12. BOOM. Haijawahi kuwa rahisi kuunda wijeti mwenyewe, haraka na kwa urahisi.

Hatua ya 6: Vidokezo

Labda unajiuliza ni kwanini hii haijumuishi kipengele cha uchezaji wa metronome. Nilipojaribu kuitumia kwenye dashibodi, mpango haungecheza sauti kwa uaminifu: (Lakini angalau Logic inaweza kufanya sehemu hiyo kwa urahisi.

Na sababu kwanini nilikuonyesha jinsi ya kuunda sauti kwa njia mbili tofauti ni kwa sababu toleo la Muktadha wa Sauti kwa kutumia kisanisi halingefanya kazi ndani ya dashibodi.

Mwishowe, huwezi kubofya F12 na uendelee kutumia mwambaa wa nafasi kupata tempo, lazima ubonyeze kitufe moja kwa moja, ambayo ni kupungua. Lakini nadhani hii inaweza kuwa jinsi ninavyotengeneza vilivyoandikwa vidogo kuanzia sasa. Ikiwa una maoni mazuri ya hii, nionyeshe wakati umeyatekeleza.

Jisajili kwenye Orodha yetu ya Barua!

Na ndio, angalia T3chFlicks - tunatengeneza vitu!