Jadikan Widget Sendiri dengan Mudah - Kaunter BPM Cepat: 6 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:07

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

Dalam artikel ini saya menunjukkan kepada anda bagaimana saya membuat Penghitung BPM dalam halaman HTML ringkas yang digabungkan dengan javascript vanilla (lihat di sini). Sekiranya dimuat turun, widget ini boleh digunakan di luar talian - sesuai untuk pemuzik yang ingin membuat tetapi tidak selalu mempunyai akses internet. Lebih baik lagi, dengan menggunakan aplikasi papan pemuka OSX (yang sebelumnya tidak pernah berguna), kita dapat menjadikan Kaunter BPM ini lebih cepat digunakan.

Langkah 1: Seperti Apa Kelihatannya?

Jelasnya, jawapan untuk soalan adalah masalah pendapat. Pendirian saya adalah bahawa ia harus sangat sederhana dan hanya melakukan apa yang diperlukan oleh kaunter BPM: menghitung Beats Per Minute. Oleh itu, yang perlu ada hanyalah butang dan nilai hitungan.

Langkah 2: Logiknya

Mengira BPM semudah mengukur masa antara dua rentak berurutan dan mengira berapa banyak yang anda dapat muat dalam satu minit.

biarkan prev_click = Tarikh baru (); const getBPM = fungsi () {const currentTime = Tarikh baru (); selang const = (currentTime - prev_click) / 1000; const bpm = 60 / selang; prev_click = currentTime; balik bpm; } dapatkan_bpm (); // cth. 120

Saya mengambil ini lebih jauh dengan purata 3 rentak sebelumnya seperti ini:

const purata = 3;

const prev_bpms = [60]; biarkan prev_click = Tarikh baru () const getBPM = fungsi () {const currentTime = Tarikh baru (); selang const = (currentTime - prev_click) / 1000; const bpm = 60 / selang; prev_click = currentTime; sementara (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); purata_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; balik bpm; } dapatkan_bpm (); // cth. 120

Juga, tidak semua orang mahu menekan butang tetapi mungkin sebagai kunci:

// pencetus bar ruang

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // dokumen kemampuan segera.querySelector ('. butang clicker'). fokus ();

Kini, pengguna juga dapat mengetuk menggunakan spasi sebaik halaman dimuat.

Langkah 3: Dengarkan BPM Anda

Anda telah mengetuk BPM anda, tetapi sekarang anda mahu memainkannya semula sehingga anda dapat mengikuti tempo kegemaran anda.

Untuk melakukan ini, kita mesti mengeluarkan suara. Tetapi bagaimana? Kami mempunyai dua pilihan yang dibina dalam penyemak imbas AudioAPI, menggunakan fail suara atau membuat synthesizer. Kami pertama kali menggunakan synthesizer untuk membuat bip:

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

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

Sekarang mari kita lakukan perkara yang serupa dengan menggunakan fail Audio:

const click = Audio baru (‘./ cowbell.mp3’);

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

Akhirnya menambahkan logik yang mengawalnya:

// JSlet isPlayerPlaying = salah;

biarkan bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. butang pemain'); jika (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (bip, bpmInterval); } lain {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Langkah 4: Menggabungkan Semuanya

Sekarang menggabungkan semua ciri dan menambahkan sedikit gaya (yang tidak akan saya jelaskan), kami mempunyai produk akhir ini:

Saya tidak tahu berapa banyak kod yang ingin dilihat oleh orang secara langsung dalam artikel itu, jadi cari kod penuh di

Langkah 5: Penggunaan Berkesan (Pengguna OSX Sahaja)

Sekiranya anda pernah menggunakan mac sebelumnya, anda mungkin tersandung pada Aplikasi Dashboard yang asli, tetapi anda mungkin tidak akan bertahan lama.

Saya tidak pernah menggunakannya … hingga sekarang. Di Safari anda dapat mengklik kanan halaman, yang kadang-kadang menyebabkan pemilihan tindakan muncul termasuk terbuka di papan pemuka…

Mengklik ini akan menunjukkan kepada anda pencipta widget halaman web. Anda boleh memilih bahagian halaman yang ingin anda tambahkan ke papan pemuka anda. Ini adalah ciri yang sangat keren, tetapi untuk kes kami, ia adalah ciri yang sangat keren. Membuka kaunter BPM yang baru kami buat, anda boleh memilih kotak seperti ini:

Sekarang gunakan jalan pintas kekunci F12. TEMPAHAN. Tidak pernah semudah itu membuat widget sendiri, dengan cepat dan mudah.

Langkah 6: Catatan

Anda mungkin tertanya-tanya mengapa yang ini tidak termasuk ciri main balik metronome. Semasa saya mencuba menggunakannya di papan pemuka, program ini tidak dapat memainkan audio dengan pasti: (Tetapi sekurang-kurangnya Logik dapat melakukan bahagian itu dengan mudah.

Dan sebab mengapa saya menunjukkan cara membuat suara dengan dua cara yang berbeza adalah kerana versi Konteks Audio menggunakan synthesizer tidak akan berfungsi di dalam papan pemuka.

Akhirnya, anda tidak boleh mengklik F12 dan terus menggunakan spasi untuk mendapatkan tempo, anda mesti mengklik butang secara langsung, yang merupakan downgrade. Tetapi saya rasa ini mungkin bagaimana saya membuat widget kecil mulai sekarang. Sekiranya anda mempunyai idea menarik untuk ini, tunjukkan kepada saya apabila anda telah melaksanakannya:)

Daftar ke Daftar Mel Kami!

Dan ya, lihat T3chFlicks - kami membuat barang!