ឧបករណ៍ចាក់ចម្រៀង 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

Tags: Blogger

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

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

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

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

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

Post a Comment

អំពីទីនេះ!

ប្រចាំសប្ដាហ៍

រាយការណ៍

Stay Connected

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

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

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

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

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

Post a Comment

អំពី​ទីនេះ!

ប្រចាំ​សប្ដាហ៍

រាយការណ៍

Stay Connected

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

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

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

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

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

អំពីទីនេះ!

ប្រចាំសប្ដាហ៍