Өөрийнхөө виджетийг хялбархан хий - BPM -ийн хурдан тоолуур: 6 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:00

Вэб програмууд нь нийтлэг газар боловч интернетэд нэвтрэх шаардлагагүй вэб аппликейшн нь тийм биш юм.

Энэ нийтлэлд би ванилийн javascript -тэй хослуулсан энгийн HTML хуудсан дээр BPM тоолуурыг хэрхэн хийснийг танд үзүүлэх болно (эндээс үзнэ үү). Хэрэв татаж авбал энэ виджетийг офлайнаар ашиглах боломжтой бөгөөд энэ нь бүтээхийг хүсч байгаа боловч интернетэд үргэлж байдаггүй хөгжимчдэд тохиромжтой. Илүү сайн, OSX хяналтын самбарын програмыг ашигласнаар (урьд өмнө хэзээ ч тийм ашигтай байгаагүй) бид энэхүү BPM Counter -ийг илүү хурдан ашиглах боломжтой болгож чадна.

Алхам 1: Энэ нь ямар байх ёстой вэ?

Мэдээжийн хэрэг асуултын хариулт бол үзэл бодлын асуудал юм. Миний байр суурь бол энэ нь маш энгийн бөгөөд зөвхөн BPM тоологч хэрэгтэй зүйлийг л хийх ёстой: Beats Per Minute. Тиймээс товчлуур, тоолох утга байхад л хангалттай.

Алхам 2: Логик

BPM -ийг тооцоолох нь хоёр дараалсан цохилтын хоорондох хугацааг хэмжих, хэдэн минутанд хэдэн ширхэг багтах боломжтойг тооцоолохтой адил хялбар юм.

prev_click = шинэ огноо (); const getBPM = function () {const currentTime = шинэ огноо (); const интервал = (currentTime - prev_click)/1000; const bpm = 60/интервал; prev_click = currentTime; эргэх bpm; } get_bpm (); // жишээ нь 120

Би өмнөх 3 цохилтыг дунджаар ингэж ахиуллаа.

const дунджаар = 3;

const prev_bpms = [60]; prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const интервал = (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; эргэх bpm; } get_bpm (); // жишээ нь 120

Түүнчлэн, хүн бүр товчлуурыг дарахыг хүсдэггүй, гэхдээ оронд нь түлхүүр байж магадгүй юм.

// зайны талбайн гох

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // шуурхай чадварын баримт бичиг.querySelector ('. дарагч товч'). focus ();

Одоо хэрэглэгчид хуудас ачаалагдмагц зайны товчлуурыг дарах боломжтой болно.

Алхам 3: BPM -ээ сонсоорой

Та BPM -ээ товшсон байна, гэхдээ одоо та үүнийг тоглуулахыг хүсч байгаа бөгөөд ингэснээр та дуртай хэмнэлээ хадгалах боломжтой болно.

Үүнийг хийхийн тулд бид дуу чимээ гаргах ёстой. Гэхдээ яаж? Бидэнд AudioAPI хөтөч дээр дууны файл ашиглах эсвэл синтезатор үүсгэх хоёр сонголт бий. Бид дуут дохио үүсгэхийн тулд эхлээд синтезаторыг ашиглана.

const AudioContext = цонх. AudioContext || window.webkitAudioContext;

Context, oscillator; 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); oscillator.connect (контекст. зорилт); setTimeout (oscillator.disconnect, 150, context.destination); }

Үүний оронд аудио файл ашиглан үүнтэй төстэй зүйлийг хийцгээе.

const click = шинэ аудио (‘./ cowbell.mp3’);

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

Эцэст нь тэдгээрийг хянадаг логикийг нэмж оруулав.

// JSlet isPlayerPlaying = худал;

bpmRepeaterId зөвшөөрөх; const togglePlayerOutput = function () {const товчлуур = document.querySelector ('. тоглуулагчийн товчлуур'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (дуут дохио, bpmInterval); } өөр {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Алхам 4: Бүгдийг нэгтгэх

Одоо бүх онцлог шинж чанаруудыг нэгтгэж, бага зэрэг сарлагийн саваг нэмж оруулаарай (үүнийг би тайлбарлахгүй байна) бидэнд эцсийн бүтээгдэхүүн байна:

Хүмүүс нийтлэлд шууд хичнээн их кодыг үзэхийг хүсч байгаагаа мэдэхгүй байна, тиймээс https://gitlab.com/t3chflicks/bpm-counter дээрээс бүрэн кодыг олоорой.

Алхам 5: Үр дүнтэй ашиглах (Зөвхөн OSX хэрэглэгчид)

Хэрэв та өмнө нь mac ашиглаж байсан бол хяналтын самбарын аппликейшн дээр бүдэрсэн байж магадгүй, гэхдээ та удаан суухгүй байх.

Би үүнийг хэзээ ч ашиглаж байгаагүй … одоог хүртэл. Safari дээр та хуудсан дээр хулганы баруун товчлуурыг дарах боломжтой бөгөөд энэ нь заримдаа хяналтын самбар дээр нээгдсэн үйлдлийн сонголт гарч ирдэг.

Үүнийг дарахад танд вэб хуудас виджет бүтээгч гарч ирэх болно. Та хяналтын самбарт нэмж оруулахыг хүсч буй хуудасныхаа хэсгийг сонгож болно. Энэ бол үнэхээр дажгүй шинж чанар боловч бидний хувьд энэ бол үнэхээр гайхалтай онцлог юм. Саяхан хийсэн BPM тоолуурыг нээгээд та дараах хайрцгийг сонгож болно.

Одоо F12 товчлуурын товчлолыг ашиглана уу. ӨСӨЛТ. Виджетийг өөрөө хурдан, хялбараар бүтээх нь хэзээ ч ийм амархан байгаагүй.

Алхам 6: Тэмдэглэл

Энэ нь яагаад метроном тоглуулах функц агуулаагүй болохыг та гайхаж байж магадгүй юм. Би үүнийг хяналтын самбар дээр ашиглахыг оролдоход програм нь аудиог найдвартай тоглуулахгүй байсан: (Гэхдээ наад зах нь Логик энэ хэсгийг хялбархан хийж чадна.

Дуу чимээг хоёр өөр аргаар хэрхэн яаж хийхийг танд харуулсан шалтгаан нь синтезатор ашиглан Аудио контекст хувилбар нь хяналтын самбар дотор ажиллахгүй байгаа явдал юм.

Эцэст нь хэлэхэд, та F12 товчлуурыг дарж, зай авахын тулд хурдыг авахын тулд товчлуурыг шууд дарах ёстой. Гэхдээ миний бодлоор одооноос эхлэн би жижиг виджет хийдэг. Хэрэв танд энэ талаар ямар нэгэн гайхалтай санаа байгаа бол түүнийгээ хэрэгжүүлсэн үедээ надад хэлээрэй:)

Манай захидлын жагсаалтад бүртгүүлнэ үү!

Тийм ээ, T3chFlicks -ийг үзээрэй - бид юм хийдэг!