បញ្ជី​ចាក់​ចម្រៀង ដែល​មាន Audio Playlist ពីរ​ជួរ

ថ្ងៃ​នេះ​ខ្ញុំ​មាន​គន្លឹះ​ថ្មី​មួយ​ចង់​ចែករំលែក​ទៅ​កាន់​អ្នក​ទាំងអស់​គ្នា​ពី​របៀប​ដាក់​បញ្ជីចាក់​បទ​ចម្រៀង​សម្រាប់​ស្ដាប់​កម្សាន្ត​នៅ​លើ​ប្លក់ លក្ខណៈ​ពិសេស​នោះ​វា​អាច Play បទ​ចម្រៀង​ដោយ​ខ្លួនឯង​នៅ​ពេល​ចប់​បទ​នីមួយៗ ហើយ​មិន​តែ​ប៉ុណ្ណោះ​នៅ​ពេល​ដែល​វា Play ចប់​បទ​ចុងក្រោយ​នោះ​វា​នឹង​លោត​ទៅ Play បទ​ទី១​ឡើង​វិញ។

១.ចូល​ទៅ​កាន់ Theme រួច​យក​ពាក្យ Edit HTML
២.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </head>

កូដ

<link href='https://fonts.googleapis.com/css2?family=Nokora:wght@400;700&amp;display=swap' rel='stylesheet'/> <link href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&amp;display=swap' rel='stylesheet'/> <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/> <link href='https://cdn.plyr.io/3.6.8/plyr.css' rel='stylesheet'/> <style> .plyr--audio .plyr__controls{background-color:#e3f2fd;border:1px solid rgba(155,155,155,0.15)} .track-list{position:relative;float:left;width:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:15px;padding:15px;box-sizing:border-box;border:1px solid rgba(155,155,155,0.15);border-top:0} .track-list a.track{font-family:'Poppins','Nokora',sans-serif;font-weight:400;font-size:15px;color:#212121;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;cursor:pointer;overflow:hidden;padding:10px 15px 10px 15px;border:1px solid rgba(155,155,155,0.15);transition:all .17s ease} .track-list a.track:before{content:"\f027";font-family:"Font Awesome 5 Free";font-weight:900;color:#03a9f4;margin:0 5px 0 0} .track-list a.track:hover{color:#03a9f4} .track-list a.track.selected{color:#00C853;border:1px solid #03a9f4;border-left:4px solid #03a9f4} .track-list a.track.selected:before{content:"\f028";color:#00C853} @media screen and (max-width: 680px){ .track-list{grid-template-columns:1fr;grid-gap:10px;padding:10px} } </style>

៣.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </body>

កូដ

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/> <script src='https://cdn.plyr.io/3.6.8/plyr.js'/> <script type='text/javascript'> //<![CDATA[ let audio, playlist, tracks, current, player = new Plyr("#main-audio"); function initAudio() {     current = 0;     audio = $('audio');     playlist = $('.track-list');     tracks = playlist.find('.track');     len = tracks.length;     tracks.click(function (event) {         event.preventDefault();         link = $(this);         current = link.index();         run(link, audio[0]);     });     audio[0].addEventListener('ended', function (event) {         current++;         if (current == len) {             current = 0;             link = tracks[0];         } else {             link = tracks[current];         }         run($(link), audio[0]);     }); } function run(link, player) {     player.src = link.attr('data-audio');     audio[0].load();     audio[0].play(); 	link.addClass('selected').siblings().removeClass('selected'); } initAudio(); //]]> </script>

៤.ចុច​ពាក្យ Save Theme រួច​ចាកចេញ​ពី​ផ្ទាំង Edit HTML។ ៥.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ចូល​ទៅ​កាន់ Blog Post ដោយ​ប្ដូរ​ទៅ​ជា​ HTML View

កូដ

<audio id="main-audio" controls autoplay><source src="" type="audio/mp3"></audio> <div class="track-list">     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1Mh1ZHDcHAhxec3cSNshS9ZzcK4DBV6UF">០១. សុំ​មួយ​ពេល​មក - ខេម & តន់ ចន្ទសីម៉ា</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1XrUbI9ERmfJPDSEGwUlyXbd0yEAaMFbq">០២. រកស៊ី​ជាមួយ​យក្ស - ព្រាប សុវត្ថិ & តន់ ចន្ទសីម៉ា</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1NP7K8AWJJSqJi76X6zK1Ep3NpZ69QV1x">០៣. សុំ​ធ្វើ​ហ្វេន​អ្នកលក់​ឡេ - ខេម & តន់ ចន្ទសីម៉ា & Tempo Tris</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=12LEq1eeUhNbZ-NkLps0RQY-e1c_ezd7E">០៤. វាលខ្នង - Tempo Tris</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1I0ekaVHMmJN37cVkCEVmdo57oYB6kyxO">០៥. មាន់​កម្សត់ - ព្រាប សុវត្ថិ & តន់ ចន្ទសីម៉ា</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1pfpEEIC5Ds7jPUKLJiLlVJMzJ9UkigXh">០៦. គូរព្រេង​ឬ​គូរកម្ម - សង្ហារ & RxThy</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1p6fKPsOaL_P8z9iv1BPZn5kQ8xnupovQ">០៧. អែនអន - Tempo Tris</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1l3itAeoOn1h7FYI4bGDbyi93Ttjb0hWu">០៨. ខ្លាច​ចិត្ត​មេ - ខេម</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=1aAZRou6EQQlYNa_zQpkAKF0W0JiTCWEu">០៩. Eyes On Me - Tempo Tris</a>     <a class="track" data-audio="https://docs.google.com/uc?export=download&id=11YimghXg3lrW8DGN8XNl_fDYBKU-7Xs5">១០. ស៊ី​មិន​ធាត់ - RedKing & Son Veha</a> </div>

* ចំណាំ ៖ សូម​ប្ដូរ Link File MP3 តែ​បើ​អ្នក​ទាញ​ចម្រៀង​ពី Google Drive គ្រាន់​តែ​ប្ដូរ ID នៅ​ក្នុង​កូដ​ខាង​លើ​ហើយ File MP3 អ្នក​ត្រូវ​កំណត់​ជា Public
៦.ចុច​ពាក្យ Publish ជា​ការ​ស្រេច។ សូមអរគុណ! ជួប​គ្នា​ពេល​ក្រោយ​ទៀត៕