วิธีใส่เครื่องเล่น MP3 แบบ Playlist ลงใน blogger

สำหรับคนที่มี Url ของไฟล์เสียง .mp3 แล้วอยากจะทำ Playlist เล่นเพลงในบล็อกของ blogger หรือ blogspot วันนี้ผมมีโค้ดง่ายๆ ให้ลองเอาไปใส่ในบล็อกเพื่อสร้างเครื่องเล่นเพลงเอาไว้ฟังกันดูครับ โดยปกติการใส่เครื่องเล่น MP3 ลงใน Blogger เราจะใช้โค้ดซึ่งเป็นตัวเล่นที่สามารถเล่นได้ทีละเพลงกันโดยส่วนใหญ่ แต่ถ้าอยากจะใส่เป็น Playlist เล่นได้ครั้งละหลายๆ เพลงก็สามารถทำได้เช่นกันครับ ซึ่งเมื่อก่อนจะมีของ Mixpod ซึ่งเป็นเว็บให้บริการสร้าง Playlist ให้เราเอาไฟล์นามสกุล Mp3 ไป Ad แล้ว Embed โค้ดมาใส่ในบล็อก แต่ปัจจุบัน Mixpod ยกเลิกการให้บริการไปแล้ว

สำหรับวิธีที่ผมจะนำมาบอกนี้ก็ไม่ยุ่งยากอะไรครับ เพราะจะมีโค้ดบังคับอยู่แค่ 2 ส่วน คือโค้ดในส่วนของการบังคับให้แสดงตัวเครื่องเล่น กับอีกส่วนคือโค้ดซึ่งเป็นตัวเครื่องเล่น Playlist หากใครสนใจก็ลองทำตามกันดูครับ

อันดับแรกให้เข้าไปที่หน้าแม่แบบแล้วคลิกที่แก้ไข HTML หาโค้ดคำว่า  </head>

สำหรับคนที่หาโค้ดไม่เจอก็ให้ลองทำตามวิธีนี้ดูกันครับ ให้เอาเม๊าท์ชี้ไปในช่องโค้ดแม่แบบแล้วคลิกซ้าย 1 ครั้ง เสร็จแล้วกด Ctrl กับ F จากแป้นพิมพ์ จากนั้นให้พิมพ์คำว่า </head> ลงไปในช่องแล้วกด Enter ก็จะเจอโค้ดครับ

• <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>
  <link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

หลังจากเจอโค้ดคำว่า </head> แล้วก็ให้ก็อปปี้โค้ดด้านบนนี้ไปวางไว้เหนือคำว่า  </head> เสร็จแล้วให้กดบันทึกแม่แบบ

จากนั้นให้เข้าไปที่หน้าการออกแบบ แล้วเลือก Gadget แบบ HTML / จาวาสคิปต์ เสร็จแล้วก็อปปี้โค้ดตัวเล่น MP3 Playlist ด้านล่างนี้วางลงไป หรือใครอยากจะเอาไปใส่ในตัวบทความก็ได้ครับ โดยไปที่หน้าบทความแล้วกดที่ HTMlL ที่อยู่ตรงซ้ายมือแล้ววางโค้ดด้านบนลงไปในช่องเขียนบทความ

• <div class="mbl">
  <div class="mbl_player" id="mnplp">
  <div class="mbl_art_bg">
  </div>
  <!--artist on background-->
    <img alt="" class="mbl_cover" src="" /><!--album cover-->
    <span class="mnpl_title"></span><!--song title-->
    <span class="mnpl_author"></span><!--artist-->
  
    <!--sound-->
    <br />
  <div class="mnpl_volume_min">
  </div>
  <div class="mnpl_volume">
  </div>
  <div class="mbl_volume_max">
  </div>
  <div class="mnpl_toolbar">
  <div class="mnpl_tlb_prev">
  </div>
  <div class="mnpl_tlb_stop">
  </div>
  <div class="mnpl_tlb_next">
  </div>
  <div class="mnpl_current">
  </div>
  <div class="mnpl_long">
  </div>
  <div class="mnpl_all">
  </div>
  </div>
  <div class="mbl_playlist">
  </div>
  </div>
  </div>
  <script type="text/javascript">
    $(function(){
     $('#mnplp').mnplp({
      'volume': 80,
      'playlist':[
       {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"},
       {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"},
       {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"},
       {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"},
       {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"}
    
      ]
     });
    });
   </script>
  <style>
  .mbl_player { width: 500px;} .mbl { float: left; width: 520px; border-top: 1px solid #d2d2d2; margin-bottom: 0px; padding: 0px; } .mbl_player .mnpl_current { padding: 2px!important; padding-left: 10px!important; } .mbl_player .mnpl_all, t { padding: 2px; }</style></div><div>

สำหรับตัวโค้ดเครื่องเล่น MP3 ต้องมีการปรับเปลี่ยนเล็กน้อยดังนี้

title ใส่ชื่อของเพลง

author ใส่ชื่อศิลปิน

cover ใส่ URL ภาพปกอัลบลั้ม เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SOH255Eyrw_hv_RF11W7lGu68MNNyMb1kh5QUKRP9doqJEUirnwaXkQrnr642TNkYlObwwu1656ujbMIEvyDeNeDK1y2bkVUqpjDmZr24YfEWKnhPluFIasmMjTGDKimyoTUoASBLP8Z/s1600/Thumb1.jpg

background ใส่ URL ภาพพื้นหลัง เช่น https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZzGDY5pv9K-1Ehb3oSNppb1uelywa2T6xoPXNQYesIOrPUnyuh1RqztlDECrnpncac1aUxLLVvboUhByZz5TbxHIuFa1L2N0ZzNrR1vMgzAiUpGjkTz5z6xuw_BZWVb-JCQwh_gHWAEG/s1600/1.jpg

mfile ใส่ URL ไฟล์เสียงนามสกุล MP3 เช่น http://alex-shevchik.com.ua/player/files/music/1.mp3
ตรง width: 540 และ width: 540 สามารถแก้ไขนาดได้ตามชอบใจ

หมายเหตุ : หากต้องการเพิ่มเพลงก็ให้แทรกโค้ดด้านล่างลงไปอีกตามความต้องการแต่ไม่ควรเกิน 20 เพลงครับ

•      {"title":"ชื่อเพลง", "author":"ชื่อศิลปิน", "cover":"ใส่ URL ภาพปก", "background":"ใส่ URL ภาพพื้นหลัง", "mfile":"ใส่ URL เพลง mp3"},

ตัวอย่างเครื่องเล่น MP3 Playlist