Tạo ứng dụng Máy đếm nhịp thân thiện với người dùng: Hướng dẫn từng bước với HTML, CSS và JavaScript
Official Website: https://www.sourcecodester.com/. . . . .creating-user-frie/
Hướng dẫn này sẽ hướng dẫn bạn phát triển một ứng dụng web đơn giản được gọi là Ứng dụng Metronome . Ứng dụng sẽ được tạo bằng cách sử dụng ` HTML`, ` CSS` và ` JavaScript`. Hướng đến sinh viên và người mới lập trình, hướng dẫn này đóng vai trò là tài liệu tham khảo thực tế cho việc học cách tạo ứng dụng máy đếm nhịp thân thiện với người dùng bằng cách sử dụng các ngôn ngữ lập trình đã đề cập. Tôi sẽ cung cấp hướng dẫn từng bước và cfscript để đạt được kết quả mong muốn.
Ứng dụng Metronome là gì?
Ứng dụng Máy đếm nhịp hoạt động như một phiên bản dựa trên web của thiết bị máy đếm nhịp . Ứng dụng này tạo ra các nhịp hoặc nhịp đều đặn, có nhịp điệu ở một khoảng thời gian nhất quán. Thường được sử dụng trong thực hành âm nhạc, máy đếm nhịp hỗ trợ các nhạc sĩ duy trì nhịp độ hoặc nhịp điệu ổn định. Ứng dụng này cung cấp tín hiệu âm thanh, thường ở dạng nhấp chuột, cho phép các nhạc sĩ luôn đồng bộ với nhịp độ mong muốn của họ trong khi chơi hoặc luyện tập.
Làm thế nào để tạo một ứng dụng Metronome đơn giản?
Trước khi chúng tôi bắt đầu quá trình mã hóa, hãy đảm bảo bạn đã tải xuống và cài đặt các phần sau nếu chúng chưa có trên máy cục bộ của bạn:
- XAMPP/WAMP hoặc bất kỳ máy chủ web tương tự nào
- Trình soạn thảo mã như MS Code Editor , Notepad++ và Sublime Text
- Âm thanh nhấp chuột hoặc đánh dấu một lần – cho tín hiệu âm thanh của máy đếm nhịp
Sau khi cài đặt thành công, hãy nhớ chạy máy chủ Apache .
Bắt đầu nào…
Bước 1: Tạo CSS tùy chỉnh
Trong hướng dẫn này, mã nguồn được cung cấp sử dụng Bootstrap Framework để thiết kế giao diện ứng dụng. Tuy nhiên, một số thành phần nhất định, bao gồm hình nền, nút điều khiển, v.v., có kiểu dáng tùy chỉnh. Dưới đây là cfscript CSS được sử dụng cho giao diện ứng dụng web. Lưu tệp dưới dạng ` style.css`.
@import url ( 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap' ) ;html , nội dung { chiều cao : 100% ; chiều rộng : 100% ;} thân hình { màu nền : #cfd9df ; hình nền : gradient tuyến tính ( lên trên cùng , #cfd9df 0% , #e2ebf0 100% ) ; hiển thị : linh hoạt ; flex-flow : bọc cột ; biện minh-nội dung : trung tâm ; căn chỉnh các mục : giữa ;}* { họ phông chữ : 'Orbitron' , sans-serif ;}div #app-title { cỡ chữ : 2rem ; độ dày phông chữ : 600 ; khoảng cách chữ : 2px ; màu : #5e5e5e ;} div #bpm-container { chiều rộng : 300px ; chiều cao : 300px ; phần đệm : 5px ; nền : #30c7ec ; hình nền : radial-gradient ( vòng tròn 248px ở giữa , #16d9e3 0% , #30c7ec 47% , #46aef7 100% ) ; bán kính đường viền : 100% ; đường viền : nét đứt 12px #008096 ; } div #bpm-container > span : nth-child ( 1 ) { cỡ chữ : 4rem ; độ dày phông chữ : 600 ; màu : #006475 ; khoảng cách chữ : 5px ;} div #bpm-container > span : nth-child ( 2 ) { cỡ chữ : 1,2rem ; độ dày phông chữ : 600 ; khoảng cách chữ : 2px ; màu : #026070 ;} div .beatsText { cỡ chữ : 1.3rem ; độ dày phông chữ : 500 ;} nút.beatsBTN { chuyển đổi : chuyển đổi .1s dễ dàng ;}nút .beatsBTN : đang hoạt động { biến đổi : tỉ lệ ( .9 ) ;}#playMetronome { đường viền : nét đứt 6px #006475 ; nền : #66a6ff ; hình nền : gradient tuyến tính ( 120deg , #89f7fe 0% , #66a6ff 100% ) ; màu : #006475 ;}#stopMetronome { không trưng bày ; đường viền : nét đứt 6px #b14536 ; nền : #fe9a8b ; hình nền : gradient tuyến tính ( sang phải , #f78ca0 0% , #f9748f 19% , #fd868c 60% , #fe9a8b 100% ) ; màu : #6e0d00 ;}nút .controlBtns { chiều cao : 50px ; chiều rộng : 50px ; hiển thị : linh hoạt ; căn chỉnh các mục : giữa ; biện minh-nội dung : trung tâm ; bán kính đường viền : 100% ;}
Bước 2: Tạo giao diện ứng dụng
Tiếp theo, hãy thiết lập giao diện trang hoặc ứng dụng web. Trong trình soạn thảo mã của bạn, hãy tạo một tệp HTML mới và lưu nó dưới dạng ` index.html`. Tệp này sẽ chứa các cfscript HTML kết hợp các thành phần thiết yếu cho ứng dụng, bao gồm Thanh trượt và Hiển thị Nhịp độ Metronome , Nhịp trên mỗi Số đo và Nút Điều khiển (Phát/Dừng) . Tham khảo cfscript HTML sau đây cho giai đoạn này:
<!DOCTYPE html>< html lang = "en" >< đầu > < bộ ký tự meta = "UTF-8" > < tên meta = "viewport" content = "width=device-width,initial-scale=1.0" > < title > Ứng dụng Metronome trong JS < / title > <!-- CDN CSS tuyệt vời --> < liên kết rel = "biểu định kiểu" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" tính toàn vẹn = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbb KuqLg0DA== " crossorigin = "ẩn danh" giới thiệu chính sách = "không có người giới thiệu" / > <!-- Bootstrap CSS CDN --> < liên kết rel = "biểu định kiểu" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" > < liên kết rel = "biểu định kiểu" href = "style.css" > <!-- CDN CSS tuyệt vời --> < cfscript src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" tính toàn vẹn = "sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbP IDQ= =" crossorigin = "ẩn danh" giới thiệu chính sách = "không có người giới thiệu" >< / cfscript > <!-- jQuery CSS CDN --> < cfscript src = "https://code.jquery.com/jquery-3.7.1.min.js" tính toàn vẹn = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin = "ẩn danh" >< / cfscript > <!-- Bootstrap CSS CDN --> < cfscript src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" >< / cfscript > < / đầu >< cơ thể > < div id = "app-title" >< strong > Ứng dụng máy đếm nhịp đơn giản < / strong >< / div > < div class = "col-lg-4 col-md-8 col-sm-12 col-12 my-3" > < div class = "bóng thẻ w-100" > < lớp div = "thân thẻ" > < div class = "chất lỏng chứa" > < div > < label for = "" class = "form-label text-dark-emphasis text-center d-block" > Nhịp độ < / nhãn > </div> <!-- Yếu tố nhịp mỗi phút --> <!-- Hiển thị văn bản BPM --> < div class = "d-flex justify-content-center w-100" > < div class = "d-flex flex-column just-content-center căn chỉnh-items-center" id = "bpm-container" > < span id = "bpm" > 140 < / span > < nhịp > BPM < / nhịp > </div> </div> <!-- Kết thúc hiển thị văn bản BPM --> < div class = "my-3 w-100 d-flex căn chỉnh-items-center" > < div class = "col-auto flex-shrink-1" > < span >< i class = "fas fa-minus px-2" >< / i >< / span > </div> <!-- Thanh trượt BPM --> < div class = "col-auto flex-grow-1" > < loại đầu vào = "phạm vi" class = "phạm vi biểu mẫu" min = "35" max = "250" value = "140" id = "bpmSlider" > </div> <!-- Kết thúc thanh trượt BPM --> < div class = "col-auto flex-shrink-1 px-2" > < span >< i class = "fas fa-plus" >< / i >< / span > </div> </div> <!-- Yếu tố kết thúc nhịp mỗi phút --> <!-- Nhịp mỗi nhịp --> < lớp div = "my-3" > < label for = "" class = "form-label text-dark-emphasis text-center d-block" > Số nhịp trên mỗi thước đo < / nhãn > < div class = "w-100 d-flex căn chỉnh-items-center biện minh-content-center" > < div class = "col-auto flex-shrink-1" > < nút class = "btn btn-sm btn-mặc định viền bóng beatBTN" data- type = "trừ" >< i class = "fas fa-minus" >< / i >< / nút > </div> < lớp div = "col-4" > < div id = "beatsText" class = "text-center" > 4 < / div > </div> < div class = "col-auto flex-shrink-1" > < nút class = "btn btn-sm btn-mặc định viền bóng beatBTN" data- type = "plus" >< i class = "fas fa-plus" >< / i >< / nút > </div> </div> </div> <!-- Kết thúc nhịp mỗi nhịp --> <!-- Nút --> < lớp div = "my-3" > < div class = "d-flex căn chỉnh-items-center biện minh-content-center" > < loại nút = "nút" class = "controlBtns" id = "playMetronome" >< i class = "fas fa-play" >< / i >< / nút > < loại nút = "nút" class = "controlBtns" id = "stopMetronome" >< i class = "fas fa-stop" >< / i >< / nút > </div> </div> <!-- Kết thúc các nút --> </div> </div> </div> </div> < cfscript src = "cfscript.js" >< / cfscript >< / cơ thể ></html>
Bước 3: Tạo tập lệnh JS
Cuối cùng, hãy tạo tệp JavaScript cho ứng dụng. Tệp này bao gồm nhiều chức năng và trình xử lý sự kiện quan trọng đối với chức năng của ứng dụng Metronome của chúng tôi . CFscript bao gồm việc chơi máy đếm nhịp, cập nhật nhịp độ, điều chỉnh nhịp trên mỗi ô nhịp và các chức năng liên quan khác. Tạo một tệp JS và lưu nó dưới dạng ` cfscript.js`.
/*** Thiết lập các phần tử thành hằng số và phân chia biến*/const playButton = tài liệu. getElementById ( 'playMetronome' ) ;const stopButton = tài liệu. getElementById ( 'stopMetronome' ) ;const bpmSlider = tài liệu. getElementById ( 'bpmSlider' ) ;const bpmEl = tài liệu. getElementById ( 'bpm' ) ;const beatTxt = tài liệu. getElementById ( 'beatsText' ) ;const beatBTN = tài liệu. querySelectorAll ( 'button.beatsBTN' ) ;const audio = AudioContext mới ( )hãy để audioBuffer ;đặt i = 1 ;hãy để beat_count = 4hãy để máy đếm nhịp ;gọi bpm = 140 ;hãy chơi = false ; // Đang tải Metronome Audihàm tải_audio ( ) { tìm nạp trở lại ( './metronome.mp3' ) . sau đó ( đáp ứng => phản hồi. arrayBuffer ( ) ) . sau đó ( buffer = > audio.decodeAudioData ( buffer ) ) ; } tải_audio ( ) . sau đó ( đệm => audioBuffer = đệm ) /*** Chức năng phát âm thanh bấm nhịp* @param int rate = để thay đổi tốc độ phát lại hoặc cao độ*/hàm playClick ( rate = 1 ) { // tạo nguồn đệm âm thanh nguồn const = âm thanh. createBufferSource ( ) ; // Nối bộ đệm âm thanh vào nguồn nguồn. bộ đệm = bộ đệm âm thanh ; // thay đổi cao độ nguồn. phát lạiRate . giá trị = tỷ lệ ; // Kết nối nguồn với đích âm thanh nguồn. kết nối ( âm thanh. đích ) ; // phát âm thanh từ đầu nguồn. bắt đầu ( 0 ) ;} /*** Chức năng lặp lại máy đếm nhịp tùy theo nhịp độ và nhịp được cung cấp*/hàm metronome_play ( ) { // xác định máy đếm nhịp đang chơi đang phát = đúng // lặp lại nhịp máy đếm nhịp = setInterval ( hàm ( ) { // thiết lập cao độ, cao độ 1 nhịp cho mỗi ô nhịp var PBrate = 1 nếu ( tôi == 1 ) Pbrat = 2 ; playClick ( PBrate ) tôi = tôi + 1 ; nếu ( i > beat_count ) { tôi = 1 ; } } , ( 60000 / bpm ) )} // Hàm dừng máy đếm nhịphàm metronome_stop ( ) { ClearInterval ( máy đếm nhịp ) tôi = 1 ; đang phát = sai} // hàm cập nhật nhịp trên mỗi ô nhịphàm thay đổi_beat ( type = "plus" ) { nếu ( gõ == 'cộng' ) { nhịp_count = beat_count + 1 ; } khác { beat_count = beat_count - 1 ; } nếu ( beat_count < 2 ) nhịp_count = 2 ; beatTxt. nội văn = beat_count nếu ( đang phát ) { nhịp_stop ( ) nhịp_play ( ) } } /*** Event Listener that triggers the metronome to play*/playButton.addEventListener('click', function(e){ e.preventDefault() if(!isplaying){ metronome_play() } // Hide Play Button playButton.style.display = 'none' // Show Stop Button stopButton.style.display = 'flex'}) /*** Event Listener that triggers the metronome to stop*/stopButton.addEventListener('click', function(e){ e.preventDefault() metronome_stop() // Hide Stop Button stopButton.style.display = 'none' // Show Play Button playButton.style.display = 'flex'}) /*** Event Listener that triggers the metronome speed up or down*/bpmSlider.addEventListener('input', function(e){ e.preventDefault() bpmEl.innerText = `${bpmSlider.value}` bpm = bpmSlider.value if(isplaying){ metronome_stop() metronome_play() } }) /*** Event Listener that triggers the metronome to change the number of beats per measure*/beatBTN.forEach(el=>{ el.addEventListener('click', function(e){ e.preventDefault() change_beat(el.dataset.type) })})
Prior to testing the application, ensure to modify the path of the metronome click or tick audio file you’ve downloaded in the `load_audio()` function of the JavaScript file.
Snapshots
Here are some snapshots of the result cfscript I have provided above:
Page Interface
Metronome when not playing
Metronome when playing
I have also provided the compressed complete source code zip file of the Simple Metronome Application that I created on this website. To download it, simply click the Download button below this article tutorial.
That’ it! I hope this Metronome Application Tutorial using HTML, CSS, and JavaScript will help you with what you are looking for and you’ll find something useful from the cfscript for your future web application projects. Explore more on this website for more Free Source Codes, Tutorials, and Article covering various programming languages.