Kết nối

[HTML/HTML5] Phần 44: Nhúng audio trong HTML5

2.462 lượt xem 
 Cập nhật lần cuối: 01/07/2018 lúc 16:27:13
Thể loại: HTML/HTML5 

Tương như video, các tập tin audio trước khi có HTML5 đều phải được nhúng thông qua một plug-in (chẳng hạn như Flash). Điều đáng mừng là ở HTML5, bạn đã có thể dùng thẻ audio để nhúng một audio bất kỳ vào trang web. Tất cả các trình duyệt phổ biến hiện nay với các phiên bản mới nhất đều hỗ trợ phần tử audio.

Phần tử audio

Bạn có thể nhúng một tập tin audio vào HTML bằng phần tử audio với đoạn mã sau.

<audio controls>
  <source src="dammio.ogg" type="audio/ogg">
  <source src="dammio.mp3" type="audio/mpeg">

</audio>

Trong ví dụ trên, thuộc tính controls dùng để thêm các nút điều khiển như play pause, và volume. Phần tử source mô tả đường dẫn của tập tin audio. Nếu có 2 phần tử source trở lên thì có nghĩa là phần tử thứ hai trở đi chứa tập tin dự phòng trong trường hợp tập tin chính ở phần tử source thứ nhất bị hỏng. Dòng chữ “Trình duyệt của bạn không hỗ trợ phần tử audio.” hiển thị khi trình duyệt không hỗ trợ phần tử audio.

Định dạng audio được hỗ trợ

Tương tự video, trong HTML5, có 3 định dạng được hỗ trợ là MP3, Wav, và Ogg. Tuy nhiên, các trình duyệt không hỗ hết 3 định dạng này mà tùy theo trình duyệt, mức độ hỗ trợ là khác nhau.

Trình duyệt MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

Kết luận

Như vậy, trong bài bạn cũng đã biết cách nhúng một tập tin audio vào trang web thông qua phần tử audio. Mời bạn theo dõi bài tiếp theo.

Trích dẫn bài viết
  • APA:
    Dammio. (2018). [HTML/HTML5] Phần 44: Nhúng audio trong HTML5. https://www.dammio.com/2018/06/29/html-html5-phan-44-nhung-audio-trong-html5.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 44: Nhúng audio trong HTML5},
    year = {2018},
    url = {https://www.dammio.com/2018/06/29/html-html5-phan-44-nhung-audio-trong-html5},
    urldate = {2024-09-18}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x