Ua Koj Tus Kheej Widgets Yooj Yim - Ceev BPM Counter: 6 Cov Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:24

Web apps yog ib qho chaw, tab sis web apps uas tsis xav tau kev siv internet tsis yog.

Hauv kab lus no kuv qhia koj li cas kuv ua BPM Counter hauv nplooj ntawv yooj yim HTML ua ke nrog vanilla javascript (saib ntawm no). Yog tias rub tawm, lub cuab yeej no tuaj yeem siv tau offline - zoo tshaj rau cov kws ntaus nkauj uas xav tsim tab sis tsis tas yuav muaj kev siv internet. Txawm tias zoo dua, los ntawm kev siv OSX dashboard app (uas tsis zoo li muaj txiaj ntsig zoo ua ntej), peb tuaj yeem ua qhov BPM Counter no nrawm dua rau siv.

Kauj Ruam 1: Nws Yuav Zoo Li Cas?

Pom tseeb, lo lus teb rau lo lus nug yog teeb meem ntawm kev xav. Kuv qhov kev xav yog tias nws yuav tsum yooj yim heev thiab tsuas yog ua dab tsi ntawm BPM lub txee xav tau: suav Beats Ib feeb Yog li ntawd, txhua yam nws xav tau yog lub pob thiab suav tus nqi.

Kauj ruam 2: Logic

Kwv yees BPM yog qhov yooj yim raws li ntsuas lub sijhawm nruab nrab ntawm ob qhov sib ntaus thiab suav pes tsawg ntawm cov no koj tuaj yeem haum hauv ib feeb.

cia prev_click = Hnub Tshiab (); const getBPM = muaj nuj nqi () {const currentTime = Hnub Tshiab (); const luv = (currentTime - prev_click)/1000; const bpm = 60/ncua; prev_click = tam sim no Sijhawm; rov bpm; } tau_bpm (); // piv txwv li 120

Kuv coj qhov no ntxiv los ntawm qhov nruab nrab 3 qhov kev ntaus dhau los zoo li no:

const nruab nrab = 3;

const prev_bpms = [60]; cia prev_click = Hnub Tshiab () const getBPM = muaj nuj nqi () {const currentTime = Hnub Tshiab (); const luv = (currentTime - prev_click) / 1000; const bpm = 60 / ncua; prev_click = tam sim no Sijhawm; thaum (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); nruab nrab_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; rov bpm; } tau_bpm (); // piv txwv li 120

Tsis tas li, tsis yog txhua tus xav nias lub pob tab sis tej zaum hloov qhov yuam sij:

// space bar txhais

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // instant peev xwm document.querySelector ('. clicker khawm'). tsom ();

Tam sim no, cov neeg siv kuj tseem tuaj yeem siv qhov chaw bar kom sai li sai tau thaum nplooj ntawv tau thauj khoom.

Kauj Ruam 3: Hnov Koj Li BPM

Koj tau coj mus rhaub rau hauv koj li BPM, tab sis tam sim no koj xav ua nws rov qab yog li koj tuaj yeem cuam tshuam nrog koj lub sijhawm nyiam.

Txhawm rau ua qhov no, peb yuav tsum ua suab nrov. Tab sis li cas? Peb muaj ob txoj hauv kev xaiv ua hauv qhov browser AudioAPI, siv cov ntaub ntawv suab lossis tsim cov khoom sib xyaw. Peb yuav xub siv lub tshuab hluav taws xob los tsim lub suab nrov:

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

cia cov ntsiab lus, oscillator; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (beep, bpmInterval); const beep = muaj nuj nqi () {yog (! ntsiab lus) ntsiab lus = tshiab AudioContext (); oscillator = context.createOscillator (); oscillator.type = "sine"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Tam sim no cia ua qhov zoo ib yam siv Cov Ntaub Ntawv Suab hloov chaw:

const nyem = tshiab Suab ('./ cowbell.mp3');

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (beep, bpmInterval); const beep = muaj nuj nqi () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Thaum kawg ntxiv cov laj thawj uas tswj hwm lawv:

// JSlet isPlayerPlaying = cuav;

cia bpmRepeaterId; const togglePlayerOutput = muaj nuj nqi () {const khawm = document.querySelector ('. player khawm'); yog (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (beep, bpmInterval); } lwm {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Kauj Ruam 4: Muab tag nrho ua ke

Tam sim no muab tag nrho cov yam ntxwv ua ke thiab ntxiv me ntsis ntawm cov qauv (uas kuv tsis tau piav qhia), peb muaj cov khoom kawg no:

Kuv tsis paub ntau npaum li cas cov tib neeg xav pom ncaj qha hauv kab lus, yog li nrhiav tus lej tag nrho ntawm

Kauj Ruam 5: Siv Tau Zoo (OSX Cov Neeg Siv Xwb)

Yog tias koj tau siv lub mac ua ntej, tej zaum koj yuav tau hla hla cov Dashboard App ib txwm muaj, tab sis tej zaum koj yuav tsis nyob ntev.

Kuv yeej tsis tau siv nws tiag tiag … txog tam sim no. Hauv Safari koj tuaj yeem nyem rau ntawm nplooj ntawv, uas qee zaum ua rau xaiv qhov kev xaiv kom tshwm tuaj suav nrog qhib hauv dashboard …

Nyem rau ntawm no yuav qhia rau koj lub vev xaib widget tus tsim. Koj tuaj yeem xaiv ib feem ntawm nplooj ntawv uas koj xav ntxiv rau hauv koj lub dashboard. Qhov no yog qhov zoo nkauj txias, tab sis rau peb cov ntaub ntawv, nws yog qhov zoo tshaj plaws. Qhib lub BPM txee peb nyuam qhuav ua, koj tuaj yeem xaiv lub npov zoo li no:

Tam sim no siv qhov luv ntawm F12 tus yuam sij. BOOM. Nws yeej tsis tau yooj yim los tsim widgets koj tus kheej, sai thiab yooj yim.

Kauj ruam 6: Sau ntawv

Tej zaum koj yuav xav tsis thoob vim li cas qhov no tsis suav nrog cov metronome playback feature. Thaum kuv tau sim siv nws hauv lub dashboard, txoj haujlwm yuav tsis ntseeg tau tso lub suab: (Tab sis tsawg kawg Logic tuaj yeem yooj yim ua qhov ntawd.

Thiab yog vim li cas kuv thiaj qhia koj li cas los tsim lub suab hauv ob txoj hauv kev sib txawv vim tias Lub Suab Cov ntsiab lus siv cov khoom siv sib xyaw yuav tsis ua haujlwm sab hauv lub dashboard.

Thaum kawg, koj tsis tuaj yeem nyem F12 thiab mus txuas ntxiv siv qhov chaw bar kom tau txais lub sijhawm, koj yuav tsum nyem lub pob ncaj qha, uas yog txo qis. Tab sis kuv xav tias qhov no yuav yog li cas kuv ua cov cuab yeej me me txij tam sim no. Yog tias koj muaj lub tswv yim txias rau qhov no, qhia kuv thaum koj tau ua tiav lawv:)

Sau npe rau Peb Cov Npe Xa Ntawv!

Thiab yog, txheeb xyuas T3chFlicks - peb ua khoom!