បន្ថែម​កូដ​ចាក់តន្ត្រី​បែប​បញ្ជី Music Player With Playlist ក្នុង Blogger ដោយប្រើ HTML, CSS & JavaScript

ប្រសិនបើអ្នកចង់បន្ថែមកម្មវិធីចាក់អូឌីយ៉ូ HTML (HTML Audio Player) នៅលើគេហទំព័រ Blogger របស់អ្នក ជាមួយនឹងមុខងារបញ្ជីចាក់ (Playlist feature) សូមអនុវត្តតាមជំហានដូចដែលបានបង្ហាញខាងក្រោម។

ជាដំបូង អ្នកត្រូវបង្ហោះ (Upload) ឯកសារ MP3 របស់អ្នកទៅកាន់កន្លែងផ្ទុកលើ​ Cloud មួយចំនួនដូចជា Github ដែលអ្នកអាចយកមកប្រើជាមួយកម្មវិធីចាក់អូឌីយ៉ូនៅពេលក្រោយបាន។

គ្រាន់តែចូលទៅកាន់ផ្ទាំងគ្រប់គ្រង Blogger (Blogger dashboard) ហើយបើកអត្ថបទប្លក់ (blog post) ដែលអ្នកចង់បន្ថែមកម្មវិធីចាក់អូឌីយ៉ូ។ ប្តូរទៅ HTML (HTML view) រួចបិទភ្ជាប់ (paste) កូដខាងក្រោម។

នៅត្រង់នេះ នៅក្នុង data-src អ្នកត្រូវបិទភ្ជាប់ URL របស់ឯកសារអូឌីយ៉ូ ហើយសម្រាប់រូបភាពគម្រប (cover image) អ្នកអាចប្រើ data-cover=”Image_URL” នៅក្នុងធាតុបញ្ជី (list element)។

កូដ

<div class="Multi-audio-player" id="simp" data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'>
  <div class="Audio-playlist">
    <ul>
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Mixkit-Almost-Game-Time</span><span class="Audio_description">Abhishek</span></li>
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-deep-urban-623.mp3">Deep Urban</span></li>
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-tech-house-vibes-130.mp3" data-cover="https://www.bigfishaudio.com/prodpictssm/smengs140.jpg">Tech House Vibes</span><span class="Audio_description">Mixkit</span></li>
      
       <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/glow-sensho-main-version-02-20-907%20(1).mp3" data-cover="https://i.scdn.co/image/ab67616d0000b273b939056e3a00dc3dce2b596a">Glow Sensho Main version 2</span><span class="Audio_description">Artist Name</span></li>
      
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Almost Game time</span> <span class="Audio_description">FREE</span></li>
      
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Mixkit-Almost-Game-Time</span> <span class="Audio_description">Abhishek</span></li>
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-deep-urban-623.mp3">Deep Urban</span></li>
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/glow-sensho-main-version-02-20-907%20(1).mp3">Glow Sensho Main version 2</span></li>
      <li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Almost Game time</span></li>

    </ul>
  </div>
</div>    

