HTML5 Audio
Trong hướng dẫn này, bạn sẽ học cách nhúng âm thanh vào tài liệu HTML.
Nhúng âm thanh vào tài liệu HTML
Việc chèn âm thanh vào một trang web trước đây không hề dễ dàng, bởi vì các trình duyệt web không có tiêu chuẩn thống nhất để xác định các tệp phương tiện được nhúng như âm thanh.
Trong chương này, chúng tôi sẽ trình bày một số trong nhiều cách để nhúng âm thanh vào trang web của bạn, từ việc sử dụng một liên kết đơn giản đến việc sử dụng phần tử HTML5 <audio> mới nhất.
Sử dụng Phần tử âm thanh HTML5
Phần tử HTML5 mới được giới thiệu <audio>cung cấp một cách chuẩn để nhúng âm thanh vào các trang web. Tuy nhiên, phần tử âm thanh tương đối mới nhưng nó hoạt động trên hầu hết các trình duyệt web hiện đại.
Ví dụ sau chỉ cần chèn âm thanh vào tài liệu HTML5, sử dụng bộ điều khiển mặc định của trình duyệt, với một nguồn được xác định bởi thuộc tính src.
Thí dụ
<audio controls="controls" src="media/birds.mp3">
Your browser does not support the HTML5 Audio element.
</audio>Âm thanh, sử dụng bộ điều khiển mặc định của trình duyệt, với các nguồn thay thế.
Thí dụ
<audio controls="controls">
<source src="media/birds.mp3" type="audio/mpeg">
<source src="media/birds.ogg" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>Bản nhạc 'ogg' trong ví dụ trên hoạt động trong Firefox, Opera và Chrome, trong khi bản nhạc tương tự ở định dạng 'mp3' được thêm vào để làm cho âm thanh hoạt động trong Internet Explorer và Safari.
Liên kết các tệp âm thanh
Bạn có thể tạo liên kết đến các tệp âm thanh của mình và phát nó bằng cách đánh dấu vào chúng.
Hãy thử ví dụ sau để hiểu cách hoạt động cơ bản của điều này:
Thí dụ
<a href="media/sea.mp3">Track 1</a>
<a href="media/wind.mp3">Track 2</a>Sử dụng phần tử đối tượng
Phần tử <object> được sử dụng để nhúng các loại tệp phương tiện khác nhau vào tài liệu HTML. Ban đầu, phần tử này được sử dụng để chèn các điều khiển ActiveX, nhưng theo đặc điểm kỹ thuật, một đối tượng có thể là bất kỳ đối tượng phương tiện nào như âm thanh, video, tệp PDF, hoạt ảnh Flash hoặc thậm chí là hình ảnh.
Mã ví dụ sau đây nhúng một tệp âm thanh đơn giản vào một trang web.
Thí dụ
<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>Cảnh báo: Phần tử <a href="https://www.tutorialrepublic.com/html-reference/html-object-tag.php"><object></a> không được hỗ trợ rộng rãi và phụ thuộc rất nhiều vào loại đối tượng đang được nhúng. Các phương pháp khác như phần tử HTML5 <audio> hoặc trình phát âm thanh HTML5 của bên thứ ba có thể là lựa chọn tốt hơn trong nhiều trường hợp.
Sử dụng phần tử nhúng embed
Phần tử <embed> được sử dụng để nhúng nội dung đa phương tiện vào tài liệu HTML.
Đoạn mã sau đây nhúng các tệp âm thanh vào một trang web.
Thí dụ
<embed src="media/wind.mp3">
<embed src="media/wind.ogg">Cảnh báo: Tuy nhiên, phần tử <embed> này được hỗ trợ rất tốt trong các trình duyệt hiện tại và được xác định là tiêu chuẩn trong HTML5, nhưng âm thanh của bạn có thể không phát do thiếu trình duyệt hỗ trợ định dạng tệp đó hoặc không có plugin.