Tạo widget của riêng bạn một cách dễ dàng - Bộ đếm BPM nhanh chóng: 6 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:30

Ứng dụng web là nơi phổ biến, nhưng ứng dụng web không yêu cầu truy cập internet thì không.

Trong bài viết này, tôi chỉ cho bạn cách tôi tạo Bộ đếm BPM trong một trang HTML đơn giản kết hợp với javascript vani (xem tại đây). Nếu được tải xuống, tiện ích này có thể được sử dụng ngoại tuyến - lý tưởng cho các nhạc sĩ muốn tạo nhưng không phải lúc nào cũng có thể truy cập internet. Thậm chí tốt hơn, bằng cách sử dụng ứng dụng bảng điều khiển OSX (ứng dụng có vẻ như chưa bao giờ hữu ích trước đây), chúng tôi có thể làm cho Bộ đếm BPM này sử dụng nhanh hơn.

Bước 1: Nó sẽ trông như thế nào?

Rõ ràng, câu trả lời cho câu hỏi là một vấn đề quan điểm. Quan điểm của tôi là nó phải cực kỳ đơn giản và chỉ làm những gì mà một bộ đếm BPM cần: đếm Nhịp đập mỗi phút. Do đó, tất cả những gì nó cần là một nút và một giá trị đếm.

Bước 2: Logic

Ước tính BPM dễ dàng như đo thời gian giữa hai nhịp liên tiếp và tính xem bạn có thể phù hợp với bao nhiêu nhịp trong một phút.

let pres_click = new Date (); const getBPM = function () {const currentTime = new Date (); const khoảng = (currentTime - trước_click) / 1000; const bpm = 60 / khoảng thời gian; trước_click = currentTime; trả về bpm; } get_bpm (); // ví dụ. 120

Tôi đã làm điều này xa hơn bằng cách lấy trung bình 3 nhịp trước đó như thế này:

const trung bình = 3;

const trước_bpms = [60]; let pres_click = new Date () const getBPM = function () {const currentTime = new Date (); const khoảng = (currentTime - trước_click) / 1000; const bpm = 60 / khoảng thời gian; trước_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) / pres_bpms.length; trả về bpm; } get_bpm (); // ví dụ. 120

Ngoài ra, không phải ai cũng muốn nhấn nút mà có thể thay vào đó là một phím:

// kích hoạt thanh dấu cách

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // khả năng tức thì document.querySelector ('. clicker button'). focus ();

Giờ đây, người dùng cũng có thể nhấn bằng cách sử dụng phím cách ngay sau khi trang được tải xong.

Bước 3: Nghe BPM của bạn

Bạn đã nhấn vào BPM của mình, nhưng bây giờ bạn muốn phát lại nó để có thể thực hiện theo nhịp độ yêu thích của mình.

Để làm được điều này, chúng ta phải tạo ra âm thanh. Nhưng bằng cách nào? Chúng tôi có hai tùy chọn được tích hợp trong AudioAPI của trình duyệt, sử dụng tệp âm thanh hoặc tạo bộ tổng hợp. Trước tiên, chúng tôi sẽ sử dụng bộ tổng hợp để tạo ra tiếng bíp:

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

để bối cảnh, dao động; const bpm = 60; const bpmInterval = 60 / bpm * 1000; // mssetInterval (beep, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); dao động = context.createOscillator (); dao động.type = "sine"; dao động.start (0); Oscillator.connect (context.destination); setTimeout (Oscillator.disconnect, 150, context.destination); }

Bây giờ, hãy làm điều tương tự bằng cách sử dụng tệp Âm thanh:

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

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

Cuối cùng, thêm logic điều khiển chúng:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. nút trình phát'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (tiếng bíp, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Bước 4: Kết hợp tất cả lại với nhau

Bây giờ kết hợp tất cả các tính năng lại với nhau và thêm một chút kiểu dáng (mà tôi sẽ không giải thích), chúng tôi có sản phẩm cuối cùng này:

Tôi không biết mọi người thực sự muốn xem trực tiếp bao nhiêu mã trong bài viết, vì vậy hãy tìm mã đầy đủ tại

Bước 5: Sử dụng hiệu quả (Chỉ người dùng OSX)

Nếu bạn đã sử dụng máy Mac trước đây, bạn có thể đã tình cờ gặp Ứng dụng bảng điều khiển gốc, nhưng có thể bạn sẽ không ở lại được lâu.

Tôi chưa bao giờ thực sự sử dụng nó… cho đến bây giờ. Trong Safari, bạn có thể nhấp chuột phải vào trang, điều này đôi khi khiến một lựa chọn hành động bật lên bao gồm cả mở trong trang tổng quan…

Nhấp vào đây sẽ hiển thị cho bạn một trình tạo widget trang web. Bạn có thể chọn một phần của trang mà bạn muốn thêm vào trang tổng quan của mình. Đây là một tính năng khá thú vị, nhưng đối với trường hợp của chúng tôi, đó là một tính năng cực kỳ thú vị. Mở bộ đếm BPM mà chúng tôi vừa tạo, bạn có thể chọn hộp như sau:

Bây giờ sử dụng phím tắt của phím F12. BÙM. Việc tự tạo widget nhanh chóng và dễ dàng chưa bao giờ dễ dàng đến thế.

Bước 6: Ghi chú

Bạn có thể tự hỏi tại sao cái này không bao gồm tính năng phát lại nhịp. Khi tôi cố gắng sử dụng nó trong bảng điều khiển, chương trình sẽ không phát âm thanh một cách đáng tin cậy: (Nhưng ít nhất Logic có thể dễ dàng thực hiện phần đó.

Và lý do tại sao tôi đã chỉ cho bạn cách tạo âm thanh theo hai cách khác nhau là vì phiên bản Ngữ cảnh âm thanh sử dụng bộ tổng hợp sẽ không hoạt động bên trong bảng điều khiển.

Cuối cùng, bạn không thể chỉ cần nhấp vào F12 và tiếp tục sử dụng phím cách để điều chỉnh nhịp độ, bạn phải nhấp trực tiếp vào nút, đây là một thao tác hạ cấp. Nhưng tôi nghĩ đây có thể là cách tôi tạo ra những vật dụng nhỏ từ bây giờ. Nếu bạn có bất kỳ ý tưởng hay ho nào cho việc này, hãy cho tôi biết khi bạn đã triển khai chúng:)

Đăng ký vào danh sách gửi thư của chúng tôi!

Và vâng, hãy xem T3chFlicks - chúng tôi tạo ra nhiều thứ!