<style>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:800px; font-size:14px;font-family:"System-ui", sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .Audio_album{padding:20px 25px 5px;}
#simp .Audio_album .simp-cover{margin-right:20px;}
#simp .Audio_album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .Audio_album .simp-title{font-size:120%;font-weight:bold;}
#simp .Audio_album .simp-artist{font-size:90%;color:#6c7883;}
#simp .Audio_controls{padding:15px;}
#simp .Audio_controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .Audio_controls button[disabled]{color:#636469;cursor:initial;}
#simp .Audio_controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .Audio_controls .simp-prev,#simp .Audio_controls .simp-next{font-size:100%;}
#simp .Audio_controls .simp-tracker,#simp .Audio_controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .Audio_controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .Audio_controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .Audio_controls .simp-time,#simp .Audio_controls .simp-others{margin-left:10px;}
#simp .Audio_controls .simp-volume{max-width:110px;}
#simp .Audio_controls .simp-volume .simp-mute{margin-right:5px;}
#simp .Audio_controls .simp-others .simp-active{background:#242f3d;}
#simp .Audio_controls .simp-others .simp-shide button{font-size:100%;padding:0;width:30px;height:20px;display:block;}
#simp .Audio_controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .Audio_controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .Audio_controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .Audio_controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .Audio_controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#FC2C45;color:#fff;}
#simp ul li .Audio_description{font-size:90%;opacity:.5;margin-left:5px;}
#simp ul{overflow-y:auto;overflow-x:hidden; scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
@media screen and (max-width:480px) {
#simp .Audio_controls .simp-volume,#simp .Audio_controls .simp-others{display:none;}
#simp .Audio_controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}
</style>

<script>
function addEventListener_multi(element, eventNames, handler) {
  var events = eventNames.split(' ');
  events.forEach(e => element.addEventListener(e, handler, false));
}

function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRelativePos(elm) {
  var pPos = elm.parentNode.getBoundingClientRect();
  var cPos = elm.getBoundingClientRect(); 
  var pos = {};

  pos.top    = cPos.top    - pPos.top + elm.parentNode.scrollTop,
  pos.right  = cPos.right  - pPos.right,
  pos.bottom = cPos.bottom - pPos.bottom,
  pos.left   = cPos.left   - pPos.left;

  return pos;
}

function formatTime(val) {
  var h = 0, m = 0, s;
  val = parseInt(val, 10);
  if (val > 60 * 60) {
   h = parseInt(val / (60 * 60), 10);
   val -= h * 60 * 60;
  }
  if (val > 60) {
   m = parseInt(val / 60, 10);
   val -= m * 60;
  }
  s = val;
  val = (h > 0)? h + ':' : '';
  val += (m > 0)? ((m < 10 && h > 0)? '0' : '') + m + ':' : '0:';
  val += ((s < 10)? '0' : '') + s;
  return val;
}

function simp_initTime() {
  simp_controls.querySelector('.start-time').innerHTML = formatTime(simp_audio.currentTime); 
  if (!simp_isStream) {
    simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration); 
    simp_progress.value = simp_audio.currentTime / simp_audio.duration * 100; 
  }
  
  if (simp_audio.currentTime == simp_audio.duration) {
    simp_controls.querySelector('.simp-plause').classList.remove('fa-pause');
    simp_controls.querySelector('.simp-plause').classList.add('fa-play');
    simp_audio.removeEventListener('timeupdate', simp_initTime);
    
    if (simp_isNext) { 
      var elem;
      simp_a_index++;
      if (simp_a_index == simp_a_url.length) { 
        simp_a_index = 0;
        elem = simp_a_url[0];
      } else {
        elem = simp_a_url[simp_a_index];  
      }
      simp_changeAudio(elem);
      simp_setAlbum(simp_a_index);
    } else {
      simp_isPlaying = false;
    }
  }
}

function simp_initAudio() {
	simp_isLoaded = simp_audio.readyState == 4 ? true : false;
  simp_isStream = simp_audio.duration == 'Infinity' ? true : false;
  simp_controls.querySelector('.simp-plause').disabled = false;
  simp_progress.disabled = simp_isStream ? true : false;
  if (!simp_isStream) {
    simp_progress.parentNode.classList.remove('simp-load','simp-loading');
    simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
  }
  simp_audio.addEventListener('timeupdate', simp_initTime); //tracking load progress
  if (simp_isLoaded && simp_isPlaying) simp_audio.play();
  
  addEventListener_multi(simp_progress, 'touchstart mousedown', function(e) {
    if (simp_isStream) {
      e.stopPropagation();
      return false;
    }
    if (simp_audio.readyState == 4) {
      simp_audio.removeEventListener('timeupdate', simp_initTime);
      simp_audio.pause();
    }
  });
  
  addEventListener_multi(simp_progress, 'touchend mouseup', function(e) {
    if (simp_isStream) {
      e.stopPropagation();
      return false;
    }
    if (simp_audio.readyState == 4) {
      simp_audio.currentTime = simp_progress.value * simp_audio.duration / 100;
      simp_audio.addEventListener('timeupdate', simp_initTime);
      if (simp_isPlaying) simp_audio.play();
    }
  });
}

