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

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

HTML5-Audio-Player

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

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

audio tag

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

result audio tag

បង្កើត​ប៊ូតុង​បញ្ជា ជាមួយ​ 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;
		}
	}
	
  
1
រូប​ឧទាហរណ៍

សូម​ពិនិត្យ​មើល​រូប​ខាង​ក្រោម

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

3button code

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

5 result

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

16 មតិ

  1. មើលមិនយល់

    • អត្ថបទ​នេះ​ ត្រូវ​បាន​កែ​ប្រែ។ អរគុណ​សម្រាប់​យោបល់​របស់ sopheak 😉

  2. I can’t play. Can you tell me for detail?

  3. function យើងគួដាក់វាកន្លែងណាទៅ

  4. សួស្តីបង! ចុះបើខ្ញុំចង់ដាក់ Videoវិញ ត្រូវកែកូដយ៉ាងមិចវិញទៅ?

  5. ហេតុអ្វីអត់ចេញចំរៀង?ខ្ញុំសរសេរចេញដូចបងសសេរចេញដែរ។

  6. ខ្ញុំធ្វើដូចបង ចេញដូចគ្នាដែរ ​តែចុច play អត់លឺសោះ?

  7. តើ me អាច​ធ្វើការងាបានទេ​នូវថៃ្ងសៅរ៍ និង​ អាទិត្យ ដោយ​មិនយកប្រាក់ខែ

  8. សូមពន្យល់បន្ថែមផង ខ្ញុំអត់យល់ទេ សូមអរគុណធំៗៗៗៗៗៗ

Leave a Reply