Hw to put Audio Playlist Two-Row
Welcome back, yes! Today I have a new tip I want to share with you all how to put a playlist of songs to listen to at On the feature blog, it can play the song itself at the end of each song, and not only when it finishes playing. The last song, it will jump to Play the first song again.
1. Go to Theme and select Edit HTML
2. Copy the following code from above </head>
<link href='https://fonts.googleapis.com/css2?family=Nokora:wght@400;700&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&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>
3. Copy the following code from above </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>
4. Click Save Theme and leave the Edit HTML tab.
5. Copy the following code into the Blog Post by converting to 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">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1XrUbI9ERmfJPDSEGwUlyXbd0yEAaMFbq">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1NP7K8AWJJSqJi76X6zK1Ep3NpZ69QV1x">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=12LEq1eeUhNbZ-NkLps0RQY-e1c_ezd7E">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1I0ekaVHMmJN37cVkCEVmdo57oYB6kyxO">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1pfpEEIC5Ds7jPUKLJiLlVJMzJ9UkigXh">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1p6fKPsOaL_P8z9iv1BPZn5kQ8xnupovQ">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1l3itAeoOn1h7FYI4bGDbyi93Ttjb0hWu">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=1aAZRou6EQQlYNa_zQpkAKF0W0JiTCWEu">Name song</a>
<a class="track" data-audio="https://docs.google.com/uc?export=download&id=11YimghXg3lrW8DGN8XNl_fDYBKU-7Xs5">Name song</a>
</div>
* Note: Please change the MP3 file link, but if you download the song from Google Drive, just change the ID in the code above and your MP3 file must be set to Public
6. Click Publish. Thank you! See you later.
