Âm thanh HTML

Có nhiều cách để phát âm thanh trong HTML.

Vấn đề, vấn đề và phương pháp giải quyết

Chơi âm thanh trong HTML không dễ dàng!

Bạn cần nắm vững nhiều kỹ năng để đảm bảo rằng tệp âm thanh của bạn có thể phát trên tất cả các trình duyệt (Internet Explorer, Chrome, Firefox, Safari, Opera) và tất cả các phần cứng (PC, Mac, iPad, iPhone).

Trong chương này, CodeW3C.com đã tổng hợp các vấn đề và phương pháp giải quyết.

Sử dụng plugin

Plugin trình duyệt là một chương trình máy tính nhỏ mở rộng chức năng tiêu chuẩn của trình duyệt.

Plugin có rất nhiều用途: phát nhạc, hiển thị bản đồ, xác minh tài khoản ngân hàng, kiểm soát đầu vào, v.v.

Bạn có thể sử dụng thẻ <object> hoặc <embed> để thêm plugin vào trang web HTML.

Những thẻ này định nghĩa container cho tài nguyên (thường là tài nguyên không phải HTML), dựa trên loại, chúng sẽ được trình duyệt hiển thị hoặc hiển thị bởi plugin ngoài.

Sử dụng phần tử <embed>

Thẻ <embed> định nghĩa container cho nội dung ngoài (không phải HTML) (đây là thẻ HTML5, không hợp lệ trong HTML4 nhưng hoạt động trong tất cả các trình duyệt).

Mã đoạn sau có thể hiển thị tệp MP3 được chèn vào trang web:

Mô hình

<embed height="100" width="100" src="song.mp3" />

Thử ngay

Vấn đề:

  • Thẻ <embed> không hợp lệ trong HTML 4. Trang web không thể được xác minh qua HTML 4.
  • Các trình duyệt khác nhau hỗ trợ định dạng âm thanh khác nhau.
  • Nếu trình duyệt không hỗ trợ định dạng tệp này và không có plugin, không thể phát âm thanh.
  • Nếu trình duyệt của người dùng không cài đặt plugin, không thể phát âm thanh.
  • Nếu chuyển đổi tệp này sang định dạng khác, vẫn không thể phát trong tất cả các trình duyệt.

Ghi chú:Sử dụng <!DOCTYPE html> (HTML5) để giải quyết vấn đề xác thực.

Sử dụng phần tử <object>

Thẻ <object tag> cũng có thể định nghĩa container cho nội dung ngoài (không phải HTML).

Mã đoạn sau có thể hiển thị tệp MP3 được chèn vào trang web:

Mô hình

<object height="100" width="100" data="song.mp3"></object>

Thử ngay

Vấn đề:

  • Các trình duyệt khác nhau hỗ trợ định dạng âm thanh khác nhau.
  • Nếu trình duyệt không hỗ trợ định dạng tệp này và không có plugin, không thể phát âm thanh.
  • Nếu trình duyệt của người dùng không cài đặt plugin, không thể phát âm thanh.
  • Nếu chuyển đổi tệp này sang định dạng khác, vẫn không thể phát trong tất cả các trình duyệt.

Sử dụng phần tử <audio> HTML5

Element <audio> là một phần tử HTML5, không hợp lệ trong HTML 4 nhưng hoạt động trong tất cả các trình duyệt.

Mô hình

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Trình duyệt của bạn không hỗ trợ định dạng âm thanh này.
</audio>

Thử ngay

Ví dụ trên sử dụng tệp mp3, vì vậy nó hoạt động trong Internet Explorer, Chrome và Safari.

Để làm cho đoạn âm thanh này hoạt động tương tự trong Firefox và Opera, đã thêm một tệp có loại ogg. Nếu thất bại, sẽ hiển thị thông báo lỗi.

Vấn đề:

  • Thẻ <audio> không hợp lệ trong HTML 4. Trang web của bạn không thể được xác minh qua HTML 4.
  • Bạn phải chuyển đổi tệp âm thanh thành định dạng khác.
  • 元素 <audio> không hoạt động trong trình duyệt cũ.

