Жеке виджеттерді оңай жасаңыз - BPM жылдам есептегіші: 6 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:22

Веб -қосымшалар кең таралған, бірақ Интернетке қосылуды қажет етпейтін веб -қосымшалар жоқ.

Бұл мақалада мен сізге қарапайым HTML бетінде BPM есептегішін ванильді JavaScript -пен қалай жасағанымды көрсетемін (мына жерден қараңыз). Егер жүктелсе, бұл виджетті офлайн режимде пайдалануға болады - бұл жасағысы келетін, бірақ әрқашан интернетке кіре алмайтын музыканттар үшін өте қолайлы. Одан да жақсы, OSX бақылау тақтасының қосымшасын пайдалану (бұрын ешқашан пайдалы болып көрінбейтін), біз бұл BPM Counter -ді қосымша жылдамдата аламыз.

1 -қадам: Ол қандай болуы керек?

Әлбетте, сұраққа жауап - бұл пікір. Менің ұстанымым - бұл өте қарапайым және BPM есептегішіне қажет нәрсені ғана жасау керек: Beats Per Minute. Сондықтан түйме мен санау мәні болса болғаны.

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

BPM -ді бағалау екі реткі соққының арасындағы уақытты өлшеу және олардың бір минутына қаншалықты сәйкес келетінін есептеу сияқты оңай.

prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); 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 ();}); // лездік қабілеттілік document.querySelector ('. шерту түймесі'). focus ();

Енді қолданушылар бет жүктелгеннен кейін бос орынның көмегімен түртуге болады.

3 -қадам: BPM -ді тыңдаңыз

Сіз BPM -ді енгіздіңіз, бірақ енді сіз оны өзіңіз ойнағыңыз келеді, осылайша сіз өзіңіздің сүйікті қарқынмен бірге жүре аласыз.

Ол үшін біз дыбыс шығаруымыз керек. Бірақ қалай? Бізде AudioAPI шолғышында дыбыстық файлды пайдалану немесе синтезатор жасаудың екі нұсқасы бар. Біз дыбыс шығару үшін алдымен синтезаторды қолданамыз:

const AudioContext = терезе. AudioContext || window.webkitAudioContext;

мәтінмән, осциллятор; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (дыбыстық сигнал, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); осциллятор = контекст.createOscillator (); oscillator.type = «синус»; oscillator.start (0); осциллятор.коннект (контекст.мақсат); setTimeout (oscillator.disconnect, 150, мәтінмән. тағайындау); }

Енді аудио файлды қолдана отырып, ұқсас нәрсені жасайық:

const click = жаңа аудио (‘./ 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 = жалған;

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 пернелер тіркесімін пайдаланыңыз. BOOM. Виджеттерді өз қолыңызбен тез және оңай жасау ешқашан оңай болған емес.

6 -қадам: Ескертулер

Сіз неге бұл метрономды ойнату мүмкіндігін қамтымайды деп ойлайтын шығарсыз. Мен оны бақылау тақтасында қолдануға тырысқанда, бағдарлама дыбысты сенімді түрде ойнатпайды: (Бірақ, кем дегенде, логика бұл бөлікті оңай орындай алады.

Мен сізге дыбыстарды екі түрлі жолмен қалай жасау керектігін көрсеткен себебім, синтезаторды қолданатын Аудио контекст нұсқасы бақылау тақтасында жұмыс істемейді.

Ақырында, сіз F12 батырмасын басып, қарқынды алу үшін бос орындарды пайдалана алмайсыз, сіз батырманы басуыңыз керек, бұл төмендету. Бірақ менің ойымша, мен бұдан былай кішкентай виджеттер жасай аламын. Егер сізде бұл туралы керемет идеялар болса, оларды іске асырған кезіңізді көрсетіңіз:)

Біздің пошталық тізімге жазылыңыз!

Ия, T3chFlicks -ті қараңыз - біз материал жасаймыз!