Html5 có thể phát loại tệp âm thanh nào?

HTML supports various media elements such as audio or video. It uses media tags such as

ĐỊNH DẠNG ÂM THANH

HTML uses

• MP3
• WAV
• Ogg

1. MP3. MPEG audio layer-3 (MP3) về cơ bản là định dạng nén dữ liệu cho tệp âm thanh và đại diện cho phần âm thanh của tệp MPEG. Đây là định dạng được sử dụng phổ biến nhất cho các tệp âm thanh vì khả năng nén tốt cùng với âm thanh chất lượng cao. Nó được sử dụng để chèn các tệp âm thanh vào các trang web hoặc video trên web. Các tệp MP3 có một. mp3 và được hỗ trợ bởi tất cả các trình duyệt

Đặc trưng

• âm thanh chất lượng cao
• Kích thước tệp nhỏ
• dữ liệu nén
• Được hỗ trợ bởi tất cả các trình duyệt

cú pháp

Example: Following code will add an MP3 audio file in HTML document or will display text written between if file is not supported by the browser:

HTML

2

3____24

5

0

3____12

5

0

5

3

7

8

9

3

1

2

3

58

5

3

30

5

HTML5 đã cải thiện việc nhúng âm thanh và video bằng cách cung cấp hỗ trợ riêng cho nhiều loại tệp khác nhau. Trong hướng dẫn này, chúng tôi sẽ đề cập đến nhiều cách khác nhau để nhúng âm thanh và video, bao gồm khả năng tương thích của trình duyệt và các khung để hợp lý hóa khả năng tương thích giữa nhiều trình duyệt

Phát âm thanh

HTML5 đã giới thiệu thẻ

2, cũng như API JavaScript, cho phép trình duyệt phát âm thanh mà không cần plugin bên ngoài. Các codec được hỗ trợ nhiều nhất để phát âm thanh trong HTML5 là Ogg Vorbis, MP3 và Wav. Hiện tại không có codec nào phát trên tất cả các trình duyệt. Để tránh khả năng không tương thích với codec, HTML5 cho phép bạn chỉ định nhiều tệp nguồn. Trình duyệt tìm loại mime đầu tiên mà nó biết nó có thể hỗ trợ

Một triển khai đơn giản chỉ với một nguồn trông như thế này

4

Việc triển khai với nhiều nguồn trông như thế này

5

Nếu trình duyệt không hỗ trợ phần tử âm thanh thì nó sẽ hiển thị thông báo “Xin lỗi, nhưng trình duyệt của bạn không hỗ trợ âm thanh. ”

Thư viện hữu ích

Thật không may, mặc dù đã bao gồm thẻ HTML5

2, nhưng vẫn có một số khó khăn trong việc nhúng âm thanh và để âm thanh đó hoạt động trơn tru trên tất cả các trình duyệt và thiết bị

Xử lý nhiều thiết bị và trình duyệt được thực hiện dễ dàng hơn bằng cách sử dụng thư viện như Trình quản lý âm thanh 2 hoặc Buzz

Các thư viện này xử lý hầu hết các mâu thuẫn xung quanh việc nhúng âm thanh và cho phép bạn tập trung vào việc tạo các ứng dụng web tuyệt vời. Cả hai đều cung cấp sự xuống cấp nhẹ nhàng để xử lý các trình duyệt không phải HTML5

API Javascript

HTML5 Audio Javascript API cho phép kiểm soát tải và phát các tệp âm thanh theo chương trình. API rất đơn giản và cung cấp một cách mạnh mẽ để kiểm soát âm thanh được nhúng

Đây là một ví dụ đơn giản. Trong ví dụ này, chúng tôi sẽ thêm một bài hát, nhảy tới 30 giây trong bài hát và phát bài hát đó

6

Truy xuất tên tệp và thời lượng

7

Đọc thêm

