อีกหนึ่งทางเลือกการสร้างเครื่องเล่น MP3 ลงในบล็อกของคุณ

image

วิธีการในการใส่เพลงลงไปในบล็อกนั้นผมได้เคยนำเสนอไปบ้างแล้ว เช่นในบทความ วิธีใส่ดนตรี mp3 และไฟล์เสียงต่างๆ ลงในบล็อก หรือ ในบทความ การสร้างเครื่องเล่นเพลงในบล็อก จาก mixpod.com

สำหรับบทความนี้ผมจะนำเสนออีก 1 ทางเลือกในการการสร้างเครื่องเล่น MP3 และสร้าง Playlist ด้วยตัวคุณเองโดยใช้เพลงที่คุณโปรดปราน ( ชนิดที่หาที่ไหนไม่มีนอกจากเครื่องคุณเอง )


ข้อดีของวิธีนี้คือ

- สามารถเลือกเพลงได้ตามความต้องการมากขึ้น
- เราสามารถปรับขนาดได้ตามความต้องการ
- เครื่องเล่นมีความสวยงาม และใช้งานง่าย

ขั้นทดลองใช้

ก่อนเริ่มขั้นตอนผมอยากให้ทุกคนลองใช้โค้ดด้านล่างนี้ติดตั้งลงในบล็อกของคุณเพื่อทดลองเสียก่อน ถ้าหากถูกใจก็จึงทำการติดตั้งต่อไปครับ

<script src="http://hackublog.googlecode.com/files/swfobject.js" type="text/javascript"></script>
<div id="flashPlayer">
HACKUBLOG PLAYER
</div>
<script type="text/javascript">
   var so = new SWFObject("http://www.fileden.com/files/2010/1/18/2729440/playerMultipleList.swf", "mymovie", "250", "200", "7", "#FFFFFF"); 
   so.addVariable("autoPlay","no")
   so.addVariable("playlistPath","http://www.fileden.com/files/2010/1/18/2729440/Hackublog-playlists-4U.xml")
   so.write("flashPlayer");
</script>


( การใส่โค้ดในบล็อก ทำได้โดย เพิ่ม Gadget ชนิด HTML/java script วางโค้ดลงไป แล้วบันทึกครับ )

MP3_blogger

ทดสอบดูครับ


HACKUBLOG PLAYLIST




ขั้นเตรียมการ

1. ให้ทุกคนเตรียมเพลง .MP3 ที่ชอบไว้ประมาณไม่เกิน 10 เพลง (มากไปเดี๋ยวช้า งง ฯ)

image

2. สมัครสมาชิก Fileden.com โดยคลิกสมัครได้   ที่นี่  (สมัครเพื่อเอาไว้เก็บเพลง ไฟล์เครื่องเล่น และ ไฟล์playlist)

image

3. ดาวน์โหลดเครื่องเล่น PlayerMutiplelist ที่นี่ หรือ ที่นี่

image


ขั้นตอนการสร้างและติดตั้ง

4. ให้ทำการ Upload ไฟล์เพลง .MP3 ที่เตรียมไว้เอาไว้ที่ Fileden.com หรือ Free file Host ที่อนุญาติให้ใช้ Hotlink ได้

image 

image


Free file host อื่นที่แนะนำ (สำหรับฝากไฟล์ mp3 ครับ)

http://www.fileden.com/(ต้องลงทะเบียน) (Bandwith: 5GB /เดือน)
http://kiwi6.com/ (ไม่ต้องลงทะเบียน) (Bandwith: 500MB /วัน)
http://www.mailboxdrive.com/ (ไม่ต้องลงทะเบียน) (Bandwith: Unlimited)
http://www.upload-mp3.com (ต้องลงทะเบียน)
http://www.opendrive.com(ต้องลงทะเบียน)


5. เมื่อฝากไฟล์แล้วให้คัดลอก Direct Link ของเพลงนั้น ๆ เก็บไว้ (Link ของไฟล์เพลงครับ)

image


6. นำ Direct Link ของเพลงนั้น ๆ มา สร้าง Playlist โดย

6.1 เปิดโปรแกรม notepad หรือโปรแกรม wordpad ในเครื่องคอมพิวเตอร์ของคุณขึ้นมา(อยู่ที่ Start >> All program >>Accessories) แล้วคัดลอกโค้ดด้านล่างนี้ไปสร้าง Playlist

<?xml version="1.0" encoding="UTF-8"?>
<xml>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงแรก</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 2</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 3</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 4</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 5</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 6</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 7</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 8</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 9</title>
</track>