function simp_loadAudio(elem) {
  simp_progress.parentNode.classList.add('simp-loading');
  simp_controls.querySelector('.simp-plause').disabled = true;
  simp_audio.querySelector('source').src = elem.dataset.src;
  simp_audio.load();
  
  simp_audio.volume = parseFloat(simp_v_num / 100); 
  simp_audio.addEventListener('canplaythrough', simp_initAudio);
  
  simp_audio.addEventListener('error', function() {
    alert('Please reload the page.');
  });
}

function simp_setAlbum(index) {
  simp_cover.innerHTML = simp_a_url[index].dataset.cover ? '<div style="background:url(' + simp_a_url[index].dataset.cover + ') no-repeat;background-size:cover;width:80px;height:80px;"></div>' : '<i class="fa fa-music fa-5x"></i>';
  simp_title.innerHTML = simp_source[index].querySelector('.Audio_source').innerHTML;
  simp_artist.innerHTML = simp_source[index].querySelector('.Audio_description') ? simp_source[index].querySelector('.Audio_description').innerHTML : '';
}

function simp_changeAudio(elem) {
	simp_isLoaded = false;
  simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false;
  simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false;
  simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length-1 ? true : false;
  simp_progress.parentNode.classList.add('simp-load');
  simp_progress.disabled = true;
  simp_progress.value = 0;
  simp_controls.querySelector('.start-time').innerHTML = '00:00';
  simp_controls.querySelector('.end-time').innerHTML = '00:00';
  elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length-1)] : elem;
  
  for (var i = 0; i < simp_a_url.length; i++) {
    simp_a_url[i].parentNode.classList.remove('simp-active');
    if (simp_a_url[i] == elem) {
      simp_a_index = i;
      simp_a_url[i].parentNode.classList.add('simp-active');
    }
  }
  
  var simp_active = getRelativePos(simp_source[simp_a_index]);
  simp_source[simp_a_index].parentNode.scrollTop = simp_active.top;
  
  if (simp_auto_load || simp_isPlaying) simp_loadAudio(elem);
  
  if (simp_isPlaying) {
    simp_controls.querySelector('.simp-plause').classList.remove('fa-play');
    simp_controls.querySelector('.simp-plause').classList.add('fa-pause');
  }
}