Để có hướng dẫn tuyệt vời với mã mẫu giải thích cách làm việc với âm thanh trong trình duyệt, hãy xem hướng dẫn về âm thanh ThinkVitamin. Ngoài ra, Sân chơi của HTML5Rocks có mã mẫu để giúp bạn bắt đầu

Đang phát video

Tương tự như âm thanh, thẻ

2 đã được giới thiệu trong thông số kỹ thuật HTML5, cho phép các nhà phát triển web khai thác khả năng phát video mà không cần phụ thuộc vào plugin của bên thứ ba. Hỗ trợ cho các codec video/âm thanh khác nhau tùy theo trình duyệt, vì vậy bạn bắt buộc phải lập kế hoạch cho tất cả các trình duyệt và thiết bị tiềm năng khi tạo ứng dụng web của mình

Thông tin tương thích trình duyệt cho Ogg/Theora, WebM/VP8 và H. 264 có thể được tìm thấy tại CanIUse. com

Apple đã ra mắt một trang web giới thiệu các khả năng của Video HTML5. Nhiều bản trình diễn có sẵn tại html5video. tổ chức

Ở dạng đơn giản nhất, nhúng video HTML5 trông giống như ví dụ âm thanh ở trên. Đây là cách thêm video vào ứng dụng web của bạn

8

Vì không có tổ hợp codec và vùng chứa duy nhất nào được hỗ trợ trên tất cả các trình duyệt, nên bạn sẽ cần chỉ định nhiều nguồn. Trình duyệt sẽ bắt đầu ở luồng đầu tiên được liệt kê và duyệt qua tất cả chúng cho đến khi có thể phát thành công một luồng. Điều quan trọng là chỉ định trường

50 khi nhúng video. Điều này cho trình duyệt biết loại vùng chứa cùng với thông tin về codec video và âm thanh. Nếu bạn không chỉ định trường loại, trình duyệt phải tải xuống một phần của từng video cho đến khi tìm thấy video có thể phát thành công

0

Một cuộc thảo luận sâu hơn về các loại và cú pháp có sẵn tại Đi sâu vào HTML5

Flash dự phòng

Nên bao gồm dự phòng cho Flash vì nó cho phép bạn nhúng video trên các trình duyệt có thể không hỗ trợ các loại nguồn video của bạn. Việc thêm hỗ trợ vào dự phòng cho Flash rất đơn giản. Sử dụng ví dụ trên, chúng tôi có thể thêm hỗ trợ cho Flash bằng cách thêm nó làm tùy chọn cuối cùng

1

tính tương thích của trình duyệt web

Để có khả năng tương thích tối đa, nên bao gồm

• Nguồn video sử dụng H. 264 video cơ bản và âm thanh AAC “độ phức tạp thấp” trong bộ chứa MP4
• Nguồn video sử dụng WebM (VP8 + Vorbis)
• Nguồn video sử dụng video Theora và âm thanh Vorbis trong vùng chứa Ogg
• Dự phòng cho trình phát video dựa trên Flash

Hầu hết các nhà phát triển muốn tận dụng sức mạnh của video HTML5 sẽ không chỉ xem xét sự khác biệt của trình duyệt mà còn cả khả năng tương thích ngược đối với các trình duyệt không hỗ trợ thông số kỹ thuật HTML5

May mắn thay, các thư viện như VideoJS và MediaElement. js đơn giản hóa và hợp lý hóa quy trình nhúng video trên web

Đọc thêm

Để biết hướng dẫn về cách hoạt động của thẻ

2 và cách bạn có thể bắt đầu, hãy xemdivingohtml5. Nếu bạn muốn tham gia ngay, Sân chơi của HTML5Rocks có mã mẫu tuyệt vời

Tôi có thể phát âm thanh trong HTML5 không?

Định dạng âm thanh nào không được HTML5 hỗ trợ?

HTML có thể phát WAV không?

Định dạng âm thanh nào được chuẩn HTML hỗ trợ?