logo-alantien
banner-header

Tag audio là gì | Thẻ audio chèn âm thanh trong html 5

Tác giả: Alan Tiến

Tag audio là gì

Tag audio là một tag đặc biệt trong html 5 giúp người dùng chèn âm thanh vào trong website của mình. Thẻ audio trong html còn được dùng để định nghĩa âm thanh, như nhạc hay trường audio khác. Chúng ta có thẻ sử dụng với tag <source> để hiện thị được nhiều nội dung âm thanh hơn.

Cấu trúc của thẻ audio

<audio src=”đường dẫn tới file audio” controls=”controls”>Dòng thông báo</audio>

Lưu ý :Đoạn chữ “dòng thông báo” nằm giữa <audio> và </audio> sẽ hiển thị khi  trình duyệt không hỗ trợ thẻ <audio>.

tag audio là gì

Một số ví dụ sử dụng audio chèn nhạc vào html 5

Ví dụ 1: cách chèn nhạc nền vào html đơn giản

<audio src="wp-content/uploads/2017/08/Doan-Xuan-Ca.ogg" controls="controls">Trình duyệt của bạn không hỗ trợ thành phần audio.<audio>

Kết quả bạn sẽ nghe được audio đoạn quân ca trong bài viết này.

Ví dụ 2: Chèn âm file mp3 vào website khi duyệt trình không hổ trợ kiểu MIME  ogg. Để có thể chạy được mp3 thì các bạn sử dụng thêm thẻ <source>

<audio controls="controls">
<source src="wp-content/uploads/2017/08/Doan-Xuan-Ca.ogg" type="audio/ogg" />
<source src="wp-content/uploads/2017/08/Doan-Xuan-Ca.ogg" type="audio/mp3" />
Trình duyệt của bạn không hỗ trợ thành phần audio.
<audio>

Với ví dụ này khi bạn xài duyệt trình ie (Internet Explorer) truy vào bài viết này. Thì đoạn html trên sẽ tự động chuyển sang mp3 cho các bạn.

Những trình duyệt hổ trợ cho thẻ audio

HTML Tag
<audio> Yes Yes Yes Yes Yes

Hầu hết các trình duyệt đều hổ trợ cho thẻ audio. Nhưng các bạn chú ý đến bảng định dạng file cho audio bên dưới. Vì thế các bạn nên sử dụng chung với thẻ <source> để tăng thuộc tính cho tag audio.

Các bạn có thể xem các trình duyệt hổ trợ định dạng file audio.

Internet Explorer Firefox Opera Chrome Safari IOS Android Window Phone
WebM X 4 10.5 6 X X X X
Ogg X 3.6 10.5 6 5.1 X X X
Wav X 3.6 5.0 10 5.1 3.1 X X
MP3 9 X X 6 x 3.1 2.2 7.5
AAC 9 X X 6 X 3.1 X 7.5
PCM X 3.6 5 10.5 5.1 3.1 X X

Bảng Kiểu MIME cho định dạng Audio

Định dạng MIME type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Thuộc tính của thẻ audio trong html 5

Cách sử dụng: <audio thuoctinh=”giatri”></audio>

Mẫu ví dụ về thuộc tính:

<audio autoplay="autoplay"></audio>
Thuộc tính Giá trị Ví dụ Mô tả
autoplay autoplay autoplay=”autoplay” File Âm thanh sẽ tự động chạy.
controls controls controls=”controls” Hiển thị các tính năng điều khiển như next, pre, play
loop loop loop=”loop” Hiển thị tính năng lặp lại khi chạy xong đoạn âm thanh.
preload auto
metadata
none
preload=”auto” Xác định âm thanh có chạy không khi tải trang.
src URL src=”audio/audio.mp3″ Xác định đường dẫn tới file âm thanh.

Lời kết

Thẻ audio được sử dụng rộng rãi trong thiết kế html 5. Các bạn chú ý là nên sử dụng chung với tag source để tăng thuộc tính audio. Qua bài viết này, các bạn có thể hiểu rõ hơn về tag audio cũng như cách chèn âm thanh vào website. Nhớ share nếu cảm thấy bài viết này hữu ích nha.

Tag audio là gì | Thẻ audio chèn âm thanh trong html 5
5 (100%) 2 votes

Bạn có thể tìm thấy bài viết Tag audio là gì | Thẻ audio chèn âm thanh trong html 5 với các từ khóa sau:-,

like

Gửi bình luận

  • Dịch Vụ

    Khóa Học Viết Bài Chuẩn SEO Tại Nhà TPHCM

    Viết 5 bài chuẩn seo với hơn 1000 từ trong một...

    Khóa học thiết kế website WordPress tại nhà

    Khóa học thiết kế website WordPress tại nhà dành cho những...

    Thiết kế website wordpress giá rẻ: dịch vụ chuyên nghiệp – chuẩn #1

    Bạn đang muốn tìm dịch vụ thiết kế website wordpress giá...

  • Tự học wordpress

    Tạo nút gọi điện thoại đẹp đơn giản với Plugin Call Now Animate

    Hôm nay mình sẽ hướng dẫn các bạn tạo nút gọi...

    Cài đặt wordpress trên xampp bảo mật nhất

    Cài đặt wordpress trên xampp rất đơn giản những hôm nay...

    Hướng dẫn tạo form liên hệ với Contact Form 7 đơn giản

    Với form liên hệ đẹp sẽ giúp website của bạn trở...

    Plugin kk star ratings tạo đánh giá 5 sao trên kết quả tìm kiếm google

    Chắc nhiều bạn thắc mắc tại sao website của người khác...

    Sửa lỗi Briefly Unavailable for Scheduled Maintenance trên WordPress

    Hiện nay rất nhiều bạn đang gặp lỗi “Briefly Unavailable for...

  • Học HTML Căn Bản

    Tag basefont là gì | thẻ basefont trong html

    Tag basefont là gì Tag basefont là một thẻ html căn...

    Tag base là gì | Thẻ Base và thuộc tính target trong html

    Tag base là gì Tag Base là một thẻ html được...

    Thẻ định dạng font chữ và văn bản trong html 5

    Trong bài này mình sẽ tổng hợp các thẻ định dạng font...

    Tag audio là gì | Thẻ audio chèn âm thanh trong html 5

    Tag audio là gì Tag audio là một tag đặc biệt...

    Tag aside là gì | Ý nghĩa và cách sử dụng thẻ aside trong html 5

    Thẻ tag aside là gì? Tag aside là một thẻ tag...

    Tag article là gì | Cách sử dụng thẻ article trong html 5

    Tag article là gì Tag article là một thẻ mới trong html 5...

    Tag area là gì | Cách sử dụng thẻ Area trong html

    Tag area là gì Tag area là một thẻ html xác...

    Tag Address là gì | Cách sử dụng thẻ Address trong HTML

    Tag Address là gì Tag Address là một thẻ html được...

    Tag acronym là gì | cách sử dụng tag acronym trong html

    Tag Acronym là gì Tag Acronym là một tag html được...

  • Key đang SEO Top