Làm thế nào để Thêm Audio vào trang web dựa trên HTML5 và CSS3 của bạn

HTML đã hỗ trợ hình ảnh trong một thời gian dài, nhưng bây giờ nó hoạt động tốt với các tệp âm thanh. Đây là một bước đột phá lớn, như âm thanh trước đó yêu cầu các chương trình bên ngoài như Flash.

Thật dễ dàng để thêm âm thanh vào một trang web trong HTML5 với thẻ mới. Đây là mã cho việc tạo trang này:

âm thanh. html

Trình diễn âm thanh






 Trình duyệt của bạn không hỗ trợ HTML5 Audio Vui lòng sử dụng liên kết này để thay thế: Allemande. mp3
Âm nhạc: J. S. Bach "Allemande" Partita cho Violin # 2

Mặc dù gần như mọi trình duyệt hiện tại hỗ trợ thẻ, họ vẫn không thể đồng ý về định dạng để hỗ trợ. Một số trình duyệt hỗ trợ các tập tin MP3, một số hỗ trợ một tiêu chuẩn mới hơn được gọi là Ogg, và một số hỗ trợ WAV.

Cách tốt nhất để đảm bảo âm thanh phát là cung cấp hai định dạng khác nhau. Thông thường, bao gồm cả định dạng Ogg và MP3 đảm bảo âm thanh sẽ phát trên tất cả các trình duyệt chính.

Để thêm một tập tin âm thanh vào trang của bạn, hãy làm theo các bước sau:

1. Thêm thẻ âm thanh vào trang của bạn.

   Thẻ chỉ vị trí tập tin âm thanh sẽ được đặt. Nơi bạn đặt thẻ trong mã tương ứng với vị trí các điều khiển sẽ xuất hiện.

2. Bật điều khiển.

   Bạn có thể chỉ định bảng điều khiển có thuộc tính. Điều này làm cho một điều khiển nhỏ xuất hiện. Nếu bạn rời khỏi chỉ thị này ra, sẽ không có bảng điều khiển, có nghĩa là người dùng sẽ không thể chơi clip.

3. Tạo ra một hoặc hai lần.

   Bên trong cặp, thêm một hoặc nhiều phần tử. Mỗi phần tử nguồn cho biết tệp bạn sẽ liên kết đến.

4. Đặt thesrcattribute để chỉ ra tệp.

   Thuộc tính của thẻ được sử dụng để chỉ ra tên tệp tin âm thanh mà bạn muốn phát.

5. Thêm mã thay thế cho các trình duyệt cũ.

   Bất kỳ mã HTML bổ sung nào giữa thẻ và sẽ chỉ được giải thích bởi các trình duyệt không hiểu thẻ âm thanh. Bạn có thể thêm một anchor thông thường để tải về hiệu ứng âm thanh nếu bạn muốn. Bằng cách này, ngay cả những người có trình duyệt cũ hơn cũng có thể nghe thấy những gì họ đang thiếu.