Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thêm nhạc nền (background music) vào trang web?

Để phát nhạc nền khi tải trang, dùng thẻ <audio> (HTML5) thay vì <embed> cũ. Thẻ <audio> hỗ trợ tốt hơn, chuẩn HTML5, có controls, autoplay, loop.

Ví dụ: Nhạc nền tự động phát, lặp lại, ẩn player

<!DOCTYPE html>
<html>
<head>
    <title>Nhạc nền trang web</title>
</head>
<body>
    <p>Nhạc đang phát nền...</p>
    <!-- Ẩn player: không có controls, width/height nhỏ hoặc CSS display:none -->
    <audio src="/audio/background.mp3" autoplay loop></audio>
    
    <!-- Hoặc với fallback nhiều format -->
    <audio autoplay loop>
        <source src="/audio/background.mp3" type="audio/mpeg">
        <source src="/audio/background.ogg" type="audio/ogg">
        Trình duyệt không hỗ trợ thẻ audio.
    </audio>
</body>
</html>

Thuộc tính quan trọng của <audio>:

Thuộc tínhMô tả
srcĐường dẫn file âm thanh.
autoplayTự động phát khi tải xong.
loopPhát lặp lại vô tận.
controlsHiển thị nút play/pause, volume (bỏ qua nếu muốn ẩn).
mutedTắt tiếng (thường dùng với autoplay để tránh chặn trình duyệt).
preloadauto | metadata | none (tải trước).

⚠ Lưu ý quan trọng về Autoplay Policy:

  • Hầu hết trình duyệt hiện nay chặn autoplay có âm thanh.
  • Giải pháp: Thêm muted → cho phép autoplay. Sau tương tác user (click), bỏ muted.
  • Hoặc: Chỉ autoplay sau khi user tương tác (click nút "Bật nhạc").
<audio id="bgMusic" src="music.mp3" loop muted></audio>
<button onclick="document.getElementById('bgMusic').muted=false">Bật nhạc</button>