HTML âm thanh nền

Question

Chúng tôi đã nhận thấy khi truy cập một số trang web, chúng tôi có thể nghe nhạc nền. Nó được hoàn thiện bằng cách nào?

Nội dung chính Show

TRANG TRÌNH BÀY NHANH
TẢI XUỐNG & LƯU Ý
GHI CHÚ NHANH
MÃ VÍ DỤ TẢI XUỐNG
CƠ HỌC ÂM THANH
1) VÍ DỤ VỀ NHẠC NỀN
2) PHÁT NHIỀU BÀI HÁT
CÁC ĐỊNH DẠNG TỆP ĐƯỢC HỖ TRỢ
AUTOPLAY KHÔNG THỰC SỰ ĐÁNG TIN CẬY
BIT & LIÊN KẾT HỮU ÍCH
A NOTE ABOUT &
NHẠC NỀN – KHÔNG PHẢI LÀ Ý TƯỞNG TỐT?
LIÊN KẾT và THAM KHẢO
BẢNG CHEAT INFOGRAPHIC
Làm cách nào để thêm âm thanh bg trong HTML?
Bạn có thể thêm âm thanh vào HTML không?

Trong hướng dẫn này, chúng ta sẽ xem cách đặt nhạc nền cho trang web

Thêm nhạc nền vào trang web khá đơn giản. Để thêm âm thanh nền trên trang web, ở đây chúng ta sẽ sử dụng âm thanh HTML5 sử dụng thẻ âm thanh. Nhưng ở đây chúng tôi sẽ không sử dụng các điều khiển âm thanh để trình phát âm thanh của chúng tôi sẽ bị ẩn. Ngoài ra, chúng tôi sẽ sử dụng thuộc tính ẩn để đảm bảo rằng trình phát âm thanh bị ẩn

Xác định vị trí địa lý của khách truy cập trong JavaScript

Hiển thị bản xem trước trực tiếp của vùng văn bản HTML bằng JavaScript

Ẩn trình phát âm thanh sẽ làm cho trang web giống như nhạc nền của trang web. Dưới đây là đoạn mã HTML sẽ là trình phát nhạc nền của trang web

<audio autoplay loop hidden>
  <source src="demo.mp3" type="audio/mpeg">
</audio>

Trong đoạn mã trên, chúng tôi đã đặt tự động phát để âm thanh nền sẽ phát ngay lập tức. Ngoài ra, sử dụng thuộc tính vòng lặp sẽ phát lại nhạc sau khi kết thúc

Một phương pháp khác để thêm nhạc nền trên trang web là sử dụng thẻ nhúng. Phương pháp này sẽ được hỗ trợ bởi tất cả các phiên bản của Netscape, cũng như Internet Explorer (“IE”) 3. 0 trở lên. dưới đây là mã

<embed width="0" height="0" src="demo.mp3" autostart="true" loop="true">
</embed>

Trong đoạn mã trên, chúng tôi đã đặt chiều cao và chiều rộng thành “0” để ẩn nó

Bộ đếm từ trực tiếp từ vùng văn bản HTML trong JavaScript

Vì vậy, chúng tôi đã thấy rằng việc thêm âm thanh nền trên bất kỳ trang web nào thực sự rất dễ dàng. Nó chỉ cần vài dòng mã HTML và không có gì phức tạp ở đây

Cách nhanh nhất để thêm nhạc nền vào trang web là chèn thẻ âm thanh ở cuối trang – <audio src="MUSIC.mp3" autoplay loop></audio>

Đúng, đơn giản vậy thôi, nhưng vẫn còn một số điều cần lưu ý – Hãy đọc tiếp để tìm hiểu

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn

CƠ HỌC ÂM THANH

Được rồi, bây giờ chúng ta hãy đi vào chi tiết hơn về cơ chế của nhạc nền âm thanh

1) VÍ DỤ VỀ NHẠC NỀN

1-nền-nhạc. html

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Background Music</title>
  </head>
  <body>
    <p>Contents here as usual.</p>

    <!-- BACKGROUND MUSIC -->
    <audio src="Clair de Lune.mp3" autoplay loop></audio>
  </body>
</html>

Ngày xửa ngày xưa, trong thời kỳ đồ đá của Internet, chúng ta phải sử dụng đủ loại plugin vui nhộn để phát âm thanh. Nhưng vâng, bây giờ nó thực sự đơn giản, không cần khoa học tên lửa

