ติดตั้งเพลง MP3 ลงบน Blogger ง่าย ๆ ด้วย Yahoo Media Player

สอนทำบล็อก การใส่เครื่องเล่นเพลง หรือเครื่องเล่น MP3 ลงบน Blogger นั้นสามารถทำได้หลายวิธี วิธีที่ผมได้เคยเขียนบทความนำเสนอไปแล้วก็มีทั้งสิ้น 3 วิธีด้วยกัน ได้แก่  การสร้างเครื่อง เล่นเพลงในบล็อก จาก mixpod.com    วิธีใส่ดนตรี mp3 และไฟล์เสียงต่างๆ ลงในบล็อก และ บทความ อีกหนึ่งทางเลือกการ สร้างเครื่องเล่น MP3 ลงในบล็อกของคุณ
สำหรับในบทความนี้ผมจะนำเสนออีก 1 วิธีในการติดตั้งเครื่องเล่น MP3 ลงใน Blogger ซึ่งตามมุมมองของผมคิดว่าวิธีนี้เป็นวิธีที่ง่ายที่สุดเมื่อเทียบกับหลาย ๆ วิธีที่ได้กล่าวมาแล้ว โดยในที่นี้ก็จะใช้บริการของ mediaplayer.yahoo.com
ถ้าหากคุณต้องการติดตั้งเพลงเพื่อเป็นสีสันให้กับ blog ของคุณก็ดำเนินการตามขั้นตอนต่อไปนี้ได้เลยครับ


ตัวอย่างในการทำงานของ yahoo mediaplayer
http://hackudesign.blogspot.com


ขั้นตอนการติดตั้ง yahoo mediaplayer บน Blogger

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

1. เตรียมไฟล์ MP3 ที่คุณต้องการเล่นบน blog ของคุณ



2. Upload ไฟล์ MP3 ขึ้นไปบน Free Host ที่อนุญาตให้ทำ Hotlink แนะนำ Free File Host ต่อไปนี้

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

โดยส่วนตัวแล้วแนะนำให้ฝากกับ mailboxdrive ครับ

วิธีทำ blogger และวิธีทำ blogspot


3. เมื่อฝากไฟล์จนครบแล้ว ให้คัดลอก URL ของเพลงเตรียมเอาไว้สำหรับติดตั้ง โค้ดที่ได้จะคล้ายกับโค้ดด้านล่าง
http://yourhost.com/yoursong.mp3

4. ขั้นสร้าง Playlist และโค้ดสำหรับติดตั้ง บน Blogger
ให้นำ URL ของเพลงในขั้นที่ 3 มาสร้างโค้ด Playlist โดยใช้โค้ดต่อไปนี้
<a href="http://yourhost.com/yoursong1.mp3">ชื่อเพลง1</a>
<a href="http://yourhost.com/yoursong2.mp3">ชื่อเพลง2</a>
<a href="http://yourhost.com/yoursong3.mp3">ชื่อเพลง3</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ถ้าต้องการให้มีหลาย ๆ เพลง ก็เพิ่มโค้ดด้านล่างนี้เข้าไปได้เรื่อย ๆ
<a href="http://yourhost.com/yoursong.mp3">ชื่อเพลง</a>
เมื่อสร้างเส็จแล้วจะได้โค้ดดังตัวอย่างด้านล่าง ( สร้าง Playlist โดยใช้ 4 เพลง )
<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>



ขั้นการติดตั้ง

5. การติดตั้ง บน Blogger ทำโดย  Log in Blogger เข้าไปที่  >> ไปที่แผงควบคุม >> การออกแบบ >> องค์ประกอบของหน้า

ใส่เพลง Mp3 ในบล็อก

จากนั้นเพิ่ม Gagdet ชนิด HTML/จาวาสคริปต์ ในตำแหน่งที่ต้องการจากนั้นวางโค้ดในขั้นที่ 4 ลงไปและบันทึก

วิธีใส่เพลงใน blogger  

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



6. ขั้นสุดท้ายเป็นการปรับแต่งการแสดงผล
6.1 จะเห็นว่าถ้าไม่มีการปรับแต่งเพิ่มเติม ชื่อของแต่ละ Plalist จะติดกันเกินไป ดูแล้วไม่สวยงาม

สอนแต่งบล็อก
เราแก้ปัญหาในกรณีนี้โดย ใช้แท็ก <br/> เข้ามาช่วยโดยแทรกลงไปในโค้ดเดิมดังนี้

<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<br/>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<br/>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<br/>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ผลที่ได้จะเป็นดังรูปด้านล่าง

วิธีสร้าง blogspot
หมายเหตุ แท็ก <br/> เป็น HTML แท็กที่ใช้สำหรับตัดข้อความให้ขึ้นบรรทัดใหม่


6.2 แต่ถ้าในกรณีที่ไม่ต้องการให้แสดง Link ของ Playlist และต้องการให้แสดงเพียงตัว Player เท่านั้นให้ใช้โค้ด

<div style='display:none;'>
<a href="http://uploads.mp3songurls.com/I-Will-Always-Love-You.mp3">I WILL ALWAY LOVE YOU</a>
<a href="http://uploads.mp3songurls.com/Take-Me-to-Your-Heart.mp3">TAKE ME TO YOUR HEART</a>
<a href="http://uploads.mp3songurls.com/New-Divide.mp3">NEW DIVIDE</a>
<a href="http://uploads.mp3songurls.com/Say-It-s-possible.mp3">SAY IT'S POSSIBLE</a>
</div>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ผลที่ได้ก็จะมีเพียงตัว Player เท่านั้นและสามารถเล่นเพลงต่าง ๆ โดยเล่นจากตัว Player โดยตรง

ทำ blog

หมายเหตุ
หากใครมีปัญหาเรื่องการปรับระดับเสียงของ Player ให้กด Shift + ปุ่มขึ้น/ลง เพื่อปรับระดับเสียงแทนการใช้เมาส์

ถ้ามีปัญหาอื่น ๆ ในการติดตั้งโปรดสอบถามที่บทความนี้ได้เลย และถ้าถูกใจบทความนี้โปรดช่วยบอกต่อด้วยนะครับ

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

  1. ตามมาอ่านและทำตามได้แล้วครับ ขอบคุณครับ

  1. ขอบคุณมากครับ อยากให้มันแบบ autoplay ต้องทำยังไงครับ

  1. คือผมกำลังทำบล๊อกให้กับวัด แล้วจะต้องเอาเสียงพระเทศน์ลงไว้ในบล๊อกด้วยเพื่อให้คนที่อยากฟังพระอาจารย์เทศน์สามารถเข้ามาฟังในบล๊อกได้ ผมมีคำถามดังนี้ครับ
    1.เราจะอัพโหลดไฟล์ MP3เข้าไปยัง YOUTUBEได้อย่างไร
    2.เราจะหาที่ฝากไฟล์MP3 แบบว่าอยู่ได้นานๆที่ไหนได้บ้าง

    ขอบคุณครับ

  1. @ วัดป่าโนนจิก :
    1. ต้องแปลงไฟล์ Mp3 ให้เป็น ไฟล์ .flv ครับแล้วอัพโหลดไฟล์ เข้าไปยัง YOUTUBE (ดปรแกรมแปลงไฟล์ http://format-factory.en.softonic.com/ )
    2. การใช้งาน YOUTUBE ก็สามารถใช้บัญชีของ blogger (ของ google) login เข้าไปได้เลยครับ แล้วเรียนรู้วิธี upload ไฟล์อีกนิด (ไม่ยาหหรอกครับ)
    3. แต่ละไฟล์ต้องมีความยาวไม่เกิน 10 นาทีนะครับ

    ปล.ถ้าอยากให้ไฟล์ถาวรต้องเช่าโฮสครับ

  1. ขอบคุณมากครับ

  1. ทำตามทุกขั้นตอนแล้ว แต่เพลงเปิดไม่ได้ ทำไงดีคะ

  1. วิธีนี้ทำได้ง่ายจริงค่ะ

    แผงแสดงก็สุดเก๋ อยู่มุมล่างซ้าย...กลัวว่าจะไม่มีใครเห็น และ ก็ไม่มีใครเปิดฟังน่ะค่ะ...

    หากได้เป็นแบบ auto play ก็แจ่มเลยค่ะ ^^

    ขอบคุณสำหรับความรู้ที่เป็นประโยชน์ค่ะ

  1. อยากให้ autoplay อ่ะ

  1. It's a nice media player.

    Web application development

  1. neyay.blogspot.com

  1. ผมทำไม่เป็นอะครับ TT ใครทำเป็นสอนหน่อย

  1. ตอนนี้ ทางyahoo.com เค้าเลิกให้บริการแล้ว ใครมีตัวไหนทดแทนบ้างครับ

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

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

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