- 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
Để 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 phần:
1 | <data:post.body/> |
và sửa nó thành:
1 | <span class="post-body"><data:post.body/>span> |
trong đó tên của class ở đây được đặt là post-body. Bạn có thể đặt là tên bất kỳ đều được cả (nhưng phải nhớ để chút nữa sẽ dùng).
Nếu bạn cài đặt cho 1 website bất kỳ, thì bạn cũng gom phần nội dung cần dùng shortcode vào 1 thẻ span với tên class như vậy.
Sau đó, ở ngay trước thẻ đóng các bạn chèn đoạn code sau:
1 | <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'type='text/javascript'>script> |
2 | <scriptsrc='http://rilwis.googlecode.com/svn/trunk/blogger/jquery.shortcode.min.js'type='text/javascript'>script> |
3 | <script type='text/javascript'> |
4 | $(document).ready(function() { |
5 | $('.post-body').shortcode(); |
6 | }); |
7 | script> |
Bạn lưu ý là ở dòng sát cuối trong đoạn code này có dùng đến tên class post-body đã nói ở trên. Nếu bạn đổi sang tên khác thì nhớ sửa lại ở đây cho phù hợp.
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:
1 | [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.
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:
1 | [ 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à:
1 | [ 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:
1 | [ 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à:
1 | [ 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à:
1 | [ music:url=http://tuanh.org/music/neu.mp3 ] |
Chèn thử 1 video từ Youtube:
Shortcode là:
1 | [ 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.
Không có nhận xét nào:
Đăng nhận xét