function simp_startScript() {
  ap_simp = document.querySelector('#simp');
  simp_audio = ap_simp.querySelector('#audio');
  simp_album = ap_simp.querySelector('.Audio_album');
  simp_cover = simp_album.querySelector('.simp-cover');
  simp_title = simp_album.querySelector('.simp-title');
  simp_artist = simp_album.querySelector('.simp-artist');
  simp_controls = ap_simp.querySelector('.Audio_controls');
  simp_progress = simp_controls.querySelector('.simp-progress');
  simp_volume = simp_controls.querySelector('.simp-volume');
  simp_v_slider = simp_volume.querySelector('.simp-v-slider');
  simp_v_num = simp_v_slider.value; 
  simp_others = simp_controls.querySelector('.simp-others');
  simp_auto_load = simp_config.auto_load; 
  
  if (simp_config.shide_top) simp_album.parentNode.classList.toggle('simp-hide');
  if (simp_config.shide_btm) {
    simp_playlist.classList.add('simp-display');
    simp_playlist.classList.toggle('simp-hide');
  }
  
  if (simp_a_url.length <= 1) {
    simp_controls.querySelector('.simp-prev').style.display = 'none';
    simp_controls.querySelector('.simp-next').style.display = 'none';
    simp_others.querySelector('.simp-plext').style.display = 'none';
    simp_others.querySelector('.simp-random').style.display = 'none';
  }
  simp_source.forEach(function(item, index) {
    if (item.classList.contains('simp-active')) simp_a_index = index; 
    item.addEventListener('click', function() {
      simp_audio.removeEventListener('timeupdate', simp_initTime);
      simp_a_index = index;
      simp_changeAudio(this.querySelector('.Audio_source'));
      simp_setAlbum(simp_a_index);
    });
  });
  
  simp_changeAudio(simp_a_url[simp_a_index]);
  simp_setAlbum(simp_a_index);
  
  simp_controls.querySelector('.simp-plauseward').addEventListener('click', function(e) {
    var eles = e.target.classList;
    if (eles.contains('simp-plause')) {
      if (simp_audio.paused) {
        if (!simp_isLoaded) simp_loadAudio(simp_a_url[simp_a_index]);
        simp_audio.play();
        simp_isPlaying = true;
        eles.remove('fa-play');
        eles.add('fa-pause');
      } else {
        simp_audio.pause();
        simp_isPlaying = false;
        eles.remove('fa-pause');
        eles.add('fa-play');
      }
    } else {
      if (eles.contains('simp-prev') && simp_a_index != 0) {
        simp_a_index = simp_a_index-1;
        e.target.disabled = simp_a_index == 0 ? true : false;
      } else if (eles.contains('simp-next') && simp_a_index != simp_a_url.length-1) {
        simp_a_index = simp_a_index+1;
        e.target.disabled = simp_a_index == simp_a_url.length-1 ? true : false;
      }
      simp_audio.removeEventListener('timeupdate', simp_initTime);
      simp_changeAudio(simp_a_url[simp_a_index]);
      simp_setAlbum(simp_a_index);
    }
  });
  
  simp_volume.addEventListener('click', function(e) {
    var eles = e.target.classList;
    if (eles.contains('simp-mute')) {
      if (eles.contains('fa-volume-up')) {
        eles.remove('fa-volume-up');
        eles.add('fa-volume-off');
        simp_v_slider.value = 0;
      } else {
        eles.remove('fa-volume-off');
        eles.add('fa-volume-up');
        simp_v_slider.value = simp_v_num;
      }
    } else {
      simp_v_num = simp_v_slider.value;
      if (simp_v_num != 0) {
        simp_controls.querySelector('.simp-mute').classList.remove('fa-volume-off');
        simp_controls.querySelector('.simp-mute').classList.add('fa-volume-up');
      }
    }
    simp_audio.volume = parseFloat(simp_v_slider.value / 100);
  });
  
  simp_others.addEventListener('click', function(e) {
    var eles = e.target.classList;
    if (eles.contains('simp-plext')) {
      simp_isNext = simp_isNext && !simp_isRandom ? false : true;
      if (!simp_isRandom) simp_isRanext = simp_isRanext ? false : true;
      eles.contains('simp-active') && !simp_isRandom ? eles.remove('simp-active') : eles.add('simp-active');
    } else if (eles.contains('simp-random')) {
      simp_isRandom = simp_isRandom ? false : true;
      if (simp_isNext && !simp_isRanext) {
        simp_isNext = false;
        simp_others.querySelector('.simp-plext').classList.remove('simp-active');
      } else {
        simp_isNext = true;
        simp_others.querySelector('.simp-plext').classList.add('simp-active');
      }
      eles.contains('simp-active') ? eles.remove('simp-active') : eles.add('simp-active');
    } else if (eles.contains('simp-shide-top')) {
      simp_album.parentNode.classList.toggle('simp-hide');
    } else if (eles.contains('simp-shide-bottom')) {
      simp_playlist.classList.add('simp-display');
      simp_playlist.classList.toggle('simp-hide');
    }
  });
}

