Â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)

 

Tác giả: Nguyễn Văn Hợi

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.

Lên trên