Φτιάξτε τα δικά σας widget εύκολα - Ταχύμετρο μετρητή BPM: 6 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:32

Οι εφαρμογές Ιστού είναι κοινές τοποθεσίες, αλλά οι εφαρμογές ιστού που δεν απαιτούν πρόσβαση στο Διαδίκτυο δεν είναι.

Σε αυτό το άρθρο σας δείχνω πώς έφτιαξα έναν μετρητή BPM σε μια απλή σελίδα HTML σε συνδυασμό με javascript βανίλιας (δείτε εδώ). Εάν γίνει λήψη, αυτό το widget μπορεί να χρησιμοποιηθεί εκτός σύνδεσης - ιδανικό για μουσικούς που θέλουν να δημιουργήσουν αλλά δεν έχουν πάντα πρόσβαση στο Διαδίκτυο. Ακόμα καλύτερα, χρησιμοποιώντας την εφαρμογή ταμπλό OSX (η οποία δεν φαινόταν ποτέ τόσο χρήσιμη πριν), μπορούμε να κάνουμε αυτόν τον μετρητή BPM πολύ γρήγορο στη χρήση.

Βήμα 1: Πώς πρέπει να μοιάζει;

Προφανώς, η απάντηση στην ερώτηση είναι θέμα γνώμης. Η στάση μου είναι ότι πρέπει να είναι εξαιρετικά απλή και να κάνει μόνο ό, τι χρειάζεται ένας μετρητής BPM: να μετράει τους ρυθμούς ανά λεπτό. Επομένως, το μόνο που χρειάζεται είναι ένα κουμπί και μια τιμή καταμέτρησης.

Βήμα 2: Η λογική

Η εκτίμηση του BPM είναι τόσο εύκολη όσο η μέτρηση του χρόνου μεταξύ δύο διαδοχικών παλμών και ο υπολογισμός πόσων από αυτούς θα μπορούσατε να χωρέσετε σε ένα λεπτό.

ας prev_click = νέα ημερομηνία (); const getBPM = λειτουργία () {const currentTime = νέα ημερομηνία (); const interval = (currentTime - prev_click)/1000; const bpm = 60/διάστημα? prev_click = currentTime; επιστροφές σ.α.λ. } get_bpm (); // π.χ. 120

Το πήρα περαιτέρω κάνοντας μέσο όρο τους 3 προηγούμενους ρυθμούς όπως αυτό:

μέσος όρος const = 3;

const prev_bpms = [60]; ας prev_click = νέα ημερομηνία () const getBPM = λειτουργία () {const currentTime = νέα ημερομηνία (); const interval = (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 ();}}; // στιγμιαία ικανότητα document.querySelector ('. κουμπί clicker'). εστίαση ();

Τώρα, οι χρήστες μπορούν επίσης να πατήσουν χρησιμοποιώντας το πλήκτρο διαστήματος μόλις φορτωθεί η σελίδα.

Βήμα 3: Ακούστε το BPM σας

Έχετε πατήσει το BPM σας, αλλά τώρα θέλετε να το παίξετε για να μπορέσετε να μπείτε στο αγαπημένο σας τέμπο.

Για να γίνει αυτό, πρέπει να κάνουμε ήχο. Αλλά πως? Έχουμε δύο επιλογές ενσωματωμένες στο πρόγραμμα περιήγησης AudioAPI, χρήση αρχείου ήχου ή δημιουργία συνθεσάιζερ. Θα χρησιμοποιήσουμε πρώτα το συνθεσάιζερ για να δημιουργήσουμε ένα μπιπ:

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

ας περιβάλλον, ταλαντωτής, const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (μπιπ, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); ταλαντωτής = context.createOscillator (); oscillator.type = "ημιτονοειδές"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Τώρα ας κάνουμε ένα παρόμοιο πράγμα χρησιμοποιώντας ένα αρχείο ήχου:

