สร้างวิดเจ็ตของคุณเองได้อย่างง่ายดาย - ตัวนับ BPM ที่รวดเร็ว: 6 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

เว็บแอพเป็นเรื่องธรรมดา แต่เว็บแอพที่ไม่ต้องการการเข้าถึงอินเทอร์เน็ตนั้นไม่ใช่

ในบทความนี้ ผมจะแสดงให้คุณเห็นถึงวิธีการสร้าง BPM Counter ในหน้า HTML แบบง่ายๆ ควบคู่ไปกับ vanilla javascript (ดูที่นี่) หากดาวน์โหลด วิดเจ็ตนี้สามารถใช้แบบออฟไลน์ได้ เหมาะสำหรับนักดนตรีที่ต้องการสร้างแต่ไม่สามารถเข้าถึงอินเทอร์เน็ตได้ตลอดเวลา ยิ่งไปกว่านั้น ด้วยการใช้แอปแดชบอร์ด OSX (ซึ่งไม่เคยมีประโยชน์มาก่อน) เราสามารถทำให้ตัวนับ BPM นี้ใช้งานได้รวดเร็วยิ่งขึ้น

ขั้นตอนที่ 1: ควรมีหน้าตาเป็นอย่างไร?

เห็นได้ชัดว่าคำตอบของคำถามเป็นเรื่องของความคิดเห็น จุดยืนของฉันคือมันควรจะเรียบง่ายสุด ๆ และทำในสิ่งที่ตัวนับ BPM ต้องการเท่านั้น: นับจังหวะต่อนาที ดังนั้น สิ่งที่ต้องมีคือปุ่มและค่าการนับ

ขั้นตอนที่ 2: ตรรกะ

การประมาณ BPM นั้นง่ายพอๆ กับการวัดเวลาระหว่างสองจังหวะที่ต่อเนื่องกัน และการคำนวณว่าคุณสามารถใส่สิ่งเหล่านี้ได้กี่จังหวะในหนึ่งนาที

ให้ prev_click = วันที่ใหม่ ();const getBPM = ฟังก์ชัน () { const currentTime = วันที่ใหม่ (); ช่วง const = (currentTime - prev_click)/1000; const bpm = 60/ช่วง; prev_click = เวลาปัจจุบัน; กลับต่อนาที; } get_bpm(); // เช่น. 120

ฉันทำสิ่งนี้ต่อไปโดยหาค่าเฉลี่ย 3 จังหวะก่อนหน้าเช่นนี้:

const เฉลี่ย = 3;

