Kendi Widget'larınızı Kolayca Yapın - Hızlı BPM Sayacı: 6 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:17

Web uygulamaları yaygın bir yerdir, ancak internet erişimi gerektirmeyen web uygulamaları değildir.

Bu yazıda size Vanilla javascript ile basit bir HTML sayfasında nasıl bir BPM Sayacı yaptığımı göstereceğim (buraya bakın). İndirilirse, bu widget çevrimdışı olarak kullanılabilir - oluşturmak isteyen ancak her zaman internet erişimi olmayan müzisyenler için idealdir. Daha da iyisi, (daha önce hiç bu kadar kullanışlı görünmeyen) OSX gösterge tablosu uygulamasını kullanarak bu BPM Sayacı'nın kullanımını ekstra hızlı hale getirebiliriz.

Adım 1: Nasıl Görünmeli?

Açıkçası, sorunun cevabı bir fikir meselesidir. Benim duruşum, süper basit olması ve yalnızca bir BPM sayacının ihtiyaç duyduğu şeyi yapması gerektiğidir: Dakikada Vuruş Sayısı. Bu nedenle, olması gereken tek şey bir düğme ve bir sayım değeridir.

2. Adım: Mantık

BPM'yi tahmin etmek, iki ardışık vuruş arasındaki süreyi ölçmek ve bunlardan kaç tanesini bir dakikaya sığdırabileceğinizi hesaplamak kadar kolaydır.

let prev_click = new Date();const getBPM = function(){ const currentTime = new Date(); const aralığı = (currentTime - önceki_tıklama)/1000; const bpm = 60/aralık; prev_click = currentTime; dönüş bpm; } get_bpm(); // Örneğin. 120

Bunu, önceki 3 vuruşun ortalamasını alarak daha da ileri götürdüm:

sabit ortalama = 3;

const prev_bpms = [60]; let prev_click = new Date() const getBPM = function() { const currentTime = new Date(); const aralığı = (currentTime - önceki_tıklama) / 1000; const bpm = 60 / aralık; prev_click = currentTime; while (prev_bpms.length > prev_bpm_list_max_length) { prev_bpms.shift(); } prev_bpms.push(bpm); ortalama_bpm = önceki_bpms.reduce((acc, cVal) => acc + cVal) / önceki_bpms.length; dönüş bpm; } get_bpm(); // Örneğin. 120

Ayrıca, herkes düğmeye basmak istemez, bunun yerine bir tuşa basabilir:

// boşluk çubuğu tetikleyicisi

window.addEventListener('keypress', (e) => { if(e.code === 32) getBPM(); }); // anlık yetenek Document.querySelector('.clicker button').focus();

Artık kullanıcılar, sayfa yüklenir yüklenmez boşluk çubuğunu kullanarak da dokunabilir.

3. Adım: BPM'nizi Duyun

BPM'nize dokundunuz, ancak şimdi en sevdiğiniz tempoya eşlik edebilmek için onu oynatmak istiyorsunuz.

Bunun için ses çıkarmalıyız. Ama nasıl? AudioAPI tarayıcısında yerleşik iki seçeneğimiz var, bir ses dosyası kullanın veya bir sentezleyici oluşturun. Bir bip sesi oluşturmak için önce sentezleyiciyi kullanacağız:

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

let bağlam, osilatör;const bpm = 60; const bpmAralık = 60/bpm * 1000; //mssetInterval(bip, bpmInterval); const bip = işlev (){ if(!bağlam) bağlam = yeni AudioContext(); osilatör = bağlam.createOscillator(); osilatör.type = "sinüs"; osilatör.start(0); osilatör.connect(bağlam.hedef); setTimeout(oscillator.disconnect, 150, bağlam.hedef); }

Şimdi bunun yerine bir Ses dosyası kullanarak benzer bir şey yapalım:

const tıklama = yeni Ses('./cowbell.mp3');

sabit bpm = 60; const bpmAralık = 60/bpm * 1000; //ms setInterval(bip, bpmInterval);const bip = function (){ click.play(); setTimeout(()=>{ click.pause(); click.currentTime = 0.0; }, 150); };

Sonunda onları kontrol eden mantığı ekleyerek:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = işlev (){ const düğmesi = document.querySelector('.player düğmesi'); if (!isPlayerPlaying){ button.innerHTML = '◼'; bpmRepeaterId = setInterval(bip, bpmInterval); } başka{ button.innerHTML = '▶'; clearInterval(bpmRepeaterId); } isPlayerPlaying = !isPlayerPlaying; };

Adım 4: Hepsini bir araya getirmek

Şimdi tüm özellikleri bir araya getirerek ve biraz stil ekleyerek (ki bunu açıklamayacağım), bu son ürünümüz var:

İnsanların doğrudan makalede ne kadar kod görmek istediğini bilmiyorum, bu yüzden tam kodu https://gitlab.com/t3chflicks/bpm-counter adresinde bulabilirsiniz.

Adım 5: Etkili Kullanım (Yalnızca OSX Kullanıcıları)

Daha önce bir mac kullandıysanız, yerel Dashboard Uygulamasına rastlamış olabilirsiniz, ancak muhtemelen uzun süre kalmayacaksınız.

Gerçekten hiç kullanmadım… şimdiye kadar. Safari'de sayfaya sağ tıklayabilirsiniz, bu bazen gösterge tablosunda açma dahil olmak üzere bir eylem seçiminin açılmasına neden olur…

Buna tıklamak size bir web sayfası widget yaratıcısı gösterecektir. Kontrol panelinize eklemek istediğiniz sayfanın bir bölümünü seçebilirsiniz. Bu oldukça havalı bir özellik, ancak bizim durumumuz için süper harika bir özellik. Az önce yaptığımız BPM sayacını açarak aşağıdaki gibi kutuyu seçebilirsiniz:

Şimdi F12 tuşunun kısayolunu kullanın. BOOM. Widget'ları kendiniz hızlı ve kolay bir şekilde oluşturmak hiç bu kadar kolay olmamıştı.

6. Adım: Notlar

Bunun neden metronom oynatma özelliğini içermediğini merak ediyor olabilirsiniz. Kontrol panelinde kullanmaya çalıştığımda, program sesi güvenilir bir şekilde çalmıyordu:(Ama en azından Logic bu kısmı kolayca yapabilir.

Ve size iki farklı yolla seslerin nasıl oluşturulacağını göstermemin nedeni, bir sentezleyici kullanan Ses Bağlamı sürümünün gösterge panosunda çalışmamasıdır.

Son olarak, sadece F12'ye tıklayıp tempoyu almak için boşluk çubuğunu kullanmaya devam edemezsiniz, doğrudan düğmeyi tıklamalısınız, bu bir düşürmedir. Ama bundan sonra küçük widget'ları bu şekilde yapabileceğimi düşünüyorum. Bunun için harika fikirleriniz varsa, bunları ne zaman uyguladığınızı gösterin:)

Mail Listemize Kaydolun!

Ve evet, T3chFlicks'e göz atın - bir şeyler yapıyoruz!