Thứ Tư, 25 tháng 12, 2013
HTML Âm thanh / Audio
Vấn đề, vấn đề, và giải pháp
Chơi âm thanh trong HTML là không dễ dàng!
Bạn phải biết rất nhiều thủ thuật để đảm bảo các tập tin âm thanh của bạn sẽ chơi trong tất cả các trình duyệt (Internet Explorer, Chrome, Firefox, Safari, Opera) và trên tất cả các phần cứng (máy tính, Mac, iPad, iPhone).
Trong chương này LTTT tóm tắt các vấn đề và các giải pháp.
Sử dụng Plug-ins
Một plug-in là một chương trình máy tính nhỏ mà mở rộng các chức năng tiêu chuẩn của trình duyệt.
Plug-in có thể được thêm vào các trang HTML sử dụng thẻ <object> hoặc thẻ <embed>.
Các thẻ xác định container cho các nguồn lực (thông thường các nguồn tài nguyên không phải HTML), trong đó, tùy thuộc vào loại, hoặc là sẽ được hiển thị bằng các trình duyệt, hoặc một plug-in bên ngoài.
HTML Audio - Sử dụng <embed>
Thẻ <embed> định nghĩa một container cho bên ngoài (không phải HTML) nội dung.
Các đoạn mã sau đây sẽ đóng một tập tin MP3 được nhúng trong một trang web:
Vấn đề:
- Trình duyệt khác nhau hỗ trợ các định dạng âm thanh khác nhau
- Nếu một trình duyệt không hỗ trợ các định dạng tập tin, âm thanh sẽ không chơi mà không có một plug-in
- Nếu các plug-in không được cài đặt trên máy tính của người sử dụng, âm thanh sẽ không chơi
HTML Audio - Sử dụng <object>
Thẻ <object> cũng có thể xác định một container cho bên ngoài (không phải HTML) nội dung.
Các đoạn mã sau đây sẽ đóng một tập tin MP3 được nhúng trong một trang web:
Vấn đề:
- Trình duyệt khác nhau hỗ trợ các định dạng âm thanh khác nhau
- Nếu một trình duyệt không hỗ trợ các định dạng tập tin, âm thanh sẽ không chơi mà không có một plug-in
- Nếu các plug-in không được cài đặt trên máy tính của người sử dụng, âm thanh sẽ không chơi
HTML5 <audio> tử
HTML5 <audio> tag định nghĩa âm thanh, chẳng hạn như âm nhạc hoặc file âm thanh khác.
Các yếu tố <audio> hoạt động trong tất cả các trình duyệt hiện đại.
Ví dụ sau đây sử dụng tag <audio> HTML5, trong đó xác định một tập tin MP3 (cho Internet Explorer, Chrome, Firefox 21 +, và Safari), và một tập tin OGG (cho Firefox cũ và Opera). Nếu một cái gì đó không thành công, nó sẽ hiển thị một văn bản:
Ví dụ
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
Thử nó cho mình »
Vấn đề:
- Bạn phải chuyển đổi các tập tin âm thanh thành các định dạng khác nhau
- Các yếu tố <audio> không làm việc trong các trình duyệt cũ
HTML Audio - Giải pháp tốt nhất
Giải pháp tốt nhất là sử dụng HTML5 <audio> yếu tố + các yếu tố <embed>.
Ví dụ dưới đây sử dụng các yếu tố <audio> và cố gắng để chơi các âm thanh hoặc như MP3 hay OGG. Nếu thất bại, mã "rơi trở lại" để thử các yếu tố <embed>:
Ví dụ
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
Thử nó cho mình »
Vấn đề:
- Bạn phải chuyển đổi các tập tin âm thanh thành các định dạng khác nhau
- Các yếu tố <embed> có thể không "rơi trở lại" để hiển thị một thông báo lỗi
HTML Audio - Sử dụng một liên kết
Nếu một trang web bao gồm một liên kết đến một tập tin phương tiện truyền thông, hầu hết các trình duyệt sẽ sử dụng một "ứng dụng trợ giúp" để chơi các tập tin.
Đoạn mã sau sẽ hiển thị một liên kết đến một tập tin MP3. Nếu người dùng nhấp vào liên kết, trình duyệt sẽ khởi động một ứng dụng trợ giúp để chơi các tập tin:
Lời khuyên về Inline Âm thanh
Khi âm thanh được bao gồm trong một trang web, hoặc là một phần của một trang web, nó được gọi là âm thanh nội tuyến.
Nếu bạn có kế hoạch để sử dụng âm thanh nội tuyến, lưu ý rằng nhiều người sẽ cảm thấy bực bội. Cũng lưu ý rằng một số người dùng có thể tắt tùy chọn âm thanh nội tuyến trong trình duyệt của họ.
Lời khuyên tốt nhất của chúng tôi là bao gồm nội tuyến âm thanh chỉ trong các trang mà người dùng hy vọng sẽ nghe thấy âm thanh. Một ví dụ của việc này là một trang mở ra sau khi người dùng nhấp vào một liên kết để nghe lời ghi âm.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét