সহজেই আপনার নিজের উইজেট তৈরি করুন - দ্রুত BPM কাউন্টার: 6 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:56

ওয়েব অ্যাপস সাধারণ জায়গা, কিন্তু যে ওয়েব অ্যাপের ইন্টারনেট অ্যাক্সেসের প্রয়োজন নেই তা নয়।

এই নিবন্ধে আমি আপনাকে দেখিয়েছি কিভাবে আমি একটি সহজ HTML পৃষ্ঠায় ভ্যানিলা জাভাস্ক্রিপ্টের সাথে একটি BPM কাউন্টার তৈরি করেছি (এখানে দেখুন)। যদি ডাউনলোড করা হয়, এই উইজেটটি অফলাইনে ব্যবহার করা যেতে পারে - সঙ্গীতশিল্পীদের জন্য আদর্শ যারা তৈরি করতে চায় কিন্তু সবসময় ইন্টারনেট ব্যবহার করে না। আরও ভাল, ওএসএক্স ড্যাশবোর্ড অ্যাপ ব্যবহার করে (যা আগে কখনোই এতটা দরকারী মনে হয়নি), আমরা এই বিপিএম কাউন্টারটি ব্যবহারে অতিরিক্ত দ্রুত করতে পারি।

ধাপ 1: এটি কেমন হওয়া উচিত?

স্পষ্টতই, প্রশ্নের উত্তর একটি মতামতের বিষয়। আমার অবস্থান হল যে এটি খুব সহজ হওয়া উচিত এবং শুধুমাত্র একটি BPM কাউন্টারের প্রয়োজন: প্রতি মিনিটে বিট গণনা করা উচিত। অতএব, এটি একটি বোতাম এবং একটি গণনা মান হতে হবে।

ধাপ 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 টি পূর্ববর্তী বিটকে গড় করে আরও এগিয়ে নিয়েছি:

গড় গড় = 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; যখন (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) => {if (e.code === 32) getBPM ();}); // তাত্ক্ষণিক ক্ষমতা document.querySelector ('। clicker button')। focus ();

এখন, পৃষ্ঠাগুলি লোড হওয়ার সাথে সাথে ব্যবহারকারীরা স্পেস বার ব্যবহার করে আলতো চাপতে পারেন।

ধাপ 3: আপনার BPM শুনুন

আপনি আপনার BPM এ ট্যাপ করেছেন, কিন্তু এখন আপনি এটিকে আবার খেলতে চান যাতে আপনি আপনার প্রিয় টেম্পোতে জ্যাম করতে পারেন।

এটি করার জন্য, আমাদের অবশ্যই শব্দ করতে হবে। কিন্তু কিভাবে? আমাদের ব্রাউজারে অডিওএপিআইতে দুটি বিকল্প রয়েছে, একটি সাউন্ড ফাইল ব্যবহার করুন বা একটি সিনথেসাইজার তৈরি করুন। আমরা প্রথমে একটি বীপ তৈরি করতে সিনথেসাইজার ব্যবহার করব:

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

যাক প্রসঙ্গ, অসিলেটর; 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 (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

এখন এর পরিবর্তে একটি অডিও ফাইল ব্যবহার করে একই কাজ করি:

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 player button'); যদি (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (বীপ, bpmInterval); } অন্য {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

ধাপ 4: সবকিছু একত্রিত করা

এখন সমস্ত বৈশিষ্ট্য একত্রিত করা এবং একটু স্টাইলিং যোগ করা (যা আমি ব্যাখ্যা করতে যাচ্ছি না), আমাদের এই চূড়ান্ত পণ্য রয়েছে:

আমি জানি না যে লোকেরা আসলে নিবন্ধে কতটা কোড দেখতে চায়, তাই https://gitlab.com/t3chflicks/bpm-counter এ সম্পূর্ণ কোডটি খুঁজুন।

ধাপ 5: কার্যকর ব্যবহার (শুধুমাত্র OSX ব্যবহারকারীরা)

আপনি যদি আগে কোনো ম্যাক ব্যবহার করে থাকেন, তাহলে হয়ত আপনি নেটিভ ড্যাশবোর্ড অ্যাপ জুড়ে হোঁচট খেয়েছেন, কিন্তু আপনি সম্ভবত বেশিদিন থাকবেন না।

আমি সত্যিই এটি ব্যবহার করিনি … এখন পর্যন্ত। সাফারিতে আপনি পৃষ্ঠায় ডান ক্লিক করতে পারেন, যা কখনও কখনও ড্যাশবোর্ডে খোলা সহ একটি অ্যাকশন নির্বাচন পপ আপ করতে পারে …

এটিতে ক্লিক করলে আপনি একটি ওয়েব পেজ উইজেট নির্মাতা প্রকাশ করবেন। আপনি আপনার ড্যাশবোর্ডে যোগ করতে চান এমন পৃষ্ঠার অংশ নির্বাচন করতে পারেন। এটি একটি দুর্দান্ত বৈশিষ্ট্য, কিন্তু আমাদের ক্ষেত্রে, এটি একটি দুর্দান্ত শীতল বৈশিষ্ট্য। আমরা যে BPM কাউন্টারটি তৈরি করেছি তা খোলার মাধ্যমে, আপনি এই বাক্সটি নির্বাচন করতে পারেন:

এখন F12 কী এর শর্টকাট ব্যবহার করুন। বুম। দ্রুত এবং সহজে উইজেট তৈরি করা এত সহজ ছিল না।

ধাপ 6: নোট

আপনি হয়তো ভাবছেন যে কেন এইটিতে মেট্রোনোম প্লেব্যাক বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়নি। যখন আমি ড্যাশবোর্ডে এটি ব্যবহার করার চেষ্টা করেছি, প্রোগ্রামটি নির্ভরযোগ্যভাবে অডিও চালাবে না: (কিন্তু অন্তত যুক্তি সহজেই সেই অংশটি করতে পারে।

এবং আমি আপনাকে দেখিয়েছি যে কিভাবে দুটি ভিন্ন উপায়ে শব্দ তৈরি করতে হয় কারণ সিনথেসাইজার ব্যবহার করে অডিও কনটেক্সট সংস্করণ ড্যাশবোর্ডের ভিতরে কাজ করবে না।

অবশেষে, আপনি কেবল F12 ক্লিক করতে পারবেন না এবং টেম্পো পেতে স্পেস বার ব্যবহার করতে পারবেন না, আপনাকে সরাসরি বোতামটি ক্লিক করতে হবে, যা একটি ডাউনগ্রেড। কিন্তু আমি মনে করি এইভাবে আমি এখন থেকে সামান্য উইজেট তৈরি করতে পারি। আপনার যদি এর জন্য কোনও দুর্দান্ত ধারণা থাকে তবে আপনি কখন সেগুলি প্রয়োগ করেছেন তা আমাকে দেখান:)

আমাদের মেইলিং লিস্টে সাইন আপ করুন!

এবং হ্যাঁ, T3chFlicks দেখুন - আমরা জিনিস তৈরি করি!