បញ្ជី​ចាក់​ចម្រៀង - 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 ជា​ការ​ស្រេច។

ប្រភព ៖ www.rithisethtes.com