วิธีใส่เครื่องเล่น 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 ภาพปกอัลบลั้ม เช่น http://3.bp.blogspot.com/-RPQn67dFNNc/UcLbOqIYdQI/AAAAAAAAP84/kogicgOrI1c/s1600/Thumb1.jpg
background ใส่ URL ภาพพื้นหลัง เช่น http://4.bp.blogspot.com/-t2qhJcVS6WE/UcLa8l71ixI/AAAAAAAAP8w/6knCw4sFFWg/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 

3 ความคิดเห็น:

พ่อมดน้อย said...

ผมหามานานแล้วครับ ตั้งแต่เจ้า yahoo เค้าปิดตัวลงไปก็หาไม่ได้อีกเลย ขอบคุณจิรงๆ แล้วมันจะเล่นต่อเนื่องอะป่าวครับ

โต ปกรณ์ said...

ขอบคุณมากครับ หามานานแร้ว ของผมทำแล้ว แต่ แถบ สไลด์ ด้านข้างขวา ทำไมไม่ขึ้นคับ

Anonymous said...

help my how can i add more of 5 or 10 music mp3 i playlista thnx

Post a Comment

 

Premium Blogger Templates