შექმენით თქვენი საკუთარი ვიჯეტები მარტივად - სწრაფი BPM მრიცხველი: 6 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:15

ვებ პროგრამები ჩვეულებრივი ადგილია, მაგრამ ვებ პროგრამები, რომლებიც არ საჭიროებს ინტერნეტს, არ არის.

ამ სტატიაში მე გაჩვენებთ თუ როგორ გავაკეთე BPM Counter მარტივი HTML გვერდზე ვანილის javascript– თან ერთად (იხ. აქ). გადმოტვირთვის შემთხვევაში, ეს ვიჯეტი შეიძლება გამოყენებულ იქნას ხაზგარეშე - იდეალურია მუსიკოსებისთვის, რომელთაც სურთ შექმნან, მაგრამ ყოველთვის არ აქვთ ინტერნეტი. კიდევ უკეთესი, OSX დაფის პროგრამის გამოყენებით (რომელიც აქამდე არც თუ ისე სასარგებლო ჩანდა), ჩვენ შეგვიძლია გამოვიყენოთ ეს BPM Counter უფრო სწრაფად გამოსაყენებლად.

ნაბიჯი 1: როგორი უნდა იყოს ის?

ცხადია, კითხვაზე პასუხი აზრის საკითხია. ჩემი პოზიცია ის არის, რომ ის უნდა იყოს სუპერ მარტივი და მხოლოდ ის გააკეთოს, რაც BPM მრიცხველს სჭირდება: დაითვალოს დარტყმები წუთში. აქედან გამომდინარე, ყველაფერი რაც უნდა იყოს არის ღილაკი და დათვლის მნიშვნელობა.

ნაბიჯი 2: ლოგიკა

BPM- ის შეფასება ისეთივე ადვილია, როგორც დროის გაზომვა ორ თანმიმდევრულ დარტყმას შორის და გამოთვლა რამდენი მათგანი შეიძლება მოთავსდეს წუთში.

მოდით prev_click = ახალი თარიღი (); const getBPM = ფუნქცია () {const currentTime = ახალი თარიღი (); const ინტერვალი = (currentTime - prev_click)/1000; const bpm = 60/ინტერვალი; prev_click = currentTime; დაბრუნება წუთში; } get_bpm (); // მაგალითად. 120

მე გავაგრძელე ეს საშუალოდ 3 წინა დარტყმის მსგავსად:

საშუალო საშუალო = 3;

const prev_bpms = [60]; მოდით prev_click = ახალი თარიღი () const getBPM = ფუნქცია () {const currentTime = ახალი თარიღი (); 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; დაბრუნება წუთში; } get_bpm (); // მაგალითად. 120

ასევე, ყველას არ უნდა დააჭიროს ღილაკს, მაგრამ შესაძლოა სამაგიეროდ გასაღები:

// სივრცის ბარი ტრიგერი

window.addEventListener ("გასაღები", (e) => {if (e.code === 32) getBPM ();}}); // მყისიერი უნარის დოკუმენტი. querySelector ('. დაწკაპუნების ღილაკი'). ფოკუსი ();

ახლა, მომხმარებლებს შეუძლიათ ასევე შეეხონ სივრცის ზოლის გამოყენებით, როგორც კი გვერდი დატვირთულია.

ნაბიჯი 3: მოუსმინეთ თქვენს BPM

თქვენ დააკაკუნეთ თქვენს BPM– ზე, მაგრამ ახლა გსურთ მისი დაკვრა, რათა შეძლოთ თქვენი საყვარელი ტემპით დაკავება.

ამისათვის ჩვენ უნდა გამოვიღოთ ხმა. Მაგრამ როგორ? ჩვენ გვაქვს ბრაუზერში AudioAPI ჩაშენებული ორი ვარიანტი, გამოვიყენოთ ხმის ფაილი ან შევქმნათ სინთეზატორი. ჩვენ პირველად გამოვიყენებთ სინთეზატორს სიგნალის შესაქმნელად:

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

ნება კონტექსტი, oscillator; const bpm = 60; const bpm ინტერვალი = 60/bpm * 1000; // mssetInterval (beep, bpmInterval); const beep = ფუნქცია () {if (! კონტექსტი) კონტექსტი = ახალი AudioContext (); oscillator = context.createOscillator (); oscillator.type = "სინუსი"; oscillator.start (0); oscillator.connect (კონტექსტი. დანიშნულება); setTimeout (oscillator. disconnect, 150, context.destination); }