const prev_bpms = [60]; ให้ prev_click = วันที่ใหม่ () const getBPM = function () { const currentTime = วันที่ใหม่ (); ช่วง const = (currentTime - prev_click) / 1000; const bpm = 60 / ช่วง; prev_click = เวลาปัจจุบัน; ในขณะที่ (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; กลับต่อนาที; } get_bpm(); // เช่น. 120

ไม่ใช่ทุกคนที่ต้องการกดปุ่ม แต่อาจเป็นปุ่มแทน:

// สเปซบาร์ทริกเกอร์

window.addEventListener('keypress', (e) => { if(e.code === 32) getBPM(); }); // ความสามารถทันที document.querySelector('.clicker button').focus();

ตอนนี้ผู้ใช้ยังสามารถแตะโดยใช้แป้นเว้นวรรคทันทีที่หน้าโหลด

ขั้นตอนที่ 3: ฟัง BPM. ของคุณ

คุณได้แตะ BPM ของคุณแล้ว แต่ตอนนี้คุณต้องการเล่นกลับเพื่อให้คุณสามารถไปกับจังหวะที่คุณชื่นชอบได้

การทำเช่นนี้เราต้องทำให้เสียง แต่อย่างไร เรามีสองตัวเลือกในเบราว์เซอร์ AudioAPI ใช้ไฟล์เสียงหรือสร้างโปรแกรมสังเคราะห์ ก่อนอื่นเราจะใช้ซินธิไซเซอร์เพื่อสร้างเสียงบี๊บ:

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

ให้บริบท oscillator;const bpm = 60; const bpmInterval = 60/bpm * 1,000; //mssetInterval(บี๊บ, bpmInterval); เสียงบี๊บ const = ฟังก์ชั่น (){ if(!context) บริบท = ใหม่ AudioContext (); oscillator = บริบท createOscillator (); oscillator.type = "ไซน์"; oscillator.start(0); oscillator.connect (บริบทปลายทาง); setTimeout(oscillator.disconnect, 150, บริบท.destination); }

ตอนนี้มาทำสิ่งที่คล้ายกันโดยใช้ไฟล์เสียงแทน:

const click = เสียงใหม่ ('./cowbell.mp3');

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

ในที่สุดก็เพิ่มตรรกะที่ควบคุมพวกเขา:

// JSlet isPlayerPlaying = เท็จ;

ให้ bpmRepeaterId; const togglePlayerOutput = ฟังก์ชั่น () { ปุ่ม const = document.querySelector ('.player ปุ่ม'); ถ้า (!isPlayerPlaying){ button.innerHTML = '◼'; bpmRepeaterId = setInterval (บี๊บ, bpmInterval); } อื่น { button.innerHTML = '▶'; clearInterval(bpmRepeaterId); } isPlayerPlaying = !isPlayerPlaying; };

ขั้นตอนที่ 4: นำทุกอย่างมารวมกัน

ตอนนี้รวมคุณสมบัติทั้งหมดเข้าด้วยกันและเพิ่มสไตล์เล็กน้อย (ซึ่งฉันจะไม่อธิบาย) เรามีผลิตภัณฑ์ขั้นสุดท้ายนี้:

ฉันไม่รู้ว่าผู้คนต้องการดูโค้ดมากแค่ไหนในบทความโดยตรง ดังนั้นค้นหาโค้ดฉบับเต็มได้ที่

ขั้นตอนที่ 5: การใช้งานอย่างมีประสิทธิภาพ (ผู้ใช้ OSX เท่านั้น)

หากคุณเคยใช้ Mac มาก่อน คุณอาจเจอแอพ Dashboard แบบเนทีฟ แต่คุณคงอยู่ได้ไม่นาน

ฉันไม่เคยใช้มันจริงๆ…จนถึงตอนนี้ ใน Safari คุณสามารถคลิกขวาที่หน้า ซึ่งบางครั้งทำให้การเลือกการกระทำปรากฏขึ้นรวมถึงเปิดในแดชบอร์ด…

การคลิกที่นี่จะแสดงให้คุณเห็นผู้สร้างวิดเจ็ตของหน้าเว็บ คุณสามารถเลือกส่วนของเพจที่คุณต้องการเพิ่มลงในแดชบอร์ดของคุณได้ นี่เป็นฟีเจอร์ที่เจ๋งมาก แต่สำหรับกรณีของเรา มันเป็นฟีเจอร์ที่เจ๋งมาก เมื่อเปิดตัวนับ BPM ที่เราเพิ่งสร้าง คุณสามารถเลือกกล่องดังนี้:

ตอนนี้ใช้ทางลัดของปุ่ม F12 บูม. การสร้างวิดเจ็ตด้วยตัวคุณเองไม่เคยง่ายขนาดนี้มาก่อน รวดเร็วและง่ายดาย

ขั้นตอนที่ 6: หมายเหตุ

คุณอาจสงสัยว่าเหตุใดจึงไม่มีคุณลักษณะการเล่นเครื่องเมตรอนอม เมื่อฉันพยายามใช้ในแดชบอร์ด โปรแกรมจะไม่เล่นเสียงอย่างน่าเชื่อถือ:(แต่อย่างน้อย Logic ก็สามารถทำส่วนนั้นได้อย่างง่ายดาย

และเหตุผลที่ฉันแสดงให้คุณเห็นถึงวิธีสร้างเสียงในสองวิธีที่แตกต่างกันก็เพราะเวอร์ชันบริบทเสียงที่ใช้ซินธิไซเซอร์จะไม่ทำงานภายในแดชบอร์ด

สุดท้ายนี้ คุณไม่สามารถเพียงแค่คลิก F12 และใช้แป้นเว้นวรรคเพื่อรับจังหวะได้ คุณต้องคลิกปุ่มโดยตรง ซึ่งเป็นการปรับลดรุ่น แต่ฉันคิดว่านี่อาจเป็นวิธีที่ฉันสร้างวิดเจ็ตเล็กๆ น้อยๆ นับจากนี้เป็นต้นไป หากคุณมีไอเดียเจ๋งๆ สำหรับสิ่งนี้ โปรดแสดงให้ฉันเห็นเมื่อคุณได้นำไปใช้แล้ว:)

ลงชื่อสมัครใช้รายชื่อผู้รับจดหมายของเรา!

และใช่ ลองดู T3chFlicks - เราทำสิ่งต่างๆ เอง!