Tee omat widgetit helposti - nopea BPM -laskuri: 6 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Verkkosovellukset ovat yleisiä, mutta verkkosovellukset, jotka eivät vaadi Internet -yhteyttä, eivät ole.

Tässä artikkelissa näytän sinulle, kuinka tein BPM -laskurin yksinkertaisella HTML -sivulla yhdessä vanilja -javascriptin kanssa (katso täältä). Jos tämä widget on ladattu, sitä voidaan käyttää offline -tilassa - ihanteellinen muusikoille, jotka haluavat luoda, mutta joilla ei aina ole Internet -yhteyttä. Vielä parempi, käyttämällä OSX -hallintapaneelisovellusta (joka ei koskaan tuntunut niin hyödylliseltä), voimme tehdä tästä BPM -laskurista erittäin nopean käyttää.

Vaihe 1: Miltä sen pitäisi näyttää?

On selvää, että vastaus kysymykseen on mielipidekysymys. Asenteeni on, että sen pitäisi olla erittäin yksinkertaista ja tehdä vain sitä, mitä BPM -laskuri tarvitsee: laskea lyöntejä minuutissa. Siksi sen tarvitsee olla vain painike ja laskenta -arvo.

Vaihe 2: Logiikka

BPM: n arvioiminen on yhtä helppoa kuin kahden peräkkäisen lyönnin välisen ajan mittaaminen ja sen laskeminen, kuinka monta näistä mahtuu minuuttiin.

anna prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click)/1000; const bpm = 60/väli; prev_click = nykyinen aika; paluu bpm; } get_bpm (); // esim. 120

Vein tämän pidemmälle keskiarvoistamalla kolme edellistä lyöntiä näin:

const keskiarvo = 3;

const prev_bpms = [60]; anna prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / väli; prev_click = nykyinen aika; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); keskimääräinen bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; paluu bpm; } get_bpm (); // esim. 120

Kaikki eivät myöskään halua painaa painiketta, mutta ehkä sen sijaan näppäintä:

// välilyöntinäppäin

window.addEventListener ('näppäimen painallus', (e) => {jos (e.koodi === 32) getBPM ();}); // välittömät valmiudet document.querySelector ('. napsautuspainike'). focus ();

Nyt käyttäjät voivat myös napauttaa välilyöntinäppäintä heti, kun sivu on ladattu.

Vaihe 3: Kuuntele BPM

Olet napauttanut BPM: ääsi, mutta haluat nyt toistaa sen, jotta voit hillitä suosikkitempoasi.

Tätä varten meidän on saatava ääni. Mutta miten? Meillä on kaksi vaihtoehtoa sisäänrakennettuun AudioAPI -selaimeen, käyttää äänitiedostoa tai luoda syntetisaattori. Käytämme ensin syntetisaattoria piippauksen luomiseen:

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

anna kontekstin, oskillaattori, const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (piippaus, bpmInterval); const piippaus = toiminto () {jos (! konteksti) konteksti = uusi äänikonteksti (); oskillaattori = konteksti.createOscillator (); oscillator.type = "sini"; oskillaattori.start (0); oskillaattori.yhteys (konteksti.kohde); setTimeout (oskillaattori.disconnect, 150, konteksti.kohde); }

Tehdään nyt samanlainen asia käyttämällä äänitiedostoa:

const click = uusi ääni (’./ cowbell.mp3’);

const bpm = 60; const bpmInterval = 60/bpm * 1000; // ms setInterval (piip, bpmInterval); const beep = function () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Lopuksi lisätään niitä ohjaava logiikka:

// JSlet isPlayerPlaying = false;

anna bpmRepeaterId; const togglePlayerOutput = function () {const -painike = document.querySelector ('. pelaaja -painike'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (piippaus, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Vaihe 4: Laita kaikki yhteen

Kun nyt yhdistetään kaikki ominaisuudet yhteen ja lisätään hieman tyyliä (jota en aio selittää), meillä on tämä lopputuote:

En tiedä kuinka paljon koodia ihmiset todella haluavat nähdä suoraan artikkelissa, joten etsi koko koodi osoitteesta

Vaihe 5: Tehokas käyttö (vain OSX -käyttäjät)

Jos olet käyttänyt Macia aiemmin, olet ehkä törmännyt alkuperäiseen Dashboard -sovellukseen, mutta et todennäköisesti ole pysynyt pitkään.

En ole oikeastaan koskaan käyttänyt sitä … tähän asti. Safarissa voit napsauttaa sivua hiiren kakkospainikkeella, mikä aiheuttaa joskus toimintovalinnan avautumisen, mukaan lukien avaamisen kojelaudassa…

Tämän napsauttaminen paljastaa sinulle verkkosivun widgetin luojan. Voit valita sivun osan, jonka haluat lisätä hallintapaneeliin. Tämä on melko hieno ominaisuus, mutta meidän tapauksessamme se on erittäin hieno ominaisuus. Kun avaat juuri tekemämme BPM -laskurin, voit valita laatikon seuraavasti:

Käytä nyt F12 -näppäimen pikanäppäintä. PUOMI. Widgetien luominen itse ei ole koskaan ollut näin helppoa, nopeasti ja helposti.

Vaihe 6: Huomautuksia

Saatat ihmetellä, miksi tämä ei sisällä metronomitoisto -ominaisuutta. Kun yritin käyttää sitä kojelaudassa, ohjelma ei toistanut ääntä luotettavasti: (Mutta ainakin Logic voi tehdä tämän osan helposti.

Ja syy, miksi näytin sinulle kuinka luoda ääniä kahdella eri tavalla, on se, että syntetisaattoria käyttävä äänikontekstiversio ei toimisi kojelaudan sisällä.

Lopuksi, et voi yksinkertaisesti napsauttaa F12 -näppäintä ja siirtyä käyttämään välilyöntinäppäintä tempon saamiseksi, sinun on napsautettava painiketta suoraan, mikä on alennus. Mutta luulen, että tästä lähtien voin tehdä pieniä widgettejä. Jos sinulla on hyviä ideoita tähän, näytä minulle, kun olet toteuttanut ne:)

Rekisteröidy postituslistallemme!

Ja kyllä, tutustu T3chFlicksiin - me teemme tavaraa!