How to add a Music Player With Playlist In Blogger using HTML,CSS & JavaScript
If you want to add a HTML Audio Player on your Blogger website with Playlist feature then follow the steps as shown below.
First of all, You need to Upload your MP3 files in some cloud storage like Github which you can later use the audio player.
Just Go to the blogger dashboard and open the blog post where you want to add the audio player. Switch to the HTML view and paste the below code.
Here, In the data-src you need to paste the Audio file url and for cover image you can use the data-cover=”Image_URL” in the list element.
<div class="Multi-audio-player" id="simp" data-config='{"shide_top":false,"shide_btm":false,"auto_load":false}'>
<div class="Audio-playlist">
<ul>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Mixkit-Almost-Game-Time</span><span class="Audio_description">Abhishek</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-deep-urban-623.mp3">Deep Urban</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-tech-house-vibes-130.mp3" data-cover="https://www.bigfishaudio.com/prodpictssm/smengs140.jpg">Tech House Vibes</span><span class="Audio_description">Mixkit</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/glow-sensho-main-version-02-20-907%20(1).mp3" data-cover="https://i.scdn.co/image/ab67616d0000b273b939056e3a00dc3dce2b596a">Glow Sensho Main version 2</span><span class="Audio_description">Artist Name</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Almost Game time</span> <span class="Audio_description">FREE</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Mixkit-Almost-Game-Time</span> <span class="Audio_description">Abhishek</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-deep-urban-623.mp3">Deep Urban</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/glow-sensho-main-version-02-20-907%20(1).mp3">Glow Sensho Main version 2</span></li>
<li><span class="Audio_source" data-src="https://github.com/Abhishekpadhi444/My-Mp3-Files/raw/main/mixkit-almost-game-time-75.mp3">Almost Game time</span></li>
</ul>
</div>
</div>
<style>
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:800px; font-size:14px;font-family:"System-ui", sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .Audio_album{padding:20px 25px 5px;}
#simp .Audio_album .simp-cover{margin-right:20px;}
#simp .Audio_album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .Audio_album .simp-title{font-size:120%;font-weight:bold;}
#simp .Audio_album .simp-artist{font-size:90%;color:#6c7883;}
#simp .Audio_controls{padding:15px;}
#simp .Audio_controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .Audio_controls button[disabled]{color:#636469;cursor:initial;}
#simp .Audio_controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .Audio_controls .simp-prev,#simp .Audio_controls .simp-next{font-size:100%;}
#simp .Audio_controls .simp-tracker,#simp .Audio_controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .Audio_controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .Audio_controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .Audio_controls .simp-time,#simp .Audio_controls .simp-others{margin-left:10px;}
#simp .Audio_controls .simp-volume{max-width:110px;}
#simp .Audio_controls .simp-volume .simp-mute{margin-right:5px;}
#simp .Audio_controls .simp-others .simp-active{background:#242f3d;}
#simp .Audio_controls .simp-others .simp-shide button{font-size:100%;padding:0;width:30px;height:20px;display:block;}
#simp .Audio_controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .Audio_controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .Audio_controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .Audio_controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .Audio_controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .Audio_controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .Audio_controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#FC2C45;color:#fff;}
#simp ul li .Audio_description{font-size:90%;opacity:.5;margin-left:5px;}
#simp ul{overflow-y:auto;overflow-x:hidden; scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
@media screen and (max-width:480px) {
#simp .Audio_controls .simp-volume,#simp .Audio_controls .simp-others{display:none;}
#simp .Audio_controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}
</style>
<script>
function addEventListener_multi(element, eventNames, handler) {
var events = eventNames.split(' ');
events.forEach(e => element.addEventListener(e, handler, false));
}
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRelativePos(elm) {
var pPos = elm.parentNode.getBoundingClientRect();
var cPos = elm.getBoundingClientRect();
var pos = {};
pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop,
pos.right = cPos.right - pPos.right,
pos.bottom = cPos.bottom - pPos.bottom,
pos.left = cPos.left - pPos.left;
return pos;
}
function formatTime(val) {
var h = 0, m = 0, s;
val = parseInt(val, 10);
if (val > 60 * 60) {
h = parseInt(val / (60 * 60), 10);
val -= h * 60 * 60;
}
if (val > 60) {
m = parseInt(val / 60, 10);
val -= m * 60;
}
s = val;
val = (h > 0)? h + ':' : '';
val += (m > 0)? ((m < 10 && h > 0)? '0' : '') + m + ':' : '0:';
val += ((s < 10)? '0' : '') + s;
return val;
}
function simp_initTime() {
simp_controls.querySelector('.start-time').innerHTML = formatTime(simp_audio.currentTime);
if (!simp_isStream) {
simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
simp_progress.value = simp_audio.currentTime / simp_audio.duration * 100;
}
if (simp_audio.currentTime == simp_audio.duration) {
simp_controls.querySelector('.simp-plause').classList.remove('fa-pause');
simp_controls.querySelector('.simp-plause').classList.add('fa-play');
simp_audio.removeEventListener('timeupdate', simp_initTime);
if (simp_isNext) {
var elem;
simp_a_index++;
if (simp_a_index == simp_a_url.length) {
simp_a_index = 0;
elem = simp_a_url[0];
} else {
elem = simp_a_url[simp_a_index];
}
simp_changeAudio(elem);
simp_setAlbum(simp_a_index);
} else {
simp_isPlaying = false;
}
}
}
function simp_initAudio() {
simp_isLoaded = simp_audio.readyState == 4 ? true : false;
simp_isStream = simp_audio.duration == 'Infinity' ? true : false;
simp_controls.querySelector('.simp-plause').disabled = false;
simp_progress.disabled = simp_isStream ? true : false;
if (!simp_isStream) {
simp_progress.parentNode.classList.remove('simp-load','simp-loading');
simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
}
simp_audio.addEventListener('timeupdate', simp_initTime); //tracking load progress
if (simp_isLoaded && simp_isPlaying) simp_audio.play();
addEventListener_multi(simp_progress, 'touchstart mousedown', function(e) {
if (simp_isStream) {
e.stopPropagation();
return false;
}
if (simp_audio.readyState == 4) {
simp_audio.removeEventListener('timeupdate', simp_initTime);
simp_audio.pause();
}
});
addEventListener_multi(simp_progress, 'touchend mouseup', function(e) {
if (simp_isStream) {
e.stopPropagation();
return false;
}
if (simp_audio.readyState == 4) {
simp_audio.currentTime = simp_progress.value * simp_audio.duration / 100;
simp_audio.addEventListener('timeupdate', simp_initTime);
if (simp_isPlaying) simp_audio.play();
}
});
}
function simp_loadAudio(elem) {
simp_progress.parentNode.classList.add('simp-loading');
simp_controls.querySelector('.simp-plause').disabled = true;
simp_audio.querySelector('source').src = elem.dataset.src;
simp_audio.load();
simp_audio.volume = parseFloat(simp_v_num / 100);
simp_audio.addEventListener('canplaythrough', simp_initAudio);
simp_audio.addEventListener('error', function() {
alert('Please reload the page.');
});
}
function simp_setAlbum(index) {
simp_cover.innerHTML = simp_a_url[index].dataset.cover ? '<div style="background:url(' + simp_a_url[index].dataset.cover + ') no-repeat;background-size:cover;width:80px;height:80px;"></div>' : '<i class="fa fa-music fa-5x"></i>';
simp_title.innerHTML = simp_source[index].querySelector('.Audio_source').innerHTML;
simp_artist.innerHTML = simp_source[index].querySelector('.Audio_description') ? simp_source[index].querySelector('.Audio_description').innerHTML : '';
}
function simp_changeAudio(elem) {
simp_isLoaded = false;
simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false;
simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false;
simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length-1 ? true : false;
simp_progress.parentNode.classList.add('simp-load');
simp_progress.disabled = true;
simp_progress.value = 0;
simp_controls.querySelector('.start-time').innerHTML = '00:00';
simp_controls.querySelector('.end-time').innerHTML = '00:00';
elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length-1)] : elem;
for (var i = 0; i < simp_a_url.length; i++) {
simp_a_url[i].parentNode.classList.remove('simp-active');
if (simp_a_url[i] == elem) {
simp_a_index = i;
simp_a_url[i].parentNode.classList.add('simp-active');
}
}
var simp_active = getRelativePos(simp_source[simp_a_index]);
simp_source[simp_a_index].parentNode.scrollTop = simp_active.top;
if (simp_auto_load || simp_isPlaying) simp_loadAudio(elem);
if (simp_isPlaying) {
simp_controls.querySelector('.simp-plause').classList.remove('fa-play');
simp_controls.querySelector('.simp-plause').classList.add('fa-pause');
}
}
function simp_startScript() {
ap_simp = document.querySelector('#simp');
simp_audio = ap_simp.querySelector('#audio');
simp_album = ap_simp.querySelector('.Audio_album');
simp_cover = simp_album.querySelector('.simp-cover');
simp_title = simp_album.querySelector('.simp-title');
simp_artist = simp_album.querySelector('.simp-artist');
simp_controls = ap_simp.querySelector('.Audio_controls');
simp_progress = simp_controls.querySelector('.simp-progress');
simp_volume = simp_controls.querySelector('.simp-volume');
simp_v_slider = simp_volume.querySelector('.simp-v-slider');
simp_v_num = simp_v_slider.value;
simp_others = simp_controls.querySelector('.simp-others');
simp_auto_load = simp_config.auto_load;
if (simp_config.shide_top) simp_album.parentNode.classList.toggle('simp-hide');
if (simp_config.shide_btm) {
simp_playlist.classList.add('simp-display');
simp_playlist.classList.toggle('simp-hide');
}
if (simp_a_url.length <= 1) {
simp_controls.querySelector('.simp-prev').style.display = 'none';
simp_controls.querySelector('.simp-next').style.display = 'none';
simp_others.querySelector('.simp-plext').style.display = 'none';
simp_others.querySelector('.simp-random').style.display = 'none';
}
simp_source.forEach(function(item, index) {
if (item.classList.contains('simp-active')) simp_a_index = index;
item.addEventListener('click', function() {
simp_audio.removeEventListener('timeupdate', simp_initTime);
simp_a_index = index;
simp_changeAudio(this.querySelector('.Audio_source'));
simp_setAlbum(simp_a_index);
});
});
simp_changeAudio(simp_a_url[simp_a_index]);
simp_setAlbum(simp_a_index);
simp_controls.querySelector('.simp-plauseward').addEventListener('click', function(e) {
var eles = e.target.classList;
if (eles.contains('simp-plause')) {
if (simp_audio.paused) {
if (!simp_isLoaded) simp_loadAudio(simp_a_url[simp_a_index]);
simp_audio.play();
simp_isPlaying = true;
eles.remove('fa-play');
eles.add('fa-pause');
} else {
simp_audio.pause();
simp_isPlaying = false;
eles.remove('fa-pause');
eles.add('fa-play');
}
} else {
if (eles.contains('simp-prev') && simp_a_index != 0) {
simp_a_index = simp_a_index-1;
e.target.disabled = simp_a_index == 0 ? true : false;
} else if (eles.contains('simp-next') && simp_a_index != simp_a_url.length-1) {
simp_a_index = simp_a_index+1;
e.target.disabled = simp_a_index == simp_a_url.length-1 ? true : false;
}
simp_audio.removeEventListener('timeupdate', simp_initTime);
simp_changeAudio(simp_a_url[simp_a_index]);
simp_setAlbum(simp_a_index);
}
});
simp_volume.addEventListener('click', function(e) {
var eles = e.target.classList;
if (eles.contains('simp-mute')) {
if (eles.contains('fa-volume-up')) {
eles.remove('fa-volume-up');
eles.add('fa-volume-off');
simp_v_slider.value = 0;
} else {
eles.remove('fa-volume-off');
eles.add('fa-volume-up');
simp_v_slider.value = simp_v_num;
}
} else {
simp_v_num = simp_v_slider.value;
if (simp_v_num != 0) {
simp_controls.querySelector('.simp-mute').classList.remove('fa-volume-off');
simp_controls.querySelector('.simp-mute').classList.add('fa-volume-up');
}
}
simp_audio.volume = parseFloat(simp_v_slider.value / 100);
});
simp_others.addEventListener('click', function(e) {
var eles = e.target.classList;
if (eles.contains('simp-plext')) {
simp_isNext = simp_isNext && !simp_isRandom ? false : true;
if (!simp_isRandom) simp_isRanext = simp_isRanext ? false : true;
eles.contains('simp-active') && !simp_isRandom ? eles.remove('simp-active') : eles.add('simp-active');
} else if (eles.contains('simp-random')) {
simp_isRandom = simp_isRandom ? false : true;
if (simp_isNext && !simp_isRanext) {
simp_isNext = false;
simp_others.querySelector('.simp-plext').classList.remove('simp-active');
} else {
simp_isNext = true;
simp_others.querySelector('.simp-plext').classList.add('simp-active');
}
eles.contains('simp-active') ? eles.remove('simp-active') : eles.add('simp-active');
} else if (eles.contains('simp-shide-top')) {
simp_album.parentNode.classList.toggle('simp-hide');
} else if (eles.contains('simp-shide-bottom')) {
simp_playlist.classList.add('simp-display');
simp_playlist.classList.toggle('simp-hide');
}
});
}
if (document.querySelector('#simp')) {
var simp_auto_load, simp_audio, simp_album, simp_cover, simp_title, simp_artist, simp_controls, simp_progress, simp_volume, simp_v_slider, simp_v_num, simp_others;
var ap_simp = document.querySelector('#simp');
var simp_playlist = ap_simp.querySelector('.Audio-playlist');
var simp_source = simp_playlist.querySelectorAll('li');
var simp_a_url = simp_playlist.querySelectorAll('[data-src]');
var simp_a_index = 0;
var simp_isPlaying = false;
var simp_isNext = false; //auto play
var simp_isRandom = false; //play random
var simp_isRanext = false; //check if before random starts, simp_isNext value is true
var simp_isStream = false; //radio streaming
var simp_isLoaded = false; //audio file has loaded
var simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : {
shide_top: false, //show/hide album
shide_btm: false, //show/hide playlist
auto_load: false //auto load audio file
};
var simp_elem = '';
simp_elem += '<audio id="audio" preload><source src="" type="audio/mpeg"></audio>';
simp_elem += '<div class="simp-display"><div class="Audio_album w-full flex-wrap"><div class="simp-cover"><i class="fa fa-music fa-5x"></i></div><div class="simp-info"><div class="simp-title">Title</div><div class="simp-artist">Artist</div></div></div></div>';
simp_elem += '<div class="Audio_controls flex-wrap flex-align">';
simp_elem += '<div class="simp-plauseward flex flex-align"><button type="button" class="simp-prev fa fa-backward" disabled></button><button type="button" class="simp-plause fa fa-play" disabled></button><button type="button" class="simp-next fa fa-forward" disabled></button></div>';
simp_elem += '<div class="simp-tracker simp-load"><input class="simp-progress" type="range" min="0" max="100" value="0" disabled/><div class="simp-buffer"></div></div>';
simp_elem += '<div class="simp-time flex flex-align"><span class="start-time">00:00</span><span class="simp-slash"> / </span><span class="end-time">00:00</span></div>';
simp_elem += '<div class="simp-volume flex flex-align"><button type="button" class="simp-mute fa fa-volume-up"></button><input class="simp-v-slider" type="range" min="0" max="100" value="100"/></div>';
simp_elem += '<div class="simp-others flex flex-align"><div class="simp-shide"><button type="button" class="simp-shide-top fa fa-caret-up" title="Show/Hide Album"></button><button type="button" class="simp-shide-bottom fa fa-caret-down" title="Show/Hide Playlist"></button></div></div>';
simp_elem += '</div>'; //Audio_controls
var simp_player = document.createElement('div');
simp_player.classList.add('simp-player');
simp_player.innerHTML = simp_elem;
ap_simp.insertBefore(simp_player, simp_playlist);
simp_startScript();
}
</script>Now you need to change the Audio File URL, Audio Name, Description and it’s cover images. You can also customize the Player according to your website layout and Branding.
Now save the code and you have successfully added an MP3 Audio Player with Playlist options and Now user can switch between songs from the list.
If you have any doubt, feel free to ask me in the comment section.
