Chèn nhạc trong HTML giúp trang web thêm phần sinh động, đồng thời giữ chân được người dùng khi truy cập vào trang web. Bạn có thể chèn nhạc vào trang web bằng cách sử dụng thẻ audio cùng một số thuộc tính để định dạng âm thanh hiển thị tối ưu trên website. Vậy cách chèn nhạc bằng thẻ audio trong HTML như thế nào?
Đọc bài viết dưới đây để được giải đáp chi tiết về:
- Chức năng và công dụng của thẻ audio trong HTML.
- Hướng dẫn chèn nhạc vào HTML bằng thẻ <audio> và giải thích về các thuộc tính của thẻ <audio>.
- Một số định dạng audio phổ biến và các câu hỏi thường gặp về cách chèn nhạc.
Giới thiệu tổng quan về thẻ audio trong HTML
Thẻ audio trong HTML là một thành phần nội tuyến được sử dụng để nhúng các tệp âm thanh vào trang web. Trong phiên bản mới nhất HTML5, bạn có thể chèn thêm âm thanh vào web bằng cách sử dụng thẻ <audio> cùng một số thuộc tính liên quan. Đây sẽ là một thẻ HTML hữu ích dành cho những bạn muốn chèn bài hát, đoạn hội thoại hoặc phỏng vấn,… lên trang web của mình.
Cú pháp cơ bản của thẻ <audio> khi sử dụng trong đoạn mã HTML như sau:
<audio controls src="sample.mp3" type="audio/mp3"/>
Ví dụ:
<audio controls src="https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" type="audio/wav"/>
Kết quả hiển thị mặc định:
Để chèn nhạc vào HTML, bạn sẽ cần sử dụng hai thuộc tính chính và không thể thiếu chính là controls và src, cụ thể như sau:
- src (source): Cho phép xác định các tệp âm thanh khác nhau và trình duyệt web sẽ lựa chọn định dạng tương thích.
- controls: Thuộc tính cho phép thêm các nút điều khiển cho âm thanh như phát, tạm dừng hoặc điều chỉnh âm lượng.
Hướng dẫn chèn nhạc trên web với thẻ audio trong HTML
Chèn nhạc vào HTML
Để chèn nhạc vào HTML, bạn có thể sử dụng cú pháp cơ bản của thẻ <audio> cùng thuộc tính src và controls để thực hiện.
Hai thuộc tính này sẽ cho phép âm thanh được hiển thị đúng chuẩn trên trang web, nếu không có src và controls, âm thanh sẽ không được hiển thị cũng như người dùng không thể tương tác với chúng.
<!DOCTYPE html> <html> <body> <p>Cách chèn âm thanh vào HTML</p> <audio controls src= "https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" type="audio/wav"> </audio> </body> </html>
Kết quả hiển thị:
Theo ví dụ trên, có thể thấy:
- Thuộc tính controls: Cho phép bạn điều chỉnh các nút điều khiển của âm thanh, ở đây bạn sẽ giữ cho các điều khiển mặc định khi trình duyệt hiển thị (nút phát, tạm dừng, âm thanh,…)
- Thuộc tính src: Cho phép bạn chèn link URL của âm thanh cùng định dạng (type) của chúng.
Như vậy, khi hiển thị trên trang web, âm thanh sẽ được tự động phát cùng với đoạn âm thanh và định dạng điều khiển mặc định.
Chèn nhạc với nhiều thuộc tính src (multiple src)
Bạn có thể sử dụng <audio> với một hoặc nhiều thuộc tính src được lồng bên trong nó bằng thẻ <source>. Thẻ <sources> là một phần tử được sử dụng để cung cấp cùng một nội dung âm thanh ở nhiều định dạng tệp khác nhau, nhằm cung cấp khả năng tương thích với nhiều loại trình duyệt khác nhau.
Điều này sẽ hữu ích nếu bạn muốn bao gồm nhiều tệp âm thanh làm nguồn dự phòng trong trường hợp trình duyệt không hỗ trợ định dạng đầu tiên. Nếu bạn chèn nhiều nguồn thì trình duyệt sẽ lựa chọn phát nguồn đầu tiên mà nó hỗ trợ.
<!DOCTYPE html> <html> <body> <p>Chèn nhạc vào HTML</p> <audio controls> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> <source src= "https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" type="audio/wav"> </audio> </body> </html>
Theo ví dụ trên, có thể thấy bạn chèn ba đường dẫn âm thanh khác nhau, nhưng nếu trình duyệt không hỗ trợ định dạng ogg hoặc nếu đường dẫn không phù hợp, nó sẽ chuyển sang thẻ <source> tiếp theo.
Chèn nhạc tự động phát (autoplay)
Theo mặc định, âm thanh khi được chèn vào HTML sẽ không phát cho đến khi người dùng nhấn vào nút phát. Bạn có thể sử dụng thêm thuộc tính autoplay trong thẻ <audio> để điều chỉnh cho âm thanh tự động phát ngay khi có thể mà không cần đợi toàn bộ tệp âm thanh tải xuống hoàn tất hoặc nhấn nút phát.
<!DOCTYPE html> <html> <body> <p>Chèn nhạc vào HTML</p> <audio controls autoplay> <source src= "https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" type="audio/wav"> </audio> </body> </html>
Kết quả hiển thị:
Tuy nhiên, âm thanh hoặc video tự động phát dễ đem đến trải nghiệm người dùng kém cũng như giảm hiệu suất truy cập web bởi vì phát âm thanh đột ngột sẽ làm gián đoạn quá trình truy cập web của người dùng.
Người dùng thường thích khi âm thanh đột ngột phát mà không cần đầu vào, đó cũng là lý do vì sao các trình duyệt như Chrome, Edge hoặc Opera không cho phép tự động phát âm thanh. Nếu trình duyệt không có sẵn tính năng đó, thì bạn cũng nên biết cách chèn nhạc không có âm thanh (muted).
Chèn nhạc không có âm thanh (muted)
Nếu muốn trải nghiệm người dùng tốt hơn, bạn có thể sử dụng thuộc tính tự động phát cùng tắt tiếng (muted). Bằng cách này, âm thanh sẽ được tự động phát và người dùng có thể chọn bật nó khi nào cần thiết.
Theo ví dụ bên dưới, thuộc tính control sẽ hiển thị thêm nút bật/tắt âm thanh, giúp người dùng có thể bật tiếng âm thanh nếu họ muốn.
<!DOCTYPE html> <html> <body> <p>Chèn nhạc vào HTML</p> <audio controls muted autoplay> <source src= "https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" type="audio/wav"> </audio> </body> </html>
Kết quả hiển thị:
Chèn nhạc tự động lặp lại (loop)
Thuộc tính loop cho phép tệp âm thanh lặp lại lần nữa sau khi đã kết thúc, do đó âm thanh sẽ phát lặp đi lặp lại liên tục. Điều này sẽ rất hữu ích nếu bạn muốn điều chỉnh những âm thanh nền cho chúng phát liên tục trên trang web.
<!DOCTYPE html> <html> <body> <p>Chèn nhạc vào HTML</p> <audio controls loop> <source src= "https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" type="audio/wav"> </audio> </body> </html>
Xác định thành phần điều khiển (controlist)
Controlist là thuộc tính được sử dụng để xác định những thành phần điều khiển nào sẽ hiển thị trên giao diện của âm thanh.
Các giá trị có thể sử dụng là nodownload, nofullscreen hoặc noremoteplayback.
<!DOCTYPE html> <html> <body> <audio src="https://itviec.com/blog/wp-content/uploads/2024/06/itviec-ithero-song.wav" controls controlslist="nodownload"></audio> </body> </html>
Xem thêm: Tổng hợp 20+ tài liệu học HTML từ cơ bản đến nâng cao
Một số câu hỏi thường gặp
Thẻ audio trong HTML hỗ trợ các định dạng âm thanh như thế nào?
Thẻ <audio> cho phép người dùng có thể chèn các tệp âm thanh vào trang web và hỗ trợ các định dạng phổ biến như MP3, WAV và OGG.
| Định dạng | Type | Trình duyệt hỗ trợ |
| MP3 | audio/mpeg | Hỗ trợ trên tất cả trình duyệt hiện nay |
| WAV | audio/wav | Tất cả trình duyệt ngoại trừ Internet Explorer |
| OGG | audio/ogg | Tất cả trình duyệt ngoại trừ Internet Explorer và Safari |
Làm thế nào để tránh vi phạm bản quyền khi sử dụng nhạc trên trang web?
Để tránh vi phạm bản quyền khi chèn nhạc vào trang web, bạn hãy lưu ý một số điều như sau:
- Sử dụng nhạc có bản quyền từ các trang uy tín: Một số trang web như Freesound, Musopen hay Audionautix cung cấp nhạc miễn phí có bản quyền cho mục đích sử dụng trên website.
- Mua bản quyền: Với một số bài hát không hiển thị trên các trang web nhạc miễn phí, bạn có thể liên hệ trực tiếp với chủ sở hữu bản quyền.
- Ghi rõ nguồn của nhạc khi sử dụng: Hoặc bạn có thể trích dẫn nguồn bài hát rõ ràng trên website của mình.
Tổng kết về thẻ audio trong HTML
Chèn nhạc vào HTML không chỉ giúp tối ưu trang web hiệu quả mà còn tăng trải nghiệm của người dùng khi truy cập vào trang web. Mặc dù các khái niệm và cách sử dụng thẻ <audio> rất dễ sử dụng nhưng bạn nên thực hành các bài tập HTML thường xuyên để nâng cao kỹ năng lập trình của bản thân nhé!
Nắm vững nền tảng kiến thức về HTML không chỉ giúp bạn tìm được công việc phù hợp với bản thân mà còn gặt hái thêm nhiều cơ hội thăng tiến và phát triển bản thân trong công việc. Theo dõi ITviec Blog để được cập nhật sớm nhất những thông tin hấp dẫn về ngành lập trình bạn nhé!
Xem thêm: Front End Developer là gì: Làm gì, lộ trình học tập và Công cụ làm việc