បង្កើត​ MP3 Player ជាមួយ HTML5 – [basic]

ជាមួយ​នឹង​ HTML5 លោកអ្នក​អាច​បញ្ចូល Music Player ទៅ​ក្នុង គេហទំព័ររបស់​លោកអ្នក​បាន​ដោយ​មិន​ចាំ​បាច់​ប្រើប្រាស់ Third-Party Plug-in ឬ​ក៏ Add-on ដូចជា Flash Player ឬក៏ QuickTime នោះទេ ។ ចំពោះកូដ ដែល​នឹង​ត្រូវ​សរសេរ គឺ​មាន​ភាព​ងាយស្រួល សម្រាប់ player ដែល​មាន​ស្រាប់ (Default) ប៉ុន្តែ​មាន​លក្ខណៈ​ស្មុគ​ស្មាញ​បន្តិច សម្រាប់​លោកអ្នក​ដែល​ចង់​ធ្វើ​ការ customize ដោយ​ខ្លួនឯង ព្រោះ​ថា​លោកអ្នក​នឹង​ត្រូវការ JavaScript ដើម្បី​បង្កើតប៊ូតុង​បញ្ជា​ទាំង​នោះ ។

ការ​ប្រើប្រាស់ Audio Tag

លោកអ្នក​អាច​ប្រើប្រាស់ Audio Tag ដើម្បី​ធ្វើ​ការ​លេង​ចម្រៀង របស់​លោកអ្នក​ដែល​មាន control មក​ជាមួយ​ស្រាប់​ ។

លោកអ្នក​នឹង​ទទួល​បាន លទ្ធផល​ដូច​ខាងក្រោម ។

បង្កើត​ប៊ូតុង​បញ្ជា ជាមួយ​ JavaScript

ជា​ដំបូង​ សូម​សរសេរ​កូដ Script ខាង​ក្រោម នៅ​ក្នុង​ចន្លោះ Head Tag ដោយ​ប្រើប្រាស់ script tag មួយ

         var player;     
      //Initial code
 window.onload = function()
 {
  document.getElementById('btnPlay').addEventListener('click', playMusic, false);
  document.getElementById('btnPause').addEventListener('click', pauseMusic, false);
  document.getElementById('btnStop').addEventListener('click', stopMusic, false);
  document.getElementById('btnVolUp').addEventListener('click', volUp, false);
  document.getElementById('btnVolDown').addEventListener('click', volDown, false);
  player = document.getElementById('player');
 }
      //controls ដើម្បី​ឲ្យ​ពេល​ដែល​ប៊ូតុង​ទាំង​នោះ​ដំណើរការ។
 function playMusic()
 {
  player.play(); 
 }
 function pauseMusic()
 {
  player.pause();
 }
 function stopMusic()
 {
​​​​​​​​​​​​​​​​​​​​​                //មិន​មែន​ method STOP ទេ
  player.pause(); ​​​​​​​​​​​​                
  player.currentTime = 0;
 }
 function volUp()
 {
                //កម្រិត​សំឡេង​គឺ 0.0 = silent និង 1.0 = full volume
  if(player.volume < 1) 
                { 
                    player.volume += 0.1; } 
  else { 
                    player.volume = 1;  
                } 
         }
         function volDown() { 
                if(player.volume > 0) {
       player.volume -= 0.1;
                }
                else {
       player.volume = 0;
  }
 }
 
  

រូប​ឧទាហរណ៍

សូម​ពិនិត្យ​មើល​រូប​ខាង​ក្រោម
បន្ទាប់​​មក សូម​បង្កើត​ប៊ូតុង​បញ្ជា ដោយ​សរសេរ​កូដ​ខាង​ក្រោម​នៅ​ក្នុងចន្លោះ Body Tag

លទ្ធផល​ទទួល​បាន

ប្រសិន​បើ​មាន​បញ្ហា សូម​ដាក់​មតិ​នៅ​ក្នុង​ប្រអប់​ខាង​ក្រោម
From:Sombokit