Dùng thẻ <audio> HTML5 để chèn nhạc vào website
Xưa nay để 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 code, webmaster và những người quản trị nội dung nhẹ gánh hơn rất nhiều. Chèn nhạc trực tiếp vào trang web chỉ với một thẻ <audio>
Thử liền nhé 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:
<audio src=audio.mp3" controls />
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, thanh trượt này sẽ khác nhau trên các trình duyệt khác nhau nhé.
Ngoài ra các bạn cũng cần hiểu thêm các thuộc tính sau :
scr
Thuộc tính chỉ định file âm thanh được phát, rất quen thuộc mọi người 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
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 play ngay khi tải trang.
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.
<audio src="audio.mp3" controls preload="none" />
Vì HTML5 vẫn còn mới nên có một số trình duyệt vẫn chưa hỗ trợ vậy bạn cần thông báo cho họ biết điều này bằng cách thêm đoạn test
<audio src="audio.mp3" controls >
<p>Trình duyệt của bạn không hỗ trợ audio vui lòng<a href="audio.mp3">download</a> file audio về máy nếu muốn nghe.</p>
</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ẻ <p>. Đoạn text này phải nằm giữa thẻ <p> và thẻ <p> 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 đó.
<audio src="audio.mp3" controls>
<object data="mediaplayer.swf?audio=audio.mp3">
<param name="movie" value="mediaplayer.swf?audio=audio.mp3">
<p>trình duyệt của bạn không hỗ trợ audio hoặc flash vui lòng <a href="audio.mp3">download</a> file mp3 về máy nếu muốn nghe.</p>
</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ẻ <p>
Và đây là full :
Tuy nhiên hiện có rất nhiều loại thiết bị cũng như nhiều loại trình duyệt khác nhau, từ để bàn tới nên đây là full code cho tất cả
<audio controls>
<source src="audio.ogg">
<source src="audio.mp3">
<object data="mediaplayer.swf?audio=audio.mp3">
<param name="movie" value="mediaplayer.swf?audio=audio.mp3">
<p>Your browser does not support native audio or Flash. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.</p>
</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ẻ <p>
Chúc các bạn thành công !
This comment has been removed by the author.
ReplyDelete