const click = νέο ioχος (‘./ cowbell.mp3’);

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (μπιπ, bpmInterval); const μπιπ = λειτουργία () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Τέλος προσθέτοντας τη λογική που τα ελέγχει:

// JSlet isPlayerPlaying = false;

ας bpmRepeaterId? const togglePlayerOutput = λειτουργία () {const button = document.querySelector ("κουμπί. player"); εάν (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (μπιπ, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Βήμα 4: Το βάζουμε όλα μαζί

Τώρα βάζοντας όλα τα χαρακτηριστικά μαζί και προσθέτοντας λίγο στυλ (το οποίο δεν πρόκειται να εξηγήσω), έχουμε αυτό το τελικό προϊόν:

Δεν ξέρω πόσο κώδικα θέλουν πραγματικά οι άνθρωποι να δουν απευθείας στο άρθρο, οπότε βρείτε τον πλήρη κώδικα στη διεύθυνση

Βήμα 5: Αποτελεσματική χρήση (Μόνο για χρήστες OSX)

Εάν είχατε χρησιμοποιήσει Mac πριν, ίσως να έχετε πέσει πάνω στην εγγενή εφαρμογή Πίνακας ελέγχου, αλλά πιθανότατα δεν θα έχετε μείνει πολύ.

Δεν το έχω χρησιμοποιήσει ποτέ … μέχρι τώρα. Στο Safari μπορείτε να κάνετε δεξί κλικ στη σελίδα, η οποία μερικές φορές προκαλεί την εμφάνιση μιας επιλογής ενέργειας, συμπεριλαμβανομένου του ανοίγματος στον πίνακα ελέγχου…

Κάνοντας κλικ σε αυτό θα εμφανιστεί σε εσάς ένας δημιουργός γραφικών στοιχείων ιστοσελίδων. Μπορείτε να επιλέξετε μέρος της σελίδας που θέλετε να προσθέσετε στον πίνακα ελέγχου σας. Αυτή είναι μια πολύ ωραία λειτουργία, αλλά για την περίπτωσή μας, είναι μια εξαιρετικά δροσερή λειτουργία. Ανοίγοντας τον μετρητή BPM που μόλις κάναμε, μπορείτε να επιλέξετε το πλαίσιο όπως αυτό:

Τώρα χρησιμοποιήστε τη συντόμευση του πλήκτρου F12. ΚΕΡΑΙΑ. Ποτέ δεν ήταν τόσο εύκολο να δημιουργήσετε μόνοι σας widgets, γρήγορα και εύκολα.

Βήμα 6: Σημειώσεις

Mayσως αναρωτιέστε γιατί αυτό δεν περιλαμβάνει τη λειτουργία αναπαραγωγής μετρονόμου. Όταν προσπάθησα να το χρησιμοποιήσω στον πίνακα ελέγχου, το πρόγραμμα δεν θα έπαιζε αξιόπιστα τον ήχο: (Αλλά τουλάχιστον η Λογική μπορεί εύκολα να κάνει αυτό το κομμάτι.

Και ο λόγος για τον οποίο σας έδειξα πώς να δημιουργείτε ήχους με δύο διαφορετικούς τρόπους είναι επειδή η έκδοση Audio Context χρησιμοποιώντας ένα συνθεσάιζερ δεν θα λειτουργούσε μέσα στον πίνακα ελέγχου.

Τέλος, δεν μπορείτε απλά να κάνετε κλικ στο F12 και να προχωρήσετε στη χρήση του διαστήματος για να λάβετε το τέμπο, πρέπει να κάνετε απευθείας κλικ στο κουμπί, το οποίο είναι υποβάθμιση. Αλλά νομίζω ότι έτσι μπορεί να φτιάχνω μικρά widgets από εδώ και πέρα. Αν έχετε όμορφες ιδέες για αυτό, δείξτε μου πότε τις εφαρμόσατε:)

Εγγραφείτε στη λίστα αλληλογραφίας μας!

Και ναι, δείτε το T3chFlicks - φτιάχνουμε πράγματα!