Như đã nói ở bài trước, sử dụng shortcode để thu gọn nhiều thao tác tạo ra sự thuận lợi rất lớn cho người dùng. Chúng ta cũng đã coi qua
cách dùng shortcode để chèn nhạc MP3. Bài viết này là sự mở rộng hơn, cho phép chèn nhạc vào bài viết của Blogger với các ưu điểm sau:
- Hỗ trợ nhiều định dạng nhạc, bao gồm MP3, AAC, FLV, MP4
- Hỗ trợ chèn video từ Youtube
- Cho phép tùy biến nhiều tham số của player, VD như chiều cao, chiều rộng, tiêu đề bài hát, tên ca sĩ, màu sắc, ...
Cách làm ở bài viết này có thể áp dụng cho bất kỳ website nào (không nhất thiết phải là Blogger).
1. Cách cài đặt
Updated: Vì nhiều bạn gặp khó khăn với cách cài đặt cũ, nên tôi cập nhật lại cách cài đặt mới đơn giản hơn và hỗ trợ 2 kiểu hoạt động: toàn blog và chỉ trong 1 bài viết. Cài đặt theo cách cũ vẫn hoạt động bình thường.
a) Cài đặt cho toàn blog
Để sử dụng shortcode chơi nhạc này, bạn mở template của Blogger (Layout - Edit HTML hoặc mở file template), tìm đến thẻ đóng
</body> và chèn đoạn code sau
vào ngay trước nó:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/jquery.shortcode.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#Blog1').shortcode();
});
</script>
a) Cài đặt cho 1 bài viết đơn lẻ
Trong trường hợp bạn không muốn cài đặt cho cả blog, mà chỉ muốn cài cho 1 bài viết riêng lẻ (không phải lúc nào bạn cũng muốn post nhạc, phải không?) thì áp dụng cách dưới đây:
Sau khi soạn thảo xong bài viết, bạn chuyển sang chế độ Edit HTML và chèn đoạn code sau vào ngay đầu bài viết:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/jquery.shortcode.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#Blog1').shortcode();
});
</script>
Cuối cùng chỉ cần publish là xong!
2. Cách sử dụng
Shortcodes này được thiết kế theo 2 phần chính: audio và video. Chúng sử dụng 2 flash player khá nổi tiếng là
WP Audio Player (đã được nói đến trong
bài trước) và
JW Player.
WP Audio Player chỉ chơi được nhạc MP3, nhưng có khả năng tùy biến khá cao. Nó cho phép chơi cả playlist, tùy biến tên bài hát, tên ca sĩ, màu sắc, ...
Còn JW Player thì lại đa dạng về định dạng nhạc được hỗ trợ (MP3, AAC, FLV, MP4). Nó cũng chơi được video từ Youtube. Nó có khả năng tùy biến cao thông qua file cấu hình XML, nhưng cách làm này lại không áp dụng được trong trường hợp của chúng ta (do không thể tự động dùng javascript để sinh ra file XML theo ý muốn được), cho nên khả năng của nó cũng bị hạn chế đi nhiều, trong đó phải nói đến tính năng chơi playlist không dùng được :(.
Chúng ta sẽ xem xét 2 player này và các shortcodes hỗ trợ.
2.1. Cú pháp chung của việc viết shortcodes
Các shortcodes đều được viết theo dạng sau:
[tên_shortcodes:key_1=value_1|key_2=value_2|...|key_n=value_n]
trong đó lưu ý là tên_shortcode phải kèm theo dấu hai chấm (:) ngay phía sau, tên_shortcode có phân biệt chữ hoa chữ thường. Các cặp giá trị key_x=value_x (
hai bên dấu bằng (=) không có dấu cách) là để khai báo các tùy chọn của shortcode. Các giá trị value_x có thể chứa dấu cách. Các tùy chọn này
không bắt buộc phải có.
Thứ tự các cặp giá trị này không quan trọng (bạn thích ghi cái nào trước, cái nào sau đều được).
Cũng lưu ý thêm là sau dấu mở ngoặc vuông ([) và trước dấu đóng ngoặc vuông (]) không có dấu cách. (Trong các ví dụ dưới đây, tôi có để dấu cách để hiển thị code, tránh cho việc nó bị chuyển thành các file nhạc hay video)
2.2. Chơi nhạc MP3
Để sử dụng WP Audio Player để chơi nhạc MP3, bạn dùng shortcode như sau:
[ audio:url=link_đến_file_mp3 ]
trong đó
audio là tên shortcode. Bạn có thể dùng tên khác là
mp3, kết quả cũng y hệt như vậy.
Trong các tham số thì tham số bắt buộc phải có là
url, dùng để khai báo đường dẫn tới file nhạc định chơi. Nếu bạn định chơi 1 playlist thì liệt kê danh sách các đường dẫn của file nhạc, có phân cách nhau bằng dấu phảy (,).
Các tham số khác đều không bắt buộc, chúng bao gồm:
animation: dùng để đóng hoặc mở player khi mới bắt đầu. Giá trị gồm 'yes' (tức player sẽ đóng, khi click vào sẽ mở ra) và 'no' (player luôn luôn mở). Mặc định 'yes'.
artists: tên ca sĩ, nếu là 1 playlist thì đây là danh sách tên ca sĩ có phân cách bằng dấu phảy (,). Mặc định không có giá trị.
autostart: tự động chơi nhạc khi mở trang web. Giá trị gồm 'yes', 'no'. Mặc định 'no'.
loop: chơi lặp lại bài hát hoặc playlist khi kết thúc. Giá trị gồm 'yes', 'no'. Mặc định 'no'.
titles: tên bài hát, nếu là 1 playlist thì đây là danh sách tên bài hát có phân cách bằng dấu phảy (,). Mặc định không có giá trị (khi đó bài hát sẽ hiện tên Track #1, Track #2, ...).
volume: âm lượng ban đầu khi chơi nhạc. Giá trị từ 1 tới 100. Mặc định 60.
width: độ rộng của player. Giá trị tính bằng pixel. Mặc định 290.
Các tham số về màu sắc khá nhiều, các bạn
tham khảo tại trang của WP Audio Player.
VD sau đây sẽ hiển thị 1 playlist nhạc có 2 bài, có tùy biến tên bài hát, tên ca sĩ và chế độ lặp lại khi kết thúc với âm lượng khởi tạo là 100.
Shortcode của nó là:
[ audio:url=http://tuanh.org/music/neu.mp3,http://tuanh.org/music/honey.mp3|artists=Noo Phuoc Thinh,Ho Quynh Huong|loop=yes|titles=Neu,Honey|volume=100 ]
2.3. Chơi nhạc MP3, AAC, FLV, MP4 và Youtube
Để chơi các định dạng nhạc này, bạn chèn shortcode theo cú pháp sau:
[ music:url=link_đến_file_nhạc ]
trong đó
music là tên shortcode. Ngoài tên shortcode này, bạn có thể dùng tên khác là
video, flv, mp4, youtube, kết quả cũng y hệt như vậy.
Cũng tương tự như trên, tham số bắt buộc phải có là
url, dùng để khai báo đường dẫn tới file nhạc định chơi. Lưu ý là cái này chỉ chơi được 1 file nhạc mà không chơi được playlist (lý do đã nói ở trên). Trong trường hợp bạn chèn video từ Youtube, thì giá trị của biến này sẽ là link tới video đó.
Các tham số khác đều không bắt buộc, chúng bao gồm:
autostart: tự động chơi nhạc khi mở trang web. Giá trị gồm 'yes', 'no'. Mặc định 'no'.
backcolor: màu nền của thanh điều khiển. Giá trị ghi theo dạng mã màu hexa, không có ký tự # ở đầu. Mặc định #ffffff.
frontcolor: màu của chữ và các biểu tượng ở thanh điều khiển. Giá trị ghi theo dạng mã màu hexa, không có ký tự # ở đầu.
fullscreen: tự động chơi video ở chế độ toàn màn hình. Giá trị 'yes', 'no'. Mặc định 'no'.
icons: hiện/ẩn biểu tượng play (loading) ở chính giữa video. Giá trị 'true' (hiện), 'false' (ẩn). Mặc định 'true'.
lightcolor: màu của chữ và các biểu tượng ở thanh điều khiển khi di chuột vào. Giá trị ghi theo dạng mã màu hexa, không có ký tự # ở đầu.
loop: chơi lặp lại bài hát hoặc playlist khi kết thúc. Giá trị gồm 'yes', 'no'. Mặc định 'no'.
height: độ cao của player, chỉ dùng khi chơi nhạc video. Nếu file nhạc là MP3 hoặc AAC thì giá trị này sẽ được tự động điều chỉnh. Giá trị được tính bằng pixel. Mặc định 300.
volume: âm lượng ban đầu khi chơi nhạc. Giá trị từ 1 tới 100. Mặc định 60.
width: độ rộng của player. Giá trị tính bằng pixel. Mặc định 400.
Trên đây là các tham số chính,
danh sách đầy đủ các tham số hãy xem ở trang chủ của JW Player.
VD dưới đây chúng ta sẽ chèn thử 1 video MP4, có chút tùy biến về màu sắc, chiều rộng và chiều cao:
Shortcode của nó là:
[ music:url=http://tuanh.org/music/video.mp4|backcolor=c3456f|lightcolor=999999|height=400|width=400|volume=100 ]
Còn đây là chèn thử 1 bài MP3 cũng với player này:
Shortcode là:
[ music:url=http://tuanh.org/music/neu.mp3 ]
Chèn thử 1 video từ Youtube:
Shortcode là:
[ video:url=http://www.youtube.com/watch?v=R2hJMvZHqYA ]
Hy vọng rằng cách sử dụng các shortcodes này sẽ giúp các bạn tiện dụng hơn khi viết bài trong Blogger.
