Buat Widget Anda Sendiri dengan Mudah - Penghitung BPM Cepat: 6 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:53

Aplikasi web adalah tempat yang umum, tetapi aplikasi web yang tidak memerlukan akses internet tidak.

Pada artikel ini saya menunjukkan kepada Anda bagaimana saya membuat Penghitung BPM di halaman HTML sederhana yang digabungkan dengan javascript vanilla (lihat di sini). Jika diunduh, widget ini dapat digunakan secara offline - ideal untuk musisi yang ingin berkreasi tetapi tidak selalu memiliki akses internet. Lebih baik lagi, dengan menggunakan aplikasi dasbor OSX (yang sepertinya tidak pernah berguna sebelumnya), kita dapat membuat Penghitung BPM ini lebih cepat digunakan.

Langkah 1: Seperti Apa Seharusnya?

Jelas, jawaban atas pertanyaan adalah masalah pendapat. Sikap saya adalah bahwa itu harus sangat sederhana dan hanya melakukan apa yang perlu dilakukan oleh penghitung BPM: menghitung Detak Per Menit. Oleh karena itu, yang dibutuhkan hanyalah tombol dan nilai hitungan.

Langkah 2: Logika

Memperkirakan BPM semudah mengukur waktu antara dua ketukan berurutan dan menghitung berapa banyak yang dapat Anda muat dalam satu menit.

let prev_click = new Date();const getBPM = function(){ const currentTime = new Date(); const interval = (currentTime - prev_click)/1000; const bpm = 60/interval; prev_click = waktu saat ini; kembali bpm; } get_bpm(); // misalnya 120

Saya mengambil ini lebih jauh dengan rata-rata 3 ketukan sebelumnya seperti ini:

rata-rata konstanta = 3;

const prev_bpms = [60]; let prev_click = new Date() const getBPM = function() { const currentTime = new Date(); interval const = (waktu saat ini - prev_click) / 1000; const bpm = 60 / interval; prev_click = waktu saat ini; 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; kembali bpm; } get_bpm(); // misalnya 120

Juga, tidak semua orang ingin menekan tombol tetapi mungkin sebuah tombol:

// pemicu bilah spasi

window.addEventListener('tekanan tombol', (e) => { if(e.code === 32) getBPM(); }); // kemampuan instan document.querySelector('.clicker button').focus();

Sekarang, pengguna juga dapat mengetuk menggunakan bilah spasi segera setelah halaman dimuat.

Langkah 3: Dengarkan BPM Anda

Anda telah mengetuk BPM Anda, tetapi sekarang Anda ingin memainkannya kembali sehingga Anda dapat memainkan tempo favorit Anda.

Untuk melakukan ini, kita harus membuat suara. Tapi bagaimana caranya? Kami memiliki dua opsi yang terpasang di browser AudioAPI, gunakan file suara atau buat synthesizer. Pertama-tama kita akan menggunakan synthesizer untuk membuat bunyi bip:

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

biarkan konteks, osilator; const bpm = 60; const bpmInterval = 60/bpm * 1000; //mssetInterval(bip, bpmInterval); const beep = function (){ if(!context) context = new AudioContext(); osilator = context.createOscillator(); oscillator.type = "sinus"; osilator.start(0); oscillator.connect(context.destination); setTimeout(oscillator.disconnect, 150, context.destination); }

Sekarang mari kita lakukan hal serupa menggunakan file Audio sebagai gantinya:

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

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

Akhirnya menambahkan logika yang mengontrol mereka:

// JSlet isPlayerPlaying = false;

biarkan bpmRepeaterId; const togglePlayerOutput = function (){ const button = document.querySelector('.player button'); if (!isPlayerPlaying){ button.innerHTML = '◼'; bpmRepeaterId = setInterval(bip, bpmInterval); } else{ button.innerHTML = '▶'; clearInterval(bpmRepeaterId); } isPlayerPlaying = !isPlayerPlaying; };

Langkah 4: Menyatukan Semuanya

Sekarang menyatukan semua fitur dan menambahkan sedikit gaya (yang tidak akan saya jelaskan), kami memiliki produk akhir ini:

Saya tidak tahu berapa banyak kode yang benar-benar ingin dilihat orang langsung di artikel, jadi temukan kode lengkapnya di

Langkah 5: Penggunaan Efektif (Hanya Pengguna OSX)

Jika Anda pernah menggunakan mac sebelumnya, Anda mungkin menemukan Aplikasi Dasbor asli, tetapi Anda mungkin tidak akan bertahan lama.

Saya tidak pernah benar-benar menggunakannya … sampai sekarang. Di Safari Anda dapat mengklik kanan pada halaman, yang terkadang menyebabkan pilihan tindakan muncul termasuk buka di dasbor…

Mengklik ini akan mengungkapkan kepada Anda pembuat widget halaman web. Anda dapat memilih bagian halaman yang ingin Anda tambahkan ke dasbor Anda. Ini adalah fitur yang cukup keren, tetapi untuk kasus kami, ini adalah fitur yang sangat keren. Membuka penghitung BPM yang baru saja kami buat, Anda dapat memilih kotak seperti ini:

Sekarang gunakan pintasan tombol F12. LEDAKAN. Tidak pernah semudah ini membuat widget sendiri, dengan cepat dan mudah.

Langkah 6: Catatan

Anda mungkin bertanya-tanya mengapa yang satu ini tidak menyertakan fitur pemutaran metronom. Ketika saya mencoba menggunakannya di dasbor, program tidak dapat memutar audio dengan andal:(Tapi setidaknya Logika dapat dengan mudah melakukan bagian itu.

Dan alasan mengapa saya menunjukkan cara membuat suara dengan dua cara berbeda adalah karena versi Audio Context menggunakan synthesizer tidak akan berfungsi di dalam dasbor.

Terakhir, Anda tidak bisa begitu saja mengklik F12 dan melanjutkan menggunakan spasi untuk mendapatkan tempo, Anda harus mengklik tombol secara langsung, yang merupakan downgrade. Tapi saya pikir ini mungkin cara saya membuat widget kecil mulai sekarang. Jika Anda memiliki ide keren untuk ini, tunjukkan saat Anda menerapkannya:)

Mendaftar untuk mailing list kami!

Dan ya, lihat T3chFlicks - kami membuat barang!