Dùng thẻ <audio> HTML5 thay short code để chèn nhạc vào website

Dùng thẻ

Vì nhiều lý do, Blog Thiết Kế không còn được phát triển. Các bài viết cũ sẽ được giữ nguyên để mọi người tham khảo. Tuy nhiên các bạn không được bình luận cũng như hỗ trợ. Các Metro Templates đã phát hành bạn đọc sẽ được hỗ trợ ở lyminhtriet [dot] com. Nếu đã từng yêu mến Blog Thiết Kế hãy ghé thăm lyminhtriet [dot] com!

Trước đây để chèn nhạc vào blog ta phải dùng một plugin của bên thứ 3 với sự hỗ trợ của flash tuy nhiên khi HTML5 ra đời đã giúp cho các webmaster và những người quản trị nội dung nhẹ gánh hơn rất nhiều. Tôi còn nhớ cách đây 2 năm khi Rilwis đăng tải bài viết ShortCode hoàn thiện để chèn nhạc vào Blogger và website khiến rất nhiều anh em blogger mừng như bắt được vàng. Tuy nhiên ngay lúc này đây công việc đã trở nên đơn giản hơn rất nhiều anh em có thể chèn nhạc trực tiếp vào trang web của mình chỉ với một thẻ <audio>

Hiện tại thẻ <audio> của HTML5 đã hỗ trợ các trình duyệt mới nhất được liệt kê ở đây

Tuy nhiên là một webmaster anh em cần phải lường trước một số trường hợp có thể xảy ra như trình duyệt không hỗ trợ HTML5 (nhắc đến vụ này mình cực kỳ bực mình với mấy thằng IE – ngu không thể tả – sr các bạn). Cho nên bài viết này mình cũng sẽ hướng dẫn phương án khắc phụ tình trạng không hỗ trợ HTML5 của một số trình duyệt cũ.

1. Cú pháp đơn giản

Cú pháp của nó rất đơn giản, bạn chỉ cần chèn thẻ <audio> với vài thông số là xong. Cơ bản nhất bạn chỉ cần chèn:

Thuộc tính controls giúp hiển thị một thanh trượt điều khiển trên trình duyệt. Điều nên chú ý là thanh trượt này sẽ khác nhau trên các trình duyệt khác nhau. Cụ thể như sau

2. Thuộc tính nâng cao

Tuy nhiên để hoàn toàn điều khiển được thẻ <audio> thì mình phải tìm hiểu thêm một số thuộc tính quan trọng sau.

scr

Nó chỉ định file âm thanh được phát. Thuộc tính này rất quen thuộc anh em chắc gặp cũng nhiều nhất là khi chèn ảnh vào bài viết chẳng hạn thẻ <img> cũng có thuộc tính này.

controls

Như trong ví dụ ở trên, thuộc tính này giúp hiển thị một thanh trượt điều khiển.

autoplay

Thuộc tính này sẽ giúp bài nhạc tự động được hơi ngay khi tải trang. Chú ý nhé anh em, mình rất kỵ vụ này. Có nhiều trang mình không thèm đọc chỉ vì làm phiền người khác bằng những bản nhạc nền. Nếu sử dụng thì phải chắc chắn làm sao để độc giả có thể tắt được âm thanh nhanh chóng.

loop

Vòng lặp. Khi chơi hết bản nhạc thì trình duyệt sẽ tự động phát lại bản nhạc đó từ đầu hết lần này đến lần khác. Đó là một infinity loop – vòng lặp vô cùng.

preload { auto | metadata | none }

Thuộc tính preload này quy định việc có nên tải về file nhạc hay không. Nó chỉ được FF, Chrome và Safari hỗ trợ.

auto = files sẽ tự động được tải.
metadata = chỉ tải khi file metadata của trang load (chưa hiểu lắm!).
none = file âm thanh chỉ được tải về khi đọc giả đồng ý.

Xem ví dụ để hiểu rõ hơn về những thuộc tính này.

3. Hỗ trợ những trình duyệt cũ

HTML5 còn quá mới mẻ và chỉ có một số phiên bản trình duyệt mới hỗ trợ nó, đối với các trình duyệt phiên bản cũ người ta vẫn phải trông chờ vào những plugin của bên thứ 3 hoạt động trên nền flash như jw player. Vậy làm sao để vừa sử dụng HTML5 vừa sử dụng được flash? HTML5 đã lường trước được chuyện này và giải pháp của nó đơn giản đến không ngờ.

Trước tiên ta có thể thông báo một dòng text cho người đọc biết rằng trình duyệt của họ không hỗ trợ HTML5 nên không nghe được âm nhạc.

Your browser does not support native audio. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.

</audio>

Trình duyệt sẽ tự động bỏ qua thẻ audio và đọc toàn bộ đoạn text nằm giữa thẻ . Đoạn text này có thể dài tùy ý miễn sao nó phải nằm giữa thẻ và thẻ phải nằm giữa thẻ<audio>

Nhưng như vậy vẫn chưa phải là giải pháp. Giải pháp là file âm nhạc phải được chơi trên tất cả các trình duyệt. Và đây là đoạn code tuyệt vời đó.

Your browser does not support native audio or Flash. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.

</object>

</audio>

Thẻ <audio> của HTML5 còn cho phép ta chèn vào giữa nó một object và như vậy ta thoải mái nhạc bằng cách thêm plugin vào. Trong trường hợp plugin không hoạt động thì vẫn còn dòng text giữa thẻ

4. Tuyệt chiêu!

Tuy nhiên ngày nay thế giới di động càng càng có nhiều sản phẩm nhu Iphone, Ipad, các SmartPhone. Tablet có khả năng duyệt web làm sao để các trình duyệt trên các thiết bị này cũng có thể phát được nhạc?

Các bộ code giải mã của các trình duyệt khác nhau dẫn tới có những loại file mà trình duyệt này hiểu những trình duyệt kia chả hiểu “mô tê” gì cả. Nếu bạn muốn tất cả các trình duyệt trên các thiết bị di động đều hiểu thì phải dùng đoạn code sau.

Your browser does not support native audio or Flash. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.

</object>

</audio>

Đoạn code này hoạt động như sau: Trình duyệt hỗ trợ HTML5 sẽ đọc thấy thẻ <audio> nó biết rằng phải chơi một file nhạc, nhưng là files nào? Nó sẽ bắt đầu dò và sẽ phát file đầu tiên mà nó hiểu được, nếu nó chẳng hiểu file nào hết thì nó bắt đầu đọc tới <object> và phát nhạc dựa vào plugin. Nếu không hiểu nữa thì nó đành hiện ra dòng text giữa thẻ

Với HTML5 giờ đây việc chèn âm nhạc vào website dễ như trở bàn tay, chẳng khác nào chèn một tấm ảnh. HTML5 đã và đang làm cuộc cách mạng giúp các webmaster chúng ta ngày càng “dễ thở” hơn và người dùng có những trải nghiệm tuyệt vời. Không nghi ngờ gì nữa HTML5 chính là tiêu chuẩn của thiết kế web hiện đại.

Hồng Hòa Vi