GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 23/09/2020 | 00:00 GMT+7

Cách thêm âm thanh bằng HTML5

Nhờ có phần tử audio HTML5, đã không còn những ngày phải sử dụng Flash để đưa vào các file âm thanh trên một trang web. Trong hướng dẫn ngắn gọn này, ta sẽ trình bày cách thêm âm thanh vào HTML của bạn bằng cách sử dụng thẻ mới.

Yêu cầu

Thêm âm thanh vào HTML5 bằng <audio>

Đây là cách bạn thêm âm thanh vào HTML5 bằng <audio> :

index.html
<audio controls loop autoplay preload="none"   src="deep-house-track.mp3"> </audio>

Có một số thuộc tính bạn có thể sử dụng với phần tử âm thanh:

  • controls thêm các điều khiển để phát / tạm dừng, âm lượng và tìm kiếm
  • loop sẽ lặp lại phát lại
  • autoplay âm thanh
  • preload có thể nhận các giá trị không có , siêu dữ liệu hoặc tự động . Mặc định là tự động . Có thể tốt nếu bạn đặt nó thành không trên các trang mà bạn bao gồm nhiều phần tử audio , ngăn trình duyệt download tất cả dữ liệu âm thanh.

Hỗ trợ định dạng

Bạn có thể cần cung cấp nhiều định dạng vì MP3 không phải là định dạng mở, do đó một số trình duyệt không thể hỗ trợ. Một định dạng miễn phí, Ogg, sẽ rất tuyệt, nhưng nó không được tất cả các trình duyệt hỗ trợ. Xem tại đây để biết danh sách hỗ trợ định dạng trình duyệt. Sử dụng phần tử source trong phần tử audio để cung cấp các định dạng khác nhau:

index.html
<audio>   <source src="deep-house-track.ogg">   <source src="deep-house-track.mp3"> </audio>

Và bạn có thể đầy đủ hơn nữa bằng cách cung cấp một type :

index.html
<audio>   <source src="deep-house-track.ogg"   type="audio/ogg">   <source src="deep-house-track.mp3"   type="audio/mp3"> </audio>

Và bạn có thể cung cấp thêm đánh dấu cho các trình duyệt không hỗ trợ audio :

index.html
<audio>   <source src="deep-house-track.ogg">   <source src="deep-house-track.mp3">   <p>Your browser doesn't support this,   <a href="…">download the file</a>.</p> </audio>

Đây là chức năng cơ bản của phần tử <audio> trong HTML5.

Kết luận

Phần tử <audio> là một tính năng mới quan trọng của HTML. Để kiểm tra hỗ trợ trình duyệt, bạn có thể sử dụng tra cứu Hỗ trợ trình duyệt cho <audio> trên trang web Tôi có thể sử dụng không

Hoặc, để có bài đánh giá toàn diện hơn về ngôn ngữ đánh dấu HTML5, hãy khám phá loạt bài của ta , Cách tạo trang web bằng HTML .

Tags:

Các tin liên quan