<track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลงที่ 10</title>
</track>

       
</xml>



อธิบาย :

- URL ของเพลง.mp3 นั้นได้มาจากขั้นตอนที่ 5
- เราสามารถเพิ่มรายการเพลงเท่าไรก็ได้โดยการแทรกโค้ดต่อไปนี้ลงไป

    <track>
        <path>URL ของเพลง.mp3</path>
        <title>ชื่อเพลง</title>
   </track>


- ในทำนองเดียวกันถ้าต้องการใส่เพียง 3 เพลงก็ให้ลบ trฟck ที่เหลือทิ้งไปครับ


6.2 เมื่อสร้าง Playlist ความต้องการได้แล้วให้บันทึกไฟล์เป็นไฟล์ที่มีนามสกุล .XML ซึ่งทำได้โดยเลือก Save as >> ตั้งชื่อไฟล์(เป็นอะไรก็ได้) แล้วใส่นามสกุลเป็น .xml ในที่นี้สมมติว่าตั้งชื่อเป็น Playlist.xml

image

image


7. หลังจากที่ได้ Playlist.xml แล้ว ให้ Upload ไฟล์  playerMultipleList.swf  (ที่ดาวน์โหลดมาในขั้นที่ 3)  และ  Playlist.xml (ที่ได้มาจากขั้นที่ 6) ฝากไว้ที่ Fileden.com  (หากต้องการฝากไว้ที่อื่นๆ จะต้องให้ไฟล์ทั้งสองอยู่ที่ Host เดียวกัน )


image


8. จากขั้นที่ 7 ให้นำ Direct Link ของ playerMultipleList.swf  และ Playlist.xml มาแทนที่ในโค้ดสีแดงข้างล่าง

<script type="text/javascript" src="http://hackublog.googlecode.com/files/swfobject.js" ></script>
<div id="flashPlayer">
HACKUBLOG PLAYLIST
</div>
<script type="text/javascript">
   var so = new SWFObject("http://www.fileden.com/files/2010/*********/playerMultipleList.swf", "mymovie", "230", "200", "7", "#FFFFFF"); 
   so.addVariable("autoPlay","no")
   so.addVariable("playlistPath","http://www.fileden.com/files/2010/*********/Playlist.xml")
   so.write("flashPlayer");
</script>



9. เมื่อสร้างโค้ดเสร็จแล้วให้นำไปติดตั้งในบล็อก ซึ่งทำได้โดย

ไปที่แผงควบคุม >> รูปแบบ  >> องค์ประกอบของหน้า >> เพิ่ม Gadget HTML/จาวาสคริปต์


image


MP3_blogger


วางโค้ดในข้อ 8 ลงไปแล้วปรับความกว้าง และความสูงที่โค้ดสีน้ำเงินให้พอดีกับ Template ของคุณ และบันทึกก็ถือเป็นการจบขั้นตอนครับ

CraditPlayer : Premiumbeat.com
Hack for Blogger : Hackublog

ตอนนี้มีความคิดเห็น : 6 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ทำไมเวลาเพลงมันเล่น
    ขาด ๆ หาย ๆ ครับ
    กะตุกอะครับ
    แต่ยังไงก็ขอบคุณ สำหรับเทคนิคดี ๆ ครับ

  1. เป็นเพราะว่า server ที่เราฝากเพลงไว้รับ-ส่ง ข้อมูลได้ช้า ครับ (เราไม่มี server เองก็เลยเป็นข้อเสียครับ)

  1. ทำไม่เห็นได้เลยครับ

  1. @MulbErry TEa matE: ตอนนี้จาวาสคริปต์ที่ผมฝากไว้ไม่ทำงานครับ

    http://hackublog.googlecode.com/files/swfobject.js

    ยังทำไม่ได้ตอนนี้ครับ ผมจะค่อย ๆ ทยอยแก้ไขบทความไปเรื่อย ๆ ครับ บทความที่เกี่ยวกับการใช้จาวาสคริปต์บน googlecode.com ก็ขอให้อย่าเพิ่งลงมือทำตอนนี้ครับ ขอบคุณที่เข้าใจครับ

  1. @MulbErry TEa matE: ถ้าต้องการทำจริง ๆ ให้แทนที่

    http://hackublog.googlecode.com/files/swfobject.js

    ด้วย
    http://sites.google.com/site/hackublogcodex/home/code/swfobject.txt

    แนะนำให้อ่านวิธีฝากจาวาสคริปต์ด้วยตัวเองโดยทำตามบทความนี้ครับ

    http://www.hackublog.com/2010/10/javascript-hackublog.html

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel