የእራስዎን ንዑስ ፕሮግራሞች በቀላሉ ያድርጉ - ፈጣን BPM ቆጣሪ -6 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:29

የድር መተግበሪያዎች የተለመዱ ቦታዎች ናቸው ፣ ግን የበይነመረብ መዳረሻ የማይጠይቁ የድር መተግበሪያዎች አይደሉም።

በዚህ ጽሑፍ ውስጥ ከቫኒላ ጃቫስክሪፕት ጋር ተጣምሮ በቀላል የኤችቲኤምኤል ገጽ ውስጥ BPM Counter ን እንዴት እንደሠራሁ (እዚህ ይመልከቱ)። ከወረደ ይህ መግብር ከመስመር ውጭ ጥቅም ላይ ሊውል ይችላል - ለመፍጠር ለሚፈልጉ ሙዚቀኞች ግን ሁል ጊዜ የበይነመረብ መዳረሻ ለሌላቸው። የበለጠ የተሻለ ፣ የ OSX ዳሽቦርድ መተግበሪያን (ከዚህ በፊት ያን ያህል ጠቃሚ አይመስልም) ፣ ይህንን BPM Counter ለመጠቀም የበለጠ ፈጣን ማድረግ እንችላለን።

ደረጃ 1: ምን መምሰል አለበት?

የጥያቄው መልስ የአመለካከት ጉዳይ መሆኑ ግልፅ ነው። የእኔ አቋም እጅግ በጣም ቀላል መሆን አለበት እና የ BPM ቆጣሪ የሚፈልገውን ብቻ ማድረግ ነው - በደቂቃዎች ቢቶችን መቁጠር። ስለዚህ ፣ እሱ መሆን ያለበት ብቸኛው ቁልፍ እና የቁጥር እሴት ነው።

ደረጃ 2 - አመክንዮ

BPM ን መገመት በሁለት ተከታታይ ምቶች መካከል ያለውን ጊዜ መለካት እና ከእነዚህ ውስጥ ምን ያህል በደቂቃ ውስጥ እንደሚገጣጠሙ ማስላት ያህል ቀላል ነው።

prev_click = አዲስ ቀን () ፤ const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click)/1000; const bpm = 60/ክፍተት; prev_click = currentTime; ተመላሽ bpm; } get_bpm (); // ለምሳሌ። 120

እኔ ከዚህ ቀደም የወሰድኳቸውን 3 ቀደምት ድብደባዎች እንደዚህ በመሳሰሉ

const አማካይ = 3;

const prev_bpms = [60]; prev_click = አዲስ ቀን () const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / ክፍተት; prev_click = currentTime; ሳለ (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); አማካኝ_ቢፒኤም = prev_bpms.reduce ((acc ፣ cVal) => acc + cVal) / prev_bpms.length; ተመላሽ bpm; } get_bpm (); // ለምሳሌ 120

እንዲሁም ፣ ሁሉም ሰው አዝራሩን መጫን አይፈልግም ፣ ግን ይልቁንስ ቁልፍ

// የቦታ አሞሌ ቀስቅሴ

window.addEventListener ('keypress', (e) => {ከሆነ (e.code === 32) getBPM ();}); // ፈጣን ችሎታ document.querySelector ('. ጠቅታ አዝራር'). ትኩረት ();

አሁን ፣ ተጠቃሚዎች እንዲሁ ገጹ እንደተጫነ የቦታ አሞሌን በመጠቀም መታ ማድረግ ይችላሉ።

ደረጃ 3 የእርስዎን ቢፒኤም ይስሙ

በእርስዎ BPM ውስጥ መታ አድርገውታል ፣ ግን አሁን ከሚወዱት የጊዜ ቆይታ ጋር ለመጨናነቅ መልሰው ማጫወት ይፈልጋሉ።

ይህንን ለማድረግ ድምጽ ማሰማት አለብን። ግን እንዴት? በአሳሹ AudioAPI ውስጥ የተገነቡ ሁለት አማራጮች አሉን ፣ የድምፅ ፋይልን ይጠቀሙ ወይም ማቀነባበሪያን ይፍጠሩ። ቢፕ ለመፍጠር መጀመሪያ ሠራሽተሩን እንጠቀማለን-

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

አውድ ፣ ንዝረት ፣ const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (ቢፕ ፣ bpmInterval); const beep = function () {ከሆነ (! አውድ) አውድ = አዲስ AudioContext (); oscillator = context.createOscillator (); oscillator.type = "ሳይን"; oscillator.start (0); oscillator.connect (አውድ. መድረሻ); setTimeout (oscillator.disconnect ፣ 150 ፣ አውድ። መድረሻ); }

