Trang chủ Học HTML căn bản Âm thanh trong HTML5
Học HTML căn bản 11/07/2019 7,220 lượt xem

Âm thanh trong HTML5

Âm thanh trong HTML5

Phát âm thanh trên web

Trước HTML5, các tệp âm thanh chỉ có thể được phát trên trình duyệt với một trình hỗ trợ (như Flash Player).

Phần tử HTML5 <audio> chỉ ra cách thức tiêu chuẩn để nhúng âm thanh vào một trang web.

 

Phần tử HTML <audio>

Để phát một tệp âm thanh trong HTML, sử dụng phần tử <audio>.

Ví dụ

<audio controls>
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

 

Cách thức hoạt động

Thuộc tính controls để thêm trình điều khiển âm thanh như play, pause, và volume.

Phần tử <source> cho phép bạn chỉ định các tệp âm thanh thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên.

Văn bản giữa cặp thẻ <audio> và </audio> chỉ hiển thị nếu trình duyệt không hỗ trợ phần tử <audio>

 

Trình duyệt hỗ trợ

Trong HTML5, có 3 kiểu định dạng âm thanh được hỗ trợ: MP3, WAV, và OGG.

Bảng tham khảo

Browser

MP3

WAV

OGG

Edge/IE

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES

 

Media Type

Định dạng File

Media Type

MP3

audio/mpeg

OGG

audio/ogg

WAV

audio/wav

 

Các phương thức, thuộc tính và sự kiện.

HTML5 xác định các phương thức, thuộc tính và sự kiện DOM cho phần tử <audio>.

Chúng cho phép bạn tải, phát, cũng như đặt thời lượng, âm lượng cho video.

Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn khi âm thanh bắt đầu phát, bị tạm dừng, v.v.

Để tham khảo thêm về DOM bạn có thể vào link sau: HTML5 Audio/Video DOM Reference.

 

Các thẻ audio

Tag

Mô tả

<audio>

Xác định nội dung âm thanh

<source>

Xác định tài nguyên phương tiện cho các thành phần phương tiện, chẳng hạn như <video> và <audio> (chỉ ra đường dẫn đến tệp âm thanh bằng thuộc tính src)

 

Trích nguồn từ: https://www.w3schools.com/html/html5_audio.asp

Chia sẻ:

Bài viết liên quan

Quy ước và phong cách viết HTML5
08/07/2019 Nguyễn Văn Hợi

Quy ước và phong cách viết HTML5

Hướng dẫn bạn tạo cho mình một phong cách viết mã phù hợp với các chuẩn HTML5. Giúp mã nguồn của bạn gọn gàng, sạch sẽ và đúng định dạng.

Đọc thêm