Giáo Án Bài 20 (Lớp 4)

Bàn Phím DJ Nhí (Âm Thanh & Đa Phương Tiện)

Hôm nay chúng ta sẽ tìm hiểu cách nhúng âm thanh (audio), phim ảnh (video) vào trang web và tự tay lập trình các nút bấm Phát/Dừng nhạc tùy biến bằng JavaScript.

🎯 Mục tiêu bài học

Sử dụng thẻ <audio> và <video> để nhúng các tệp đa phương tiện vào web.
Sử dụng phương thức .play() và .pause() trong JavaScript để điều khiển phát/dừng nhạc.
Hiểu cách tự thiết kế nút bấm điều khiển nhạc bằng cách ẩn bảng điều khiển (controls) mặc định.
Áp dụng thuộc tính CSS object-fit: cover; để hiển thị video/hình ảnh không bị méo mó.
Ánh xạ việc phát/dừng âm thanh sang khối lệnh âm thanh tương ứng trong Scratch.

⏱️ Thời lượng & Phân bổ

Nhúng Âm Thanh & Video: 20 phút
Lập Trình Phát/Dừng Nhạc JS & Scratch: 25 phút
Thiết Kế Nút Bấm Điều Khiển Tùy Biến: 20 phút
CSS Định Dạng Khung Video Co Dãn: 15 phút
Dự án Rạp Chiếu Phim Mini: 45 phút

20 Phút Hoạt động 1: Nhúng Âm Thanh & Video

"Một trang web giới thiệu trò chơi hay bán hàng sẽ trở nên cực kỳ sinh động nếu có thêm nhạc nền du dương hoặc các video hướng dẫn ngắn.
HTML cung cấp cho chúng ta hai chiếc thẻ siêu mạnh để nhúng nhạc và video trực tiếp vào trang web chính là thẻ **<audio>** và **<video>**."

Giáo viên giới thiệu cú pháp nhúng đa phương tiện:

Cú pháp thẻ audio và video:

<!-- Nhúng âm thanh -->
<audio id="nhac-nen" src="piano.mp3"></audio>

<!-- Nhúng video kèm bảng điều khiển mặc định của trình duyệt -->
<video id="video-huong-dan" src="phim.mp4" controls style="width: 300px;"></video>

25 Phút Hoạt động 2: Lập Trình Phát/Dừng Nhạc JS & Scratch

Để tự thiết kế các nút bấm có hình thù đẹp mắt (như chiếc đĩa nhạc, phím DJ) thay thế cho thanh điều khiển mặc định màu xám thô kệch, chúng ta sẽ ẩn thuộc tính controls đi và điều khiển nhạc hoàn toàn bằng JavaScript.

Sự so sánh trực quan với Scratch:

Trong Scratch, các em phát và dừng âm thanh bằng các khối lệnh:

🔊 Phát âm thanh [Bell] (start sound [Bell]) và dừng tất cả âm thanh

Trong JavaScript, ta gọi các phương thức tương ứng trên thẻ audio:

// Phát âm thanh
document.getElementById('chuong').play();

// Dừng âm thanh
document.getElementById('chuong').pause();

20 Phút Hoạt động 3: Thiết Kế Nút Bấm Điều Khiển Tùy Biến

Học sinh tìm hiểu cách viết các hàm phát nhạc và dừng nhạc trong thẻ script để gọi chạy từ sự kiện click chuột trên nút bấm.

Ví dụ hàm JS điều khiển:

function batNhac() {
    let nhac = document.getElementById('nhac-nen');
    nhac.play(); // Kích hoạt phát nhạc
}

function tatNhac() {
    let nhac = document.getElementById('nhac-nen');
    nhac.pause(); // Tạm dừng nhạc
}

15 Phút Hoạt động 4: CSS Định Dạng Khung Video Co Dãn

Khi nhúng video, nếu khung chứa video có tỷ lệ khác với video gốc, video sẽ bị co méo rất xấu. Ta dùng thuộc tính CSS object-fit: cover; để cắt và lấp đầy khung hình mượt mà như màn hình rạp chiếu phim.

CSS co dãn video:

video {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Cắt và lấp đầy khung hình mà không bị méo */
    border-radius: 10px;
    border: 3px solid #6c5ce7;
}

🎁 Dự án Thực hành: Rạp Chiếu Phim Mini

Mô tả: Tạo trang web rạp chiếu phim mini chứa một tệp nhạc (hoặc video) được ẩn thanh điều khiển mặc định. Học sinh tự lập trình 2 nút bấm "PHÁT NHẠC" và "DỪNG" bằng JavaScript để điều khiển bài hát.

Các bước lập trình chi tiết:

Khởi tạo thư mục dự án bai20-1, thư mục con assets chứa một tệp nhạc mp3 ngắn (ví dụ: bell.mp3), tạo file index.html và style.css.
Trong index.html, thiết lập tiêu đề <h1>: RẠP CHIẾU PHIM MINI CANDY.
Tạo thẻ âm thanh ẩn bộ điều khiển: <audio id="chuong-nhac" src="bell.mp3"></audio>.
Tạo 2 nút bấm:
<button class="nut-dj" onclick="phatNhac()">PHÁT NHẠC 🎵</button> và
<button class="nut-dj" onclick="dungNhac()">DỪNG ⏹️</button>.

Viết mã JavaScript trong thẻ <script> ở cuối body:

function phatNhac() {
    document.getElementById('chuong-nhac').play();
}

function dungNhac() {
    document.getElementById('chuong-nhac').pause();
}

Trong style.css, định dạng căn giữa, thiết kế nút bấm DJ to, nhiều màu sắc bắt mắt và đổi con trỏ chuột thành hình bàn tay.