ឧបករណ៍​ចាក់​ចម្រៀង Custom HTML Audio Player សម្រាប់ Blogger

Blogger ឬ Blogspot អាច​ឲ្យ​យើង​ដាក់​កូដ HTML CSS និង Javascript ចូល​ប្រើប្រាស់​បាន ដែល​ធ្វើ​ឲ្យ​ម្ចាស់​ប្លក់​អាច​ដំឡើង​ឧបករណ៍​ play វីដេអូ​ជា​ playlist ឬ ឧបករណ៍​ចាក់​ចម្រៀង​ជា playlist បាន ។ ក្នុង​គន្លឹះ​នេះ​ខ្ញុំ​លើក​បង្ហាញ​ពី​កូដ CSS កែប្រែ​រូបរាង​មុខងារ play Mp3 ស្នូល​របស់ browser ធម្មតា ទៅ​ជា​មាន​រូបរាង​ស្អាត មាន cover មាន​ចំណង​ជើង​បទ​ចម្រៀង មាន​ឈ្មោះ​អ្នក​ចម្រៀង និង​អាច​ដាក់​អត្ថបទ​ចម្រៀង​បាន​ទៀត ។ កូដ​នេះ​មាន ៣​ជម្រើស សូម​មើល​កូដ​តាម​ខាងក្រោម​នេះ ៖

៙ របៀប​ដាក់​កូដ​ចូល​អត្ថបទ post ៖

- ចូល​គណនី blogger.com របស់​លោកអ្នក ។
- ចុច​បង្កើត​អត្ថបទ​ថ្មី​មួយ ចម្លង​កូដ​លេង Mp3 ណាមួយ​ខាង​ក្រោម​ យក​ទៅ​ដាក់​ដោយ​ឈរ​លើ HTML View ហើយ​ធ្វើការ​កែប្រែតំណ​រូប តំណ​ចម្រៀង Mp3 តំណ​ឈ្មោះ​បទ​ចម្រៀង តំណ​ឈ្មោះ​អ្នក​ច្រើន ។

1 - រូបរាង​ផ្ដេក

<div class="HTML_Audio_player">
        <div class="Audio_Player_image"><img style="border-radius: 60px;" src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
      <div class="player-content">
         <div class="player-info">
            <a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
            <a class="artist" href="#">NCS SONGS</a>
         </div>
         <div class="k2_audio_player">
            <audio controls style="width: 80%;">
  <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
         </div>
      </div>
   </div>

   <style>
       .HTML_Audio_player { z-index:10; 
         background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%); 
         color: inherit; 
         min-height:120px; max-height:150px; 
         display:flex;
         box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
         flex-direction:row;padding: 20px 10px 20px;} 
     
     .Audio_Player_image { width:150px; display: flex; justify-content: center; } 
     .player-content { 
       flex-grow:1; 
       display:flex; 
       flex-direction:column;}
     
     .player-info { 
       flex-grow:1; display:flex; 
       flex-direction:column; 
       justify-content:center; 
       padding-left:10px;} 
     
     .song-name { font-size:18px; font-weight:600; } .k2_audio_player { display:flex;} 
     
     audio { flex-grow:1; height:40px; } 
     
     audio::-webkit-media-controls-play-button {
     background-color: #B1D4E0;
     border-radius: 50%;}

     audio::-webkit-media-controls-play-button:hover {
     background-color: rgba(177,212,224, .7);}
     
     audio::-webkit-media-controls-panel {
     background: #e9e8f2;}
     
     .Audio_Player_image img:hover{animation:rotating 3s linear infinite} @keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
     </style>

2- រូបរាង​មាន cover ធំ

<div class="HTML_Audio_player">
        <div class="Audio_Player_image">
          
         <img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
  <div class="k2_audio_info">
    <a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
    <p style="text-align: center; padding:0px 10px 0px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p>
  </div>  
         <div class="k2_audio_player">
            <audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
         </div>
      </div>

<style>   
  
  .HTML_Audio_player{
  Position: relative;
    width:350px;
    background: #faf3f4;
    box-shadow: 0 50px 80px rgba(0,0,0,0.25); 
  }
  
  .HTML_Audio_player .Audio_Player_image{
   position: relative;
    width:100%;
    height: 350px;
    
  }
  
  .HTML_Audio_player .Audio_Player_image img{
   position: absolute;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    object-fit: cover;
    
  }
  
  .HTML_Audio_player audio {
  width: 100%;
  outline: none;
  }
     
     .song-name { font-size:18px;
       font-weight:600;
       display: flex;
        justify-content: center;
        margin-top: 10px;
  }
  audio::-webkit-media-controls-play-button {
     background-color: #B1D4E0;
     border-radius: 50%;}
</style>

3- រូបរាង​មាន cover ដាក់​បាន 2 ​ទន្ទឹម​គ្នា

<div class="audio_Player_grid">
<div class="HTML_Audio_player">
        <div class="Audio_Player_image">
          
         <img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
  <div class="k2_audio_info">
    <a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
  </div>  
         <div class="k2_audio_player">
            <audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
         </div>
      </div>
  
<div class="HTML_Audio_player">
        <div class="Audio_Player_image">
          
         <img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
  <div class="k2_audio_info">
    <a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
  </div>  
         <div class="k2_audio_player">
            <audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
         </div>
      </div>
<div class="HTML_Audio_player">
        <div class="Audio_Player_image">
          
         <img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
  <div class="k2_audio_info">
    <a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
  </div>  
         <div class="k2_audio_player">
            <audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
         </div>
      </div>
  
  
  <div class="HTML_Audio_player">
        <div class="Audio_Player_image">
          
         <img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
  <div class="k2_audio_info">
    <a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
  </div>  
         <div class="k2_audio_player">
            <audio controls>
  <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
         </div>
      </div>
  
</div>

<style> 
  .audio_Player_grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  
  .HTML_Audio_player{
  Position: relative;
    width:350px;
    background: #faf3f4;
    box-shadow: 0 50px 80px rgba(0,0,0,0.25);
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .HTML_Audio_player .Audio_Player_image{
   position: relative;
    width:100%;
    height: 350px;
    
  }
  
  .HTML_Audio_player .Audio_Player_image img{
   position: absolute;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    object-fit: cover;
    
  }
  
  .HTML_Audio_player audio {
  width: 100%;
  outline: none;
  }
     
     .song-name { font-size:18px;
       font-weight:600;
       display: flex;
        justify-content: center;
        margin-top: 10px;
  }
  audio::-webkit-media-controls-play-button {
     background-color: #B1D4E0;
     border-radius: 50%;}
</style>

ចំណាំ៖ ប្រសិនបើ​អ្នក​មិន​ចង់​បិទភ្ជាប់​កូដ CSS នៅ​ក្នុង​ការ​បង្ហោះ​ប្លុក​ទាំងអស់​នោះ អ្នក​អាច​បិទភ្ជាប់​កូដ CSS (<style>កូដ CSS</style>) នៅ​ខាង​លើ​ស្លាក </body> ក្នុង​ឯកសារ​ស្បែក។
___________
ប្រភពពី : techyleaf.in