How to Use HTML, CSS, and JavaScript to Add a Music Player with Playlist in Blogger

byBashTec -
0

 

Music Player with playlist



If you would like to add an HTML audio player with a playlist feature to your Blogger website, then follow the instructions below.

Prior to using the audio player, you must upload your MP3 files to a cloud storage service like Github. 



Simply To add the audio player, navigate to the blog post in the Blogger dashboard. Paste the code below while in the HTML view.
Here, the audio file URL must be pasted in the data-src, and the list element's data-cover="Image_URL" can be used for the cover image.

CODE

<br /><div><div class="Multi-audio-player" data-config="{&quot;shide_top&quot;:false,&quot;shide_btm&quot;:false,&quot;auto_load&quot;:false}" id="simp">
  <div class="Audio-playlist">
    <ul>
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M1/raw/refs/heads/main/Copyright_Free_Islamic_Background_Music___Islamic_Music___Islamic_Background_Music_no_Copyright__(128k).mp3">M1</span><span class="Audio_description">Bashtec</span></li>
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M2/raw/refs/heads/main/Copyright_Free_Islamic_Background_Music___Islamic_Background_Music_no_Copyright___Islamic_NCM___NCS(128k).mp3">M2</span> <span class="Audio_description">Bashtec</span></li>
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M3/raw/refs/heads/main/Copyright_free_Islamic_Background_Music___Islamic_Music___No_Copyright_Islamic_Music___NCM___NCS__(128k).mp3">M3</span><span class="Audio_description">Bashtec</span></li>
      
       <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M4/raw/refs/heads/main/No_Copyright_Music___No_Copyright_Islamic_Background_Music___Islamic_Background_Music_Copyright_free(128k).mp3">M4</span><span class="Audio_description">Bashtec</span></li>
      
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M5/raw/refs/heads/main/No_Copyright_Music___Islamic_Emotional_background_music_Copyright_Free___No_Copyright_Sad_Music(128k).mp3">M5</span> <span class="Audio_description">Bashtec</span></li>
      
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M6/raw/refs/heads/main/Motivational_Background_Music____Islamic_Nasheed_Content(128k).mp3">M6</span> <span class="Audio_description">Bashtec</span></li>
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M7/raw/refs/heads/main/Muslim_Solider__Islamic_Back_Ground_Music_%23backgroundmusic(128k).mp3">M7</span> <span class="Audio_description">Bashtec</span></li>
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/M8/raw/refs/heads/main/Arabian_Camel_Caravan_Background_Music____copyright_free____Islamic_background_music(128k).mp3">M8</span> <span class="Audio_description">Bashtec</span></li>
      <li><span class="Audio_source" data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikY0B703YvMD2pRYr-yDAButfKyzzDqXWZw9OwjdYPyF-9GlVeJYDGe9jIW65OJFzm7uSrkcLxSKEs3FDKmX_NdPO0YTFyaZVjqKQzPLOOJ0RGxj2tnzYWIWGlNGr4iUPIb_fI_ZKHtRmKFLa1xFgKBkIMCE0LTl1aGFXDMQVEkGPT_mHbGfNOl0jL7dw/s512/IMG-20250315-WA0007.jpg" data-src="https://github.com/Basharat5536/mp31/raw/refs/heads/main/rabbir_hum_huma.mp3">D1</span> <span class="Audio_description">Bashtec</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></div>


The audio file's URL, name, description, and cover photos must now be changed. Additionally, you can alter the Player to fit the design and branding of your website.  


VIEW RESULT BELOW


  • M1Bashtec
  • M2 Bashtec
  • M3Bashtec
  • M4Bashtec
  • M5 Bashtec
  • M6 Bashtec
  • M7 Bashtec
  • M8 Bashtec
  • D1 Bashtec


That is Great! You have now learnt how to Add Music Player with Playlist in your blog post. Please feel free to leave any constructive feedback, suggestions or questions in the comments and I'll get back to you as quick as I can with concrete solutions. Want to know more about blog writing, please mention. I will make a tutorial on. 

 Thankyou 
 BashTec 



Read Also: 

      HTML Music Player 
      HTML link code
      HTML Scrollbox
      Commentbox Code
      HTML Boldtext
      Image Scrolling 
     Disclaimer Page 



Tags

You may like these posts

Post a Comment

Previous Post Next Post