Với việc hiển thị một trình nghe nhạc vào blog của bạn đơn giản chỉ mang tính giả trí, và một phần tạo ra phong cách riêng cho blog của bạn, với những bài nhạc mà bạn yêu thích, những hình ảnh của riêng bạn, thì át hẳn nó sẽ là riêng biệt. Và trình nghe nhạc này chỉ có thể chơi được nhạc mp3.
Tiện ích chỉ đơn giản gồm các phần cơ bản như:
- Các nút chơi nhạc cơ bản của một trình nghe nhạc.
- Dòng hiển thị bài hát đang được chơi.
- Phần của sổ chính gồm 2 phần : bên trái hiển thị hình ảnh, bên phải hiển thị list danh sách các bài nhạc.
Sau đây là các bước cài đặt:
1. Đầu tiên bạn phải có file chạy xspf_player.swf có thể download ở đây.
2. Sau đó giả nén ra và upload file xspf_player.swf lên 1 host nào đó. Ví dụ mình sử dụng host free của Google đó là Googlesite. Link sẽ có dạng như sau : http://sites.google.com/site/fdblogsite/Home/xspf_player.swf
3. Upload nhạc của bạn, hoặc có thể lấy link nhạc từ các website nghe nhạc.
4. Tạo file XSPF Music Playlist.
-Các bạn mở Notepad (trong máy tính của bạn) và copy đọan code bên dưới (nhớ bổ sung list nhạc của bạn vào) sau đó lưu file lại với tên là myplaylist với phần mở rộng là .xspf (như vậy file có tên như sau myplaylist.xspf).
Chú ý: phần mở rộng phải là .xspf, nếu sai tiện ích sẽ không chạy được.
Bây giờ dán code bên dưới vào Notepad:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
<title>FD's BlOg - MP3 Player</title>
<trackList>
<track>
<location>http://URL.com/song1.mp3</location>
<image>http://URL.com/song1.jpg</image>
<annotation>Song1 display text</annotation>
</track>
<track>
<location>http://URL.com/song2.mp3</location>
<image>http://URL.com/song2.jpg</image>
<annotation>Song2 display text</annotation>
</track>
<track>
<location>http://URL.com/song3.mp3</location>
<image>http://URL.com/song3.jpg</image>
<annotation>Song3 display text</annotation>
</track>
<track>
<location>http://URL.com/song4.mp3</location>
<image>http://URL.com/song4.jpg</image>
<annotation>Song4 display text</annotation>
</track>
<track>
<location>http://URL.com/song5.mp3</location>
<image>http://URL.com/song5.jpg</image>
<annotation>Song5 display text</annotation>
</track>
</trackList>
</playlist>
Chú ý :
- Dòng code màu đỏ : là tên sẽ hiển thị cho trình nghe nhạc
- Dòng code màu xanh dương : là link của bài nhạc, và ảnh của bài nhạc.
- Dòng code màu xanh : là dòng text sẽ hiển thị khi bài hát được chơi, ví dụ tên bài hát.
- Khi thêm bài mới chỉ cần download file về myplaylist.xspf chèn thêm code như bên dưới rồi upload lên lại:
<track>
<location>http://URL.com/song6.mp3</location>
<image>http://URL.com/song6.jpg</image>
<annotation>Song6 display text</annotation>
</track>
<track>
<location>http://URL.com/song7.mp3</location>
<image>http://URL.com/song7.jpg</image>
<annotation>Song7 display text</annotation>
</track>
5. Sau khi chúng ta đã có file myplaylist.xspf, hãy up nó lên host,ví dụ như link này : http://sites.google.com/site/fdblogsite/Home/myplaylist.xspf
6. Bây giờ ta chèn trình nghe nhạc vào blog.
- Vào blog, tạo 1 widget HTML/Javascript
- Sau đó dán code bên dưới vào:
<object codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=" type="application/x-shockwave-flash" standby="Player is loading ..." height="160" width="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="_cx" value="10583">
<param name="_cy" value="4445">
<param name="FlashVars" value="">
<param name="Movie" value="http://sites.google.com/site/fdblogsite/Home/xspf_player.swf?playlist_url=http://sites.google.com/site/fdblogsite/Home/myplaylist.xspf">
<param name="Src" value="http://sites.google.com/site/fdblogsite/Home/xspf_player.swf?playlist_url=http://sites.google.com/site/fdblogsite/Home/myplaylist.xspf">
<param name="WMode" value="Window">
<param name="Play" value="0">
<param name="Loop" value="-1">
<param name="Quality" value="High">
<param name="SAlign" value="LT">
<param name="Menu" value="-1">
<param name="Base" value="">
<param name="AllowScriptAccess" value="sameDomain">
<param name="Scale" value="NoScale">
<param name="DeviceFont" value="0">
<param name="EmbedMovie" value="0">
<param name="BGColor" value="E2E2E2">
<param name="SWRemote" value="">
<param name="MovieData" value="">
<param name="SeamlessTabbing" value="1">
<param name="Profile" value="0">
<param name="ProfileAddress" value="">
<param name="ProfilePort" value="0">
<param name="AllowNetworking" value="all">
<param name="AllowFullScreen" value="false">
<embed src="http://sites.google.com/site/fdblogsite/Home/xspf_player.swf?playlist_url=http://sites.google.com/site/fdblogsite/Home/myplaylist.xspf" quality="high" bgcolor="#E2E2E2" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="160" width="400">
</embed>
</object>
Chú ý :
- Dòng code màu đỏ : thay đổi kích thước cho trình nghe nhạc của bạn
- Dòng code màu cam: màu nền của trình nghe nhạc.
- Dòng code màu xanh dương : là địa chỉ của file playlist (myplaylist.xspf)
- Dòng code màu xanh : địa chỉ file chạy (xspf_player.swf)
7. Đặt nó vào nơi mà bạn muốn hiển thị. Rồi save template.
Như vậy đã xong. Chúc các bạn thành công.
sao mình up lên nó có đuôi mylist.xspf.txt nữa nó ko chay cậu giúp với.
file mylist.xspf up lên vậy đúng chưa http://ndkhanh1989.110mb.com/images/myplaylist.xspf.
@Duy Khánh :Có đuôi .txt là sai rồi bạn.
Bạn nhớ là khi tạo file myplaylist.xspf từ Notepad, bạn nên chỉnh chế độ hiển thị phần mở rộng của file để tiện thay đổi.
http://jungjin-shin.blogspot.com cho em xin liên kết
anh ơi, em tạo rồi nhưng sao nó ko hiện cái list nhạc vậy anh @@!
bạn có thể thử ^ v ^ V.I.P
cho em hỏi muốn cho nó tự Play nhạc làm như nào ak
cái này hay ghê tai opera mini android
:) tks vì đã chia sẻ
loa hội trường
Tôi làm như bạn hướng dẫn nhưng không load file nhạc lên trình nghe nhạc được. Xin được giúp đỡ!
Hướng dẫn hay quá :)
quán karaoke hay ở tphcm
Hay quá bạn, cám ơn bài viết đã chia sẻ. Chúc blog của bạn thành công nhé :)
Bên mình thuộc hệ thống karaoke lớn nhất việt nam . Quán Karaoke Icool đẹp nơi để bạn thăng hoa, thỏa mãn niềm đam mê ca hát.
Tham khảo tại website: quán karaoke giá rẻ ở tphcm
Hay quá bạn, cám ơn bài viết đã chia sẻ. Chúc blog của bạn thành công nhé :)
Bên mình thuộc hệ thống karaoke lớn nhất việt nam . Quán Karaoke Icool đẹp nơi để bạn thăng hoa, thỏa mãn niềm đam mê ca hát.
Tham khảo tại website: quán karaoke giá rẻ ở tphcm
Cám ơn bạn đạ chia sẻ bài viết.
Ghé tương xem quán karaoke sài gòn icool của chúng tôi
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.