Жеке виджеттериңизди оңой жасаңыз - BPMдин тез эсептегичи: 6 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

Желе колдонмолору кеңири таралган, бирок интернетке кирүүнү талап кылбаган веб -колдонмолор андай эмес.

Бул макалада мен кантип BPM эсептегичти ваниль javascript менен коштолгон жөнөкөй HTML баракчасында жасагандыгымды көрсөтөм (бул жерден караңыз). Жүктөлүп алынса, бул виджет оффлайнда колдонулушу мүмкүн - жараткысы келген, бирок ар дайым интернетке кире албаган музыканттар үчүн идеалдуу. Андан да жакшыраагы, OSX панелинин колдонмосун колдонуу менен (мурда эч качан пайдалуу көрүнгөн эмес), биз бул BPM Counterди колдонууга тез кыла алабыз.

1 -кадам: Бул кандай болушу керек?

Албетте, суроого жооп - бул пикир. Менин позициям - бул супер жөнөкөй жана BPM эсептегичке керектүү нерселерди гана жасоо керек: Beats Per Minute. Ошондуктан, болгону бир баскыч жана эсептөө мааниси болушу керек.

2 -кадам: Логика

BPMди баалоо эки ырааттуу согуунун ортосундагы убакытты өлчөө жана мунун бир канча мүнөтүнө туура келерин эсептөө сыяктуу оңой.

let prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); const аралыгы = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = currentTime; кайтуу bpm; } get_bpm (); // мис. 120

Мен муну мурунку 3 уруунун орточо көрсөткүчү менен алдыга жылдырдым:

const орточо = 3;

const prev_bpms = [60]; let prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const аралыгы = (currentTime - prev_click) / 1000; const bpm = 60 / interval; 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; кайтуу bpm; } get_bpm (); // мис. 120

Ошондой эле, баары эле баскычты баскысы келбейт, бирок анын ордуна ачкыч:

// боштук тилкесинин триггери

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // ыкчам жөндөмдүүлүк document.querySelector ('. чыкылдатуу баскычы'). focus ();

Эми колдонуучулар барак жүктөлөөрү менен боштукту колдонууну таптап коюшу мүмкүн.

3 -кадам: Сиздин BPM уккула

Сиз BPM'иңизди таптадыңыз, бирок азыр аны кайра ойноткуңуз келет, ошондо сиз сүйүктүү темпке жетүүңүз үчүн.

Бул үчүн биз үн чыгарышыбыз керек. Бирок кантип? Бизде AudioAPI браузерине орнотулган эки вариант бар, үн файлын колдонуңуз же синтезаторду түзүңүз. Адегенде биз синтезаторду колдонобуз:

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

болсун контекст, осциллятор; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (бип, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); oscillator = context.createOscillator (); oscillator.type = "синус"; oscillator.start (0); осциллятор.коннект (контекст.көздөгөн жери); setTimeout (oscillator.disconnect, 150, context.destination); }

Эми анын ордуна аудио файлды колдонуп ушундай кылалы:

const чыкылдатуу = жаңы Аудио (‘./ cowbell.mp3’);

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (бип, bpmInterval); const beep = function () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Акыры аларды башкарган логиканы кошуу:

// JSlet isPlayerPlaying = жалган;

let bpmRepeaterId; const togglePlayerOutput = function () {const баскычы = document.querySelector ('. оюнчу баскычы'); if (! 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 баскычынын жарлыгын колдонуңуз. BOOM. Виджеттерди тез жана оңой түзүү эч качан оңой болгон эмес.

6 -кадам: Эскертүүлөр

Эмне үчүн бул метрономду ойнотуу өзгөчөлүгүн камтыбайт деп ойлонушуңуз мүмкүн. Мен аны тактасында колдонууга аракет кылганымда, программа аудиону ишенимдүү түрдө ойното албайт: (Бирок, жок дегенде, Логика бул бөлүктү оңой эле аткара алат.

Мен сизге үндөрдү кантип эки башка жол менен көрсөтүүнү көрсөткөнүмдүн себеби, синтезаторду колдонгон Аудио Контекст версиясы панелде иштебейт.

Акыр -аягы, сиз F12ди басып, темпти алуу үчүн боштукту колдонууну уланта албайсыз, баскычты түз басуу керек, бул төмөндөө. Бирок мен ойлойм, мындан кийин мен кичинекей виджеттерди ушундай кылып жасайм. Эгерде сизде бул боюнча кандайдыр бир сонун идеялар болсо, аларды качан ишке ашырганыңызды көрсөтүңүз:)

Кат таратуу кызматынын тизмесине кол коет!

Ооба, T3chFlicksти текшериңиз - биз нерселерди жасайбыз!