Tạo một trình nghe nhạc MP3 mang phong cách của riêng bạn vào blog

[FD's BlOg] - Tiện ích sẽ giúp các bạn tạo một trình nghe nhạc MP3 đơn giản vào trong blog của bạn, với những bài hát do chính bạn chọn, kèm theo những hình ảnh hiển thị của riêng bạn.

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.

Hình minh họa:

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.