Ghi chú:Sử dụng <!DOCTYPE html> (HTML5) để giải quyết vấn đề xác thực.

Giải pháp HTML tốt nhất

Mô hình

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Thử ngay

Ví dụ trên đã sử dụng hai định dạng âm thanh khác nhau. Element <audio> của HTML5 sẽ thử phát âm thanh bằng mp3 hoặc ogg. Nếu không thành công, mã sẽ quay lại thử element <embed>.

Vấn đề:

  • Bạn phải chuyển đổi âm thanh thành định dạng khác.
  • Element <audio> không thể thông qua xác thực HTML 4 và XHTML.
  • Element <embed> không thể thông qua xác thực HTML 4 và XHTML.
  • Element <embed> không thể quay lại để hiển thị thông báo lỗi.

Ghi chú:Sử dụng <!DOCTYPE html> (HTML5) để giải quyết vấn đề xác thực.

Cách đơn giản nhất để thêm âm thanh vào trang web

Cách đơn giản nhất để thêm âm thanh vào trang web là gì?

Trình phát media của Yahoo chắc chắn là một trong số đó.

Sử dụng Yahoo Media Player là một cách khác biệt. Bạn chỉ cần để Yahoo hoàn thành công việc phát nhạc.

Nó có thể phát mp3 và một loạt các định dạng khác. Chỉ cần một dòng mã đơn giản, bạn có thể thêm nó vào trang web của mình, dễ dàng biến trang HTML thành danh sách phát chuyên nghiệp.

Yahoo Media Player

Mô hình

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Thử ngay

Sử dụng Yahoo Player là miễn phí. Để sử dụng nó, bạn cần chèn đoạn JavaScript này vào cuối trang web của bạn:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Sau đó chỉ cần đơn giản liên kết tệp MP3 vào HTML của bạn, JavaScript sẽ tự động tạo nút phát cho mỗi bài hát:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

Yahoo Media Player cung cấp cho người dùng của bạn một nút phát nhỏ gọn,而不是 trình phát đầy đủ. Tuy nhiên, khi bạn nhấp vào nút đó, trình phát đầy đủ sẽ xuất hiện.

Lưu ý rằng trình phát này luôn dừng ở đáy khung cửa sổ. Chỉ cần nhấp vào nó để di chuyển ra ngoài.

Sử dụng liên kết

Nếu trang web chứa liên kết đến tệp phương tiện, hầu hết các trình duyệt sẽ sử dụng “ứng dụng hỗ trợ” để phát tệp.

Mã đoạn sau đây hiển thị liên kết đến tệp mp3. Nếu người dùng nhấp vào liên kết, trình duyệt sẽ khởi động “ứng dụng hỗ trợ” để phát tệp này:

Mô hình

<a href="song.mp3">Play the sound</a>

Thử ngay

Âm thanh nội tuyến

Khi bạn chèn âm thanh vào trang web hoặc làm thành phần của trang web, nó được gọi là âm thanh nội tuyến.

Nếu bạn dự định sử dụng âm thanh nội tuyến trong ứng dụng web của mình, bạn cần nhận thức rằng nhiều người cảm thấy âm thanh nội tuyến rất khó chịu. Đồng thời, hãy lưu ý rằng người dùng có thể đã tắt tùy chọn âm thanh nội tuyến trong trình duyệt.

Chúng tôi khuyên bạn nên chỉ bao gồm chúng ở những nơi người dùng mong muốn nghe âm thanh nội tuyến. Một ví dụ tích cực là, khi người dùng cần nghe bản ghi và nhấp vào một liên kết, trang web sẽ mở ra và phát bản ghi.

Thẻ đa phương tiện HTML4.01

Thẻ Mô tả
<applet> Không được khuyến khích. Định nghĩa applet chèn.
<embed> Không được khuyến khích trong HTML4, được phép trong HTML5. Định nghĩa đối tượng chèn.
<object> Định nghĩa đối tượng chèn.
<param> Định nghĩa tham số đối tượng.

Thẻ đa phương tiện HTML5

Thẻ Mô tả
<audio> Thẻ định nghĩa âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác.
<embed> Thẻ định nghĩa nội dung được chèn, chẳng hạn như plugin.