ახლა მოდით გავაკეთოთ მსგავსი რამ აუდიო ფაილის გამოყენებით:

const click = new Audio (‘./ cowbell.mp3’);

const bpm = 60; const bpm ინტერვალი = 60/bpm * 1000; // ms setInterval (beep, bpmInterval); const beep = ფუნქცია () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

ბოლოს დავამატე ლოგიკა, რომელიც აკონტროლებს მათ:

// JSlet isPlayerPlaying = ყალბი;

ნება bpmRepeaterId; const togglePlayerOutput = ფუნქცია () {const ღილაკი = document.querySelector ('. პლეერის ღილაკი'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (სიგნალი, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

ნაბიჯი 4: ყველაფერი ერთად ააწყვეთ

ახლა ყველა მახასიათებელს ერთად ვათავსებთ და ვამატებ ცოტა სტილს (რომლის ახსნას არ ვაპირებ), ჩვენ გვაქვს ეს საბოლოო პროდუქტი:

მე არ ვიცი რამდენი კოდის ნახვა სურთ ადამიანებს პირდაპირ სტატიაში, ამიტომ იპოვნეთ სრული კოდი

ნაბიჯი 5: ეფექტური გამოყენება (მხოლოდ OSX მომხმარებლებისთვის)

თუ თქვენ ადრე იყენებდით მაკს, შესაძლოა წააწყდეთ დედათა საინფორმაციო დაფის აპს, მაგრამ ალბათ დიდხანს არ დარჩებით.

მე ნამდვილად არასოდეს გამომიყენებია … აქამდე. Safari– ში შეგიძლიათ დააწკაპუნოთ მარჯვენა გვერდზე, რაც ზოგჯერ იწვევს მოქმედების შერჩევის გამოჩენას, მათ შორის დაფაზე გახსნის ჩათვლით…

მასზე დაჭერით გამოჩნდება თქვენ ვებ გვერდის ვიჯეტის შემქმნელი. თქვენ შეგიძლიათ აირჩიოთ იმ გვერდის ნაწილი, რომლის დამატებაც გსურთ თქვენს დაფაზე. ეს არის საკმაოდ მაგარი ფუნქცია, მაგრამ ჩვენი შემთხვევისთვის, ეს არის სუპერ მაგარი ფუნქცია. ჩვენ მიერ გაკეთებული BPM მრიცხველის გახსნა, შეგიძლიათ აირჩიოთ ყუთი ასე:

ახლა გამოიყენეთ F12 კლავიშის მალსახმობი. BOOM არასოდეს ყოფილა ასე ადვილი ვიჯეტების შექმნა, სწრაფად და მარტივად.

ნაბიჯი 6: შენიშვნები

თქვენ შეიძლება გაინტერესებთ, რატომ არ შეიცავს ეს მეტრონომის დაკვრის ფუნქციას. როდესაც ვცდილობდი გამომეყენებინა იგი საინფორმაციო დაფაზე, პროგრამა საიმედოდ არ გაუშვებდა აუდიოს: (მაგრამ ყოველ შემთხვევაში ლოგიკას შეუძლია ადვილად შეასრულოს ეს ნაწილი.

და მიზეზი, რის გამოც მე გაჩვენეთ, თუ როგორ უნდა შექმნათ ხმები ორი განსხვავებული გზით არის ის, რომ აუდიო კონტექსტის ვერსია სინთეზატორის გამოყენებით არ იმუშავებს დაფის შიგნით.

დაბოლოს, თქვენ არ შეგიძლიათ უბრალოდ დააჭიროთ F12- ს და განაგრძოთ სივრცის ზოლის გამოყენება ტემპის მისაღებად, თქვენ უნდა დააჭიროთ პირდაპირ ღილაკს, რომელიც არის დაქვეითება. მაგრამ მე ვფიქრობ, რომ ეს არის ის, თუ როგორ ვაკეთებ პატარა ვიჯეტებს ამიერიდან. თუ თქვენ გაქვთ რაიმე მაგარი იდეა ამის შესახებ, მაჩვენეთ როდის განახორციელებთ მათ:)

დარეგისტრირდით ჩვენს საფოსტო სიაში!

და ჰო, ნახე T3chFlicks - ჩვენ ვქმნით ნივთებს!