៙ How to code a template:
1. Log in to your Blogger account.
2- Backup your blog template to prevent erroneous coding.
3- Go to Theme >>> Edit HTML
4- Copy the following code and paste it under <head>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link rel='stylesheet prefetch' href='https://mymediaelements.github.io/mejs-player/build/mediaelementplayer.css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://mymediaelements.github.io/mejs-player/build/mediaelement-and-player.js'></script>
5- Copy the following code and paste it on </head>
<style type='text/css'>
.player-wrapper {
border-radius: 5px;
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.25);
background-image: -webkit-linear-gradient(315deg, #FF5572, #FF7555);
background-image: linear-gradient(135deg, #FF5572, #FF7555);
overflow: hidden;
margin: 0 auto;
max-width: 100%;
width: 100%;
padding: 0;
border-radius: 0;
}
ul.playlist {
margin: 0;
padding: 15px 15px 0 15px;
}
ul.playlist a {
color: #fff;
text-decoration: none;
}
ul.playlist li {
overflow: hidden;
line-height: 20px;
display: flex;
padding: 10px 0;
border-bottom: 1px solid rgba(230, 211, 211, 0.31);
}
ul.playlist li::before {
content: "\f001";
margin-right: 10px;
font-size: 120%;
background-color: #02020266;
font-family: Fontawesome;
color: white;
padding: 6px 8px;
text-align: center;
border-radius: 3px;
}
.track-info {
display: inline-block;
position: relative;
line-height: 1.3em;
width: 100%;
font-weight: 500;
}
.track-info .artist {
display: block;
font-size: 13px;
font-style: normal;
line-height: 15px;
color: #fff;
text-decoration: none;
}
.track-info .title {
display: block;
color: #fff;
}
ul.playlist .download {
float: right;
}
.mejs__controls {
height: 60px;
}
.mejs__button.mejs__playpause-button.mejs__replay,
.mejs__button.mejs__playpause-button.mejs__pause {
background: #FFB00E;
width: 40px;
padding: 0 5px;
border-radius: 50%;
}
.mejs__button.mejs__playpause-button.mejs__replay {
background: #29cf54;
}
.mejs__button.mejs__playpause-button.mejs__play {
background: #29cf54;
width: 40px;
padding: 0 5px;
border-radius: 50%;
}
.mejs__time {
box-sizing: content-box;
color: #444;
font-size: 15px;
font-weight: bold;
height: 24px;
overflow: hidden;
width: 50px;
padding: 16px 0;
}
.mejs__button > button {
display: block;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 20px;
color: #444;
background: transparent!important;
}
.mejs__button.mejs__playpause-button.mejs__play button:before {
content: "\f04b";
color: #fff;
}
.mejs__button.mejs__playpause-button.mejs__pause button:before {
content: "\f04c";
color: #fff;
}
.mejs__button.mejs__playpause-button.mejs__replay button:before {
content: "\f01e";
color: #fff;
}
.mejs__button.mejs__volume-button.mejs__mute button:before {
content: "\f028";
}
.mejs__button.mejs__volume-button.mejs__unmute button:before {
content: "\f026";
}
.mejs__container {
font-family: Segui Ui, Arial, serif;
background-size: cover;
position: relative;
background: #fff;
text-align: left;
text-indent: 0;
vertical-align: top;
height: 80px!important;
width: 100%!important;
}
.mejs__controls:not([style*="display: none"]) {
background: none;
}
.mejs__time-total {
background: rgb(212, 245, 221);
margin: 5px 0 0;
width: 100%;
}
span.mejs__time-current {
background: #dedede;
}
span.mejs__time-loaded {
background: #29cf54;
}
.mejs__time-handle-content {
border: 4px solid rgba(255, 255, 255, 0.9);
border-radius: 0;
height: 10px;
left: -5px;
top: -4px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
width: 1px;
}
.mejs__horizontal-volume-total {
background: rgb(41, 207, 84);
height: 10px;
top: 14px;
border-radius: 0;
}
</style>
6- Copy the following code and put it on </body>
<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');
}
list.onclick = function (e) {
e.preventDefault ();
var elm = e.target;
var audio = document.getElementById ('audio');
var source = document.getElementById ('audio');
source.src = elm.getAttribute ('data-value');
audio.load ();
audio.play ();
};
initAudio();
//]]>
</script>
7- Then click save Theme. Done coding in template
៙ How to put in an article:
8- Create a new article and copy the following code into the article based on HTML
<div class="player-wrapper">
<ul class="playlist custom-counter" id="list">
<li>
<div class="track-info">
<a href="#" data-value="https://mymediaelements.github.io/mejs-player/audio/Rain.mp3">Rain</a>
<span class="artist">Akcent</span>
</div>
</li>
<li>
<div class="track-info">
<a href="#" data-value="https://mymediaelements.github.io/mejs-player/audio/Incomplete.mp3">Incomplete</a>
<span class="artist">Backstreet boys </span>
</div>
</li>
<li>
<div class="track-info">
<a href="#" data-value="https://mymediaelements.github.io//mejs-player/audio/Despacito.mp3">Daspacito</a>
<span class="artist"> Luis Fonsi - Daddy Yankee</span>
</div>
</li>
</ul>
<audio id="audio" class="mejs__player" controls="controls" src="">
Your browser does not support the audio format.
</audio>
</div>
8- Code editing places are as follows:
<li>
<div class = "track-info">
<a href="#" data-value="https://mymediaelements.github.io/mejs-player/audio/Incomplete.mp3"> Incomplete </a>
<span class = "artist"> Backstreet boys </span>
</div>
</li>
9. Red is where we need to switch to the song we want to put
The only way to do that is to hopefully put it on your blogger.