አሁን በምትኩ የኦዲዮ ፋይልን በመጠቀም ተመሳሳይ ነገር እናድርግ-

const ጠቅታ = አዲስ ኦዲዮ ('./ 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 button = document.querySelector ('. player button'); ከሆነ (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (beep, bpmInterval); } ሌላ {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

ደረጃ 4 ሁሉንም በአንድ ላይ ማዋሃድ

አሁን ሁሉንም ባህሪዎች አንድ ላይ አሰባስቦ እና ትንሽ የቅጥ ዘይቤን (እኔ የማላብራራውን) ፣ ይህ የመጨረሻ ምርት አለን -

በጽሁፉ ውስጥ ሰዎች ምን ያህል ኮድ በቀጥታ ማየት እንደሚፈልጉ አላውቅም ፣ ስለዚህ ሙሉውን ኮድ በ https://gitlab.com/t3chflicks/bpm-counter ላይ ያግኙ።

ደረጃ 5 ውጤታማ አጠቃቀም (OSX ተጠቃሚዎች ብቻ)

ከዚህ በፊት ማክሮን ከተጠቀሙ በአገሬው ተወላጅ ዳሽቦርድ መተግበሪያ ላይ ተሰናክለው ይሆናል ፣ ግን ምናልባት ብዙም አልቆዩም ይሆናል።

እኔ በጭራሽ አልተጠቀምኩም… እስከዛሬ። በ Safari በገጹ ላይ በቀኝ ጠቅ ማድረግ ይችላሉ ፣ ይህም አንዳንድ ጊዜ በዳሽቦርድ ውስጥ ክፍት ጨምሮ የድርጊት ምርጫ ብቅ ይላል…

በዚህ ላይ ጠቅ ማድረግ የድረ -ገጽ መግብር ፈጣሪን ያሳየዎታል። ወደ ዳሽቦርድዎ ለማከል የሚፈልጉትን የገጹን ክፍል መምረጥ ይችላሉ። ይህ በጣም አሪፍ ባህሪ ነው ፣ ግን ለኛ ጉዳይ እጅግ በጣም አሪፍ ባህሪ ነው። እኛ የሰራነውን የ BPM ቆጣሪ በመክፈት እንደዚህ ያለ ሳጥን መምረጥ ይችላሉ-

አሁን የ F12 ቁልፍ አቋራጩን ይጠቀሙ። ቡም። በፍጥነት እና በቀላሉ ንዑስ ፕሮግራሞችን እራስዎ መፍጠር እንደዚህ ቀላል ሆኖ አያውቅም።

ደረጃ 6: ማስታወሻዎች

ይህ ለምን የሜትሮኖሚ መልሶ ማጫወት ባህሪን እንደማያካትት እያሰቡ ይሆናል። እኔ በዳሽቦርዱ ውስጥ ለመጠቀም ስሞክር ፕሮግራሙ ድምፁን በአስተማማኝ ሁኔታ አይጫወትም ((ግን ቢያንስ ሎጂክ ያንን ክፍል በቀላሉ ሊያደርግ ይችላል)።

እና በሁለት የተለያዩ መንገዶች ድምጾችን እንዴት መፍጠር እንደምንችል ያሳየሁዎት ምክንያት ሠራሽ ማቀነባበሪያን በመጠቀም የኦዲዮ አውድ ስሪት በዳሽቦርዱ ውስጥ ስለማይሰራ ነው።

በመጨረሻም ፣ በቀላሉ F12 ን ጠቅ ማድረግ እና ቴምብሱን ለማግኘት የቦታ አሞሌውን መጠቀም መቀጠል አይችሉም ፣ ዝቅተኛው ደረጃ የሆነውን አዝራሩን በቀጥታ ጠቅ ማድረግ አለብዎት። ግን እኔ ከአሁን በኋላ ትናንሽ መግብሮችን እንዴት እንደምሠራ ይህ ይመስለኛል። ለዚህ አሪፍ ሀሳቦች ካሉዎት ፣ ሲተገብሯቸው ያሳዩኝ:)

ወደ የመልዕክት ዝርዝራችን ይመዝገቡ!

እና አዎ ፣ T3chFlicks ን ይመልከቱ - እኛ ነገሮችን እንሠራለን!