Chỉ cần sử dụng thẻ <audio>, nhưng cố gắng đặt nó gần cuối trang – Để âm thanh được tải lâu nhất và người dùng không phải nhìn lâu vào một trang trống;
Thuộc tính autoplay phải tự giải thích – Tự động bắt đầu phát khi tệp âm thanh được tải
Thuộc tính loop cũng vậy… Tự động lặp lại khi âm thanh kết thúc

2) PHÁT NHIỀU BÀI HÁT

2-nhiều. html

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

Đáng buồn thay, không có cách nào nhanh chóng và hiệu quả để tạo danh sách phát trong HTML. Cần một chút Javascript trong trường hợp này

Thẻ <audio> thông thường với các thuộc tính hơi khác một chút – Ở đây, chúng tôi chỉ đặt nó thành autoplay và đặt cho nó một id

Trong Javascript, chúng tôi lấy thẻ HTML <audio> và xác định một

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

0

Khi bài hát hiện tại kết thúc, chúng ta chỉ cần chơi bài tiếp theo;

CÁC ĐỊNH DẠNG TỆP ĐƯỢC HỖ TRỢ

Các ví dụ trên chỉ sử dụng định dạng tệp

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

1 được hỗ trợ rộng rãi, nhưng xin lưu ý rằng bạn cũng có thể sử dụng nhiều định dạng tệp âm thanh khác –

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

2. Nhưng sự hỗ trợ của từng định dạng tệp khác nhau giữa các trình duyệt – Hãy xem điều này

AUTOPLAY KHÔNG THỰC SỰ ĐÁNG TIN CẬY

Không, xin đừng hiểu lầm tôi. Thẻ HTML <audio> được hỗ trợ rộng rãi trong tất cả các trình duyệt hiện đại và nó sẽ hoạt động tốt miễn là người dùng đang kết nối WIFI… Có nghĩa là, sự cố xảy ra khi người dùng đang sử dụng thiết bị di động hoặc kết nối chậm/không ổn định

Mỗi trình duyệt sẽ xử lý autoplay khác nhau – Nếu người dùng đang sử dụng thiết bị di động, thì autoplay rất có thể sẽ bị bỏ qua và không phát. Ngoài ra, người dùng có thể đặt trình duyệt bỏ qua hoàn toàn autoplay

BIT & LIÊN KẾT HỮU ÍCH

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

A NOTE ABOUT &

Nếu bạn đã tìm kiếm trên Internet, bạn có thể thấy một số hướng dẫn sử dụng

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

7 và

<!-- (A) AUDIO TAG -->
<audio src="1.mp3" id="bgm" autoplay></audio>
 
<script>
// (B) GET AUDIO TAG + DEFINE PLAYLIST
let audio = document.getElementById("bgm"),
    playlist = ["1.mp3", "2.mp3"],
    current = 0;
 
// (C) AUTO LOAD NEXT SONG
audio.onended = () => {
  current++;
  if (current >= playlist.length) { current = 0; }
  audio.src = playlist[current];
  audio.pause();
  audio.load();
  audio.play();
};
</script>

8. Vui lòng không sử dụng chúng nữa – Chúng không còn được dùng nữa và đã lỗi thời. Thay vào đó hãy gắn bó với <audio> hiện đại

NHẠC NỀN – KHÔNG PHẢI LÀ Ý TƯỞNG TỐT?

Chúc mừng bạn đã hoàn thành hướng dẫn này… Nhưng sau tất cả những điều cơ bản, tôi sẽ không khuyên bạn nên đặt bất kỳ hình thức nhạc nền nào. Tại sao?

Các tệp âm thanh sẽ làm chậm quá trình tải trang web
Nó không thực sự đáng tin cậy trong mọi trường hợp… Nó có thể bị bỏ qua hoàn toàn bởi các trình duyệt hoặc bởi cài đặt của người dùng
xâm nhập. Hãy tưởng tượng bạn đang ở trong một văn phòng hoặc thư viện yên tĩnh và trang đột nhiên phát nhạc lớn
Làm phiền. Người dùng đang nghe nội dung khác và nhạc nền trên trang chỉ lướt qua

Vì vậy, vâng, không phải là một ý tưởng tốt. Chỉ cần không bao gồm bất kỳ nhạc nền nào, trừ khi nó thực sự cần thiết vì một lý do chính đáng

LIÊN KẾT và THAM KHẢO

<âm thanh>. Phần tử âm thanh nhúng – MDN

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

Làm cách nào để thêm âm thanh bg trong HTML?

Thẻ HTML được sử dụng để phát bản nhạc nền, khi bạn rời khỏi trang và mở một tab mới, thẻ này sẽ liên tục phát bản nhạc trong . Thẻ này không dành cho các trình duyệt khác ngoại trừ Internet Explorer.