if (document.querySelector('#simp')) {
  var simp_auto_load, simp_audio, simp_album, simp_cover, simp_title, simp_artist, simp_controls, simp_progress, simp_volume, simp_v_slider, simp_v_num, simp_others;
  var ap_simp = document.querySelector('#simp');
  var simp_playlist = ap_simp.querySelector('.Audio-playlist');
  var simp_source = simp_playlist.querySelectorAll('li');
  var simp_a_url = simp_playlist.querySelectorAll('[data-src]');
  var simp_a_index = 0;
  var simp_isPlaying = false;
  var simp_isNext = false; //auto play
  var simp_isRandom = false; //play random
  var simp_isRanext = false; //check if before random starts, simp_isNext value is true
  var simp_isStream = false; //radio streaming
  var simp_isLoaded = false; //audio file has loaded
  var simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : {
    shide_top: false, //show/hide album
    shide_btm: false, //show/hide playlist
    auto_load: false //auto load audio file
  };
  
  var simp_elem = '';
  simp_elem += '<audio id="audio" preload><source src="" type="audio/mpeg"></audio>';
  simp_elem += '<div class="simp-display"><div class="Audio_album w-full flex-wrap"><div class="simp-cover"><i class="fa fa-music fa-5x"></i></div><div class="simp-info"><div class="simp-title">Title</div><div class="simp-artist">Artist</div></div></div></div>';
  simp_elem += '<div class="Audio_controls flex-wrap flex-align">';
  simp_elem += '<div class="simp-plauseward flex flex-align"><button type="button" class="simp-prev fa fa-backward" disabled></button><button type="button" class="simp-plause fa fa-play" disabled></button><button type="button" class="simp-next fa fa-forward" disabled></button></div>';
  simp_elem += '<div class="simp-tracker simp-load"><input class="simp-progress" type="range" min="0" max="100" value="0" disabled/><div class="simp-buffer"></div></div>';
  simp_elem += '<div class="simp-time flex flex-align"><span class="start-time">00:00</span><span class="simp-slash"> / </span><span class="end-time">00:00</span></div>';
  simp_elem += '<div class="simp-volume flex flex-align"><button type="button" class="simp-mute fa fa-volume-up"></button><input class="simp-v-slider" type="range" min="0" max="100" value="100"/></div>';
  simp_elem += '<div class="simp-others flex flex-align"><div class="simp-shide"><button type="button" class="simp-shide-top fa fa-caret-up" title="Show/Hide Album"></button><button type="button" class="simp-shide-bottom fa fa-caret-down" title="Show/Hide Playlist"></button></div></div>';
  simp_elem += '</div>'; //Audio_controls
  
  var simp_player = document.createElement('div');
  simp_player.classList.add('simp-player');
  simp_player.innerHTML = simp_elem;
  ap_simp.insertBefore(simp_player, simp_playlist);
  simp_startScript();
}
</script>

ឥឡូវនេះ អ្នកត្រូវផ្លាស់ប្តូរ URL ឯកសារអូឌីយ៉ូ, ឈ្មោះអូឌីយ៉ូ, ការពិពណ៌នា (Description) និងរូបភាពគម្រប (cover images) របស់វា។ អ្នកក៏អាចប្ដូរតាមបំណង (customize) កម្មវិធីចាក់នេះ ឲ្យស្របតាមប្លង់គេហទំព័រ (website layout) និងម៉ាកយីហោ (Branding) របស់អ្នកបានដែរ។

បន្ទាប់មក រក្សាទុក (save) កូដ។ ឥឡូវនេះអ្នកបានបន្ថែមកម្មវិធីចាក់អូឌីយ៉ូ MP3 ជាមួយនឹងជម្រើសបញ្ជីចាក់ដោយជោគជ័យហើយ ហើយអ្នកប្រើប្រាស់អាចប្តូរបទចម្រៀងពីក្នុងបញ្ជីបាន។

ប្រសិនបើអ្នកមានចម្ងល់ណាមួយ សូមសួរនៅក្នុងផ្នែកមតិយោបល់ (comment section)។