Â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 phần mềm bổ sung

Phần mềm bổ sung 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.

Phần mềm bổ sung có rất nhiều用途: phát nhạc, hiển thị bản đồ, xác thực 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 phần mềm bổ sung vào trang web HTML.

Những thẻ này định nghĩa bộ chứa 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 phần mềm bổ sung từ bên ngoài.

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

Thẻ <embed> định nghĩa bộ chứa nội dung外部（không phải HTML）. (Đây là một 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ử nghiệm trực tiếp

Vấn đề:

  • Thẻ <embed> trong HTML 4 là无效的. Trang web không thể được xác thực 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 mà không có phần mềm bổ sung, không thể phát âm thanh.
  • Nếu trình duyệt của người dùng không cài đặt phần mềm bổ sung, 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 bộ chứa nội dung外部（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ử nghiệm trực tiếp

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 mà không có phần mềm bổ sung, không thể phát âm thanh.
  • Nếu trình duyệt của người dùng không cài đặt phần mềm bổ sung, 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ử nghiệm trực tiếp

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 loại ogg. Nếu thất bại, sẽ hiển thị thông báo lỗi.

Vấn đề:

  • Thẻ <audio> trong HTML 4 là无效的. Trang web của bạn không thể được xác thực qua HTML 4.
  • Bạn phải chuyển đổi tệp âm thanh thành định dạng khác.
  • Element <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ử nghiệm trực tiếp

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ẽ fallback thử element <embed>.

Vấn đề:

  • Bạn phải chuyển đổi âm thanh sang đị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ể fallback để 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ì?

Bộ phát media của Yahoo hoàn toàn xứng đáng.

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ử nghiệm trực tiếp

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, thay vì bộ phát hoàn chỉnh. Tuy nhiên, khi bạn nhấp vào nút này, bộ phát hoàn chỉnh sẽ hiện ra.

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

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 phụ để 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 này, trình duyệt sẽ khởi động ứng dụng phụ để phát tệp:

Mô hình

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

Thử nghiệm trực tiếp

Âm thanh inline

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 inline.

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

Điều chúng tôi khuyến khích nhất là chỉ bao gồm chúng khi người dùng mong muốn nghe âm thanh inline. 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 liên kết nào đó, trang 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 chèn, chẳng hạn như plug-in.