If You Want Adsense Approval for your blog Contact Us Adsense Ready theme Now!

How to create Music player with pure HTML, CSS, JS for Blogger

The article I share with you about adding JavaScript music player utilities to your website or blog. This widget will use HTML CSS JS.
How to create Music player with pure HTML, CSS, JS for Blogger
How to create Music player with pure HTML, CSS, JS for Blogger


 Hello friends, I will share with you how to add a JavaScript music player widget to your website or blog. This utility will use HTML CSS and JavaScript, I recently shared the article Code to display a message when the network connection is lost for Website/Blogspot , you can refer to it for more information.

This JavaScript music player utility has the functions of looping songs, looping playlists, shuffle songs in the list and play/pause buttons, previous and next songs. You can also see the list of songs and the currently playing music in the playlist.

Share the code to display the music player using JavaScript

Step 1: You add the following HTML code where you want to display the music player.

< div  class = 'music-box' > 
	< div  class = 'top-bar' > 
		< i  class = 'has-svg-icon music-more' > </ i > 
		< span > Now Playing </ span > 
		< i  class = 'has-svg-icon music-horiz' > </ i > 
	</ div > 
	< div  class = 'img-area' > 
		<img  alt = '' loading = 'lazy'  src = ''  title = '' /> 
	</ div > 
	< div  class = 'song-details' > 
		< p  class = 'name' > </ p > 
		< p  class = 'artist' > < / p > 
	</ div > 
	< div  class = 'progress-area' > 
		< div  class = 'progress-bar' > 
			<audio  id = 'main-audio'  src = '' > </ audio > 
		</ div > 
		< div  class = 'song-timer' > 
			< span  class = 'current-time' > 0:00 </ span > 
			< span  class = 'max-duration' > 0:00 </ span > 
		</ div > 
	</ div > 
	<div  class = 'controls' >
		< i  class = 'has-svg-icon music-repeat'  id = 'repeat-plist'  title = 'playlist looped' > < span > repeat </ span > </ i > 
		< i  class = 'has-svg-icon music-skippre'  id = 'prev' > </ i > 
		< div  class = 'play-pause' > 
			< i  class = 'has-svg-icon music-play play' ></ i >
		</ div > 
		< i  class = 'has-svg-icon music-skipnext'  id = 'next' > </ i > 
		< i  class = 'has-svg-icon music-queue'  id = 'more-music' > </ i > 
	</ div > 
	< div  class = 'slider_volumn' > 
		< i  class = 'has-svg-icon icon-volume-down'  id = 'min-volume' > </ i > 
		< input class = 'volume_slider'  max = '100'  min = '1'  onchange = 'setVolume()'  type = 'range'  value = '100' /> 
		< i  class = 'has-svg-icon icon-volume-up'  id = 'max-volume' > </ i > 
	</ div > 
	< div  class = 'music-list' > 
		< div  class = 'header-music' >
			< div  class ='row-music' > 
				< i  class = 'has-svg-icon list music-queuemenu' > </ i > 
				< span > Music list </ span > 
			</ div > 
			< i  class = 'has-svg-icon music -close'  id = 'close' > </ i > 
		</ div > 
		< ul > 
		</ ul > 
	</ div > 
</ div >


Step 2: Add the following CSS to your theme or CSS file. Note that you remember to edit the CSS to suit your website or blog.


.music-box { max-width : 300px ; width : 100% ; padding : 10px ; overflow :hidden; position :relative; background : #fff ; box-shadow : 0  6px  15px  0  12px  25px  0  rgb (30 30 30 / 4%)}
 .music-box  i { cursor :pointer}
 .top -bar , .progress-area .song  -timer , .music-list  . header-music , .music-list ul  li { display :flex; align-items :center; justify-content :space-between}
 .controls { display :flex; align-items :center; justify-content :space-evenly} .top
 -bar  span { font-size : 16px ; margin-left :- 3px ; color : #555 }
 .img-area { width : 185px ; height : 185px ; position :relative; overflow:hidden; margin : 15px auto 0 ; border : 5px solid #fff ; border-radius : 50% ; box-shadow : 0  6px  12px  rgba (0,0,0,0.09)}
 .img-area :before { content : '' ; position :absolute; top : 50% ; left : 50% ; width : 20px ; height : 20px ; transform: translate (-50%, -50%); background-color : #d6dee7 ; border-radius : 50% ; box-shadow :inset 0  0  0  2px  #fff ; z-index : 2 }
 .img-area  img { width : 100% ; height : 100% ; border-radius : 50% ; object-fit :cover}
 .music-box .paused  .img-area  img { animation : rotateAlbumArt 3slinear 0s infinite forwards}
 .song-details { text-align :center; margin : 20px  0 }
 .song-details  p { color : #666 }
 .song-details  .name { font-size : 16px }
 .song -details  .artist { font-size : 13px ; opacity :. 9 ; line-height : 35px }
 .progress-area { height : 10px ; width: 100% ; border-radius : 50px ; background : #f0f0f0 ; cursor :pointer}
 .progress-area  .progress-bar { height :inherit; width : 0 ; position :relative; border-radius :inherit; background : linear-gradient (90deg,#7577a9 0%,#66689c 100%)}
 .progress-area .song  -timer { margin-top : 5px }
 .song-timer  span { font-size : 13px ;color : #666 }
 .controls { margin : 30px  0  20px }
 .controls  .play-pause { height : 30px ; width : 30px ; display :flex; cursor :pointer; align-items :center; justify-content :center; border-radius : 50% ; background : #fff }
 .play-pause ::before { position :absolute; content : ""; height : 30px ; width : 30px ; border-radius :inherit; background : linear-gradient (#7577a9 0%,#66689c 100%)}
 .play-pause  i { position :absolute}
 .music-list { position :absolute; background : #fff ; width : 100% ; left : 0 ; bottom :- 55% ; opacity : 0 ; pointer-events :none; z-index: 5 ; padding : 15px  30px ; box-shadow : 0 - 5px  10px  rgba (0,0,0,0.05); transition :all . 15s ease-out}
 #repeat-plist > span { display :none}
 .music-list .show { bottom : 0 ; opacity : 1 ; pointer-events :auto}
 .header-music  .row-music { display :flex; align-items :center; font-size: 19px }
 .header-music  .row-music  i { cursor :default}
 .header-music  .row-music  span { margin-left : 5px ; font-size : 15px ; color : #666666 }
 .music-list  ul { margin : 10px  0 !important ; max-height : 260px ; overflow :auto}
 .music-list  ul ::-webkit-scrollbar { width : 0 }
.music-list  ul  li { list-style :none; display :flex; cursor :pointer; padding-bottom : 10px ; margin-bottom : 10px ; color : #666 ; border-bottom : 1px solid #E5E5E5 }
 .music-list  ul  li :last-child { border-bottom : 0 }
 .music-list  ul  li  .row  span { font-size : 15px }
.music-list  ul  li  .row  p { opacity :. 9 ; font-size : 13px ; margin-top : 5px }
 ul  li  .audio-duration { font-size : 13px }
 ul  li .playing { pointer-events :none; color : #66689c }
 .slider_volumn { display :flex; justify-content :center; align-items :center}
 .volume_slider { height: 10px ; width : 100% ; border-radius : 50px ; background : #f0f0f0 ; cursor :pointer; padding : 0 ; overflow :hidden; -webkit-transition : . 2s ; transition : opacity . 2s ; -webkit-appearance :none}
 .volume_slider ::-webkit-slider-thumb { -webkit-appearance :none; appearance :none; width : 10px ; Cao: 10px ; background : #66689c ; cursor : pointer; border-radius : 0  50%  50%  0 ; box-shadow :- 350px  0px  0px  340px  #66689c }
 .volume_slider ::-moz-range-thumb { width : 10px ; height : 10px ; background : #66689c ; cursor :pointer}
@ keyframes rotateAlbumArt{0%{ transform : rotateZ (0)}100%{ transform : rotateZ (360deg)}}
 .has-svg-icon :before { background-size : 100% ; content : "" ; display :inline-block; vertical-align :middle}
 .music-more :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E% 0A" ); width : 20px ; height : 20px }
 .music-horiz :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 ​​2s.9 2 2 2 2-9 2-2- .9-2-2-2zm12 0c-1.1 0-2 .9-2 ​​2s.9 2 2 2 2-9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9 -2 2s.9 2 2 2 2-2.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }
 .music-play :before { background-image : url ( "data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg ' height='24' viewBox='0 0 24 24' width='24'); width : 23px ; height : 23px }
 .music-pause :before { background-image : url ( "data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg ' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/ %3E%3C/svg%3E%0A" ); width : 23px ; height : 23px }
 .music-skippre :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 6h2v12H6zm3.5 6l8.5 6V6z'/%3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }
 .music-skipnext :before { background-image : url ( "data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg ' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 18l8.5-6L6 6v12zM16 6v12h2V6h -2z': 20px }
 .music-repeat :before { background-image : url ( "data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v -3l-4 4 4 4v-3h12v-6h-2v4z'/%3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }
 .music-repeatone :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4- 2V9h-1l-2 1v1h1.5v4H13z'/%3E%3C/svg%3E " ); width : 20px ; height : 20px }
 .music-shuffle :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/%3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }
 .music-queue :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E% 3Cpath d='M15,6H3v2h12V6z M15,10H3v2h12V10z M3,16h8v-2H3V16z M17.6v8.18C16.69,14.07,16.35,14,16,14c-1.66.0-3,1.34-3.3s1.34,3,3 ,3 s3-1.34.3-3V8h3V6H17z'/%3E%3C/g%3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }
 .music-queuemenu :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24' viewBox='0 0 24 24' width='24'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E% 3Cpath d='M15,6H3v2h12V6z M15,10H3v2h12V10z M3,16h8v-2H3V16z M17.6v8.18C16.69,14.07,16.35,14,16,14c-1.66.0-3,1.34-3.3s1.34,3,3 ,3 s3-1.34.3-3V8h3V6H17z'/%3E%3C/g%3E%3C/svg%3E%0A" ); width : 20px ; height : 23px }
 .music-close :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%23666666' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 20,188l-8.315-8,209 8.2-8.282-3,697-3,697-8.212 8.318-8.31-8,203-3,666 3,666 8,321 8,24-8.206 8,313 3,666 3,666 8,237-8.318 8,285 8,203z'/%3E %3C/svg%3E" ); width : 11px ; height : 11px }
 .icon-volume-up :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/ %3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }
 .icon-volume-down :before { background-image : url ("data:image/svg+xml,%3Csvg fill='%237577a9' xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width=' 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z'/%3E%3C/svg%3E%0A" ); width : 20px ; height : 20px }

Step 3: Add the following JavaScript to your theme or JS file. Here I create Array JS to add a list of songs.

// To add music you copy and edit inside the array as follows 
// { 
// name: "Track name", 
// artist: "Artist", 
// img: "Image pathname" , 
// src: "Track Name" 
// } 
let allMusic = [
    {
        name : "Harley Bird - Home" ,
         artist : "Jordan Schor" ,
         img : "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-1.jpg" ,
         src : "https:/ /ia801400.us.archive.org/27/items/music_20210917/music-1.mp3" ,
         id : "m1"
    },
    {
        name : "Ikson Anywhere – Ikson" ,
         artist : "Audio Library" ,
         img : "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-2.jpg" ,
         src : "https:/ /ia801400.us.archive.org/27/items/music_20210917/music-2.mp3" ,
         id : "m2"
    },
    {
        name : "Beauz & Jvna - Crazy" ,
         artist : "Beauz & Jvna" ,
         img : "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-3.jpg" ,
         src : "https ://ia801400.us.archive.org/27/items/music_20210917/music-3.mp3" ,
         id : "m3"
    },
    {
        name : "Hardwind - Want Me" ,
         artist : "Mike Archangelo" ,
         img : "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-4.jpg" ,
         src : "https:/ /ia801400.us.archive.org/27/items/music_20210917/music-4.mp3" ,
         id : "m4"
    },
    {
        name : "Jim - Sun Goes Down" ,
         artist : "Jim Yosef x Roy" ,
         img : "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-5.jpg" ,
         src : " https://ia801400.us.archive.org/27/items/music_20210917/music-5.mp3" ,
         id : "m5"
    },
    {
        name : "Lost Sky - Vision NCS" ,
         artist : "NCS Release" ,
         img : "https://cdn.jsdelivr.net/gh/ngylduy/storage/image/music-6.jpg" ,
         src : "https: //ia801400.us.archive.org/27/items/music_20210917/music-6.mp3" ,
         id : "m6"
    }
];

Last step: Continue to add the following JavaScript, this JavaScript is the functions and events for the music player.

const wrapper = document .querySelector( ".music-box" ),
    musicImg = wrapper.querySelector( ".img-area img" ),
    musicName = wrapper.querySelector( ".song-details .name" ),
    musicArtist = wrapper.querySelector( ".song-details .artist" ),
    playPauseBtn = wrapper.querySelector( ".play-pause" ),
    prevBtn = wrapper.querySelector( "#prev" ),
    nextBtn = wrapper.querySelector( "#next" ),
    mainAudio = wrapper.querySelector( "#main-audio" ),
    progressArea = wrapper.querySelector( ".progress-area" ),
    progressBar = progressArea.querySelector( ".progress-bar" ),
    musicList = wrapper.querySelector( ".music-list" ),
    moreMusicBtn = wrapper.querySelector( "#more-music" ),
    closemoreMusic = musicList.querySelector( "#close" ),
    volumeslider = wrapper.querySelector( ".volume_slider" ),
    maxvolum = wrapper.querySelector( "#max-volume" ),
    minvolum = wrapper.querySelector( "#min-volume" );
let musicIndex = Math .floor(( Math .random() * allMusic.length) + 1 );
isMusicPaused = true ;
curr_track = mainAudio;
window .addEventListener( "load" , () => {
    loadMusic(musicIndex);
    playingSong();
});
function  loadMusic ( indexNumb ) {
    musicName.innerText = allMusic[indexNumb - 1 ].name;
    musicArtist.innerText = allMusic[indexNumb - 1 ].artist;
    musicImg.alt = allMusic[indexNumb - 1 ].artist;
    musicImg.title = allMusic[indexNumb - 1 ].artist;
    musicImg.src = allMusic[indexNumb - 1 ].img;
    mainAudio.src = allMusic[indexNumb - 1 ].src;
}
function  playMusic () {
    wrapper.classList.add( "paused" );
    playPauseBtn.querySelector( "i" ).classList.remove( "music-play" );
    playPauseBtn.querySelector( "i" ).classList.add( "music-pause" );
    mainAudio.play();
}
function  pauseMusic () {
    wrapper.classList.remove( "paused" );
    playPauseBtn.querySelector( "i" ).classList.remove( "music-pause" );
    playPauseBtn.querySelector( "i" ).classList.add( "music-play" );
    mainAudio.pause();
}
function  prevMusic () {
    musicIndex--;
    musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;
    loadMusic(musicIndex);
    playMusic();
    playingSong();
}
function  nextMusic () {
    musicIndex++;
    musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;
    loadMusic(musicIndex);
    playMusic();
    playingSong();
}
playPauseBtn.addEventListener( "click" , () => {
     const isMusicPlay = wrapper.classList.contains( "paused" );
    isMusicPlay ? pauseMusic() : playMusic();
    playingSong();
});
prevBtn.addEventListener( "click" , () => {
    prevMusic();
});
nextBtn.addEventListener( "click" , () => {
    nextMusic();
});
mainAudio.addEventListener( "timeupdate" , (e) => {
     const currentTime = e.target.currentTime;
     const duration = e.target.duration;
     let progressWidth = (currentTime / duration) * 100 ;
    progressBar.style.width = ` ${progressWidth} %` ;
    let musicCurrentTime = wrapper.querySelector( ".current-time" ),
        musicDuartion = wrapper.querySelector( ".max-duration" );
    mainAudio.addEventListener( "loadeddata" , () => {
         let mainAdDuration = mainAudio.duration;
         let totalMin = Math .floor(mainAdDuration / 60 );
         let totalSec = Math .floor(mainAdDuration % 60 );
         if (totalSec < 10 ) {
            totalSec = `0 ${totalSec} ` ;
        }
        musicDuartion.innerText = ` ${totalMin} : ${totalSec} ` ;
    });
    let currentMin = Math .floor(currentTime / 60 );
    let currentSec = Math .floor(currentTime % 60 );
    if (currentSec < 10 ) {
        currentSec = `0 ${currentSec} ` ;
    }
    musicCurrentTime.innerText = ` ${currentMin} : ${currentSec} ` ;
});
progressArea.addEventListener( "click" , (e) => {
     let progressWidth = progressArea.clientWidth;
     let clickedOffsetX = e.offsetX;
     let songDuration = mainAudio.duration;
    mainAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration;
    playMusic();
    playingSong();
});
const repeatBtn = wrapper.querySelector( "#repeat-plist span" );
wrapper.querySelector( "#repeat-plist" ).addEventListener( "click" , () => {
     let getText = repeatBtn.innerText;
     switch (getText) {
         case  "repeat" :
            repeatBtn.innerText = "repeat_one" ;
            wrapper.querySelector( "#repeat-plist" ).classList.toggle( "music-repeat" );
            wrapper.querySelector( "#repeat-plist" ).classList.toggle( "music-repeatone" );
            wrapper.querySelector( "#repeat-plist" ).setAttribute( "title" , "Song looped" );
            break ;
        case  "repeat_one" :
            repeatBtn.innerText = "shuffle" ;
            wrapper.querySelector( "#repeat-plist" ).classList.toggle( "music-repeatone" );
            wrapper.querySelector( "#repeat-plist" ).classList.toggle( "music-shuffle" );
            wrapper.querySelector( "#repeat-plist" ).setAttribute( "title" , "Playback shuffled" );
            break ;
        case  "shuffle" :
            repeatBtn.innerText = "repeat" ;
            wrapper.querySelector( "#repeat-plist" ).classList.toggle( "music-shuffle" );
            wrapper.querySelector( "#repeat-plist" ).classList.toggle( "music-repeat" );
            wrapper.querySelector( "#repeat-plist" ).setAttribute( "title" , "Playlist looped" );
            break ;
    }
});
mainAudio.addEventListener( "ended" , () => {
     let getText = repeatBtn.innerText;
     switch (getText) {
         case  "repeat" :
            nextMusic();
            break ;
        case  "repeat_one" :
            mainAudio.currentTime = 0 ;
            loadMusic(musicIndex);
            playMusic();
            break ;
        case  "shuffle" :
             let randIndex = Math .floor(( Math .random() * allMusic.length) + 1 );
            do {
                randIndex = Math .floor(( Math .random() * allMusic.length) + 1 );
            } while (musicIndex == randIndex);
            musicIndex = randIndex;
            loadMusic(musicIndex);
            playMusic();
            playingSong();
            break ;
    }
});
moreMusicBtn.addEventListener( "click" , () => {
    musicList.classList.toggle( "show" );
});
closemoreMusic.addEventListener( "click" , () => {
    moreMusicBtn.click();
});
const ulTag = wrapper.querySelector( "ul" );
for ( let i = 0 ; i < allMusic.length; i++) {
     let liTag = `<li li-index=" ${i + 1 } ">
                <div class="row">
                  <span> ${allMusic[i].name} </span>
                  <p> ${allMusic[i].artist} </p>
                </div>
                <span id=" ${allMusic[i].id} " class="audio-duration">3:40</span>
                <audio class=" ${allMusic[i].id} " src=" ${allMusic[i].src} "></audio>
              </li>` ;
    ulTag.insertAdjacentHTML( "beforeend" , liTag);
    let liAudioDuartionTag = ulTag.querySelector( `# ${allMusic[i].id} ` );
    let liAudioTag = ulTag.querySelector( `. ${allMusic[i].id} ` );
    liAudioTag.addEventListener( "loadeddata" , () => {
         let duration = liAudioTag.duration;
         let totalMin = Math .floor(duration / 60 );
         let totalSec = Math .floor(duration % 60 );
         if (totalSec < 10 ) {
            totalSec = `0 ${totalSec} ` ;
        };
        liAudioDuartionTag.innerText = ` ${totalMin} : ${totalSec} ` ;
        liAudioDuartionTag.setAttribute( "t-duration" , ` ${totalMin} : ${totalSec} ` );
    });
}
function  playingSong () {
     const allLiTag = ulTag.querySelectorAll( "li" );

    for ( let j = 0 ; j < allLiTag.length; j++) {
         let audioTag = allLiTag[j].querySelector( ".audio-duration" );

        if (allLiTag[j].classList.contains( "playing" )) {
            allLiTag[j].classList.remove( "playing" );
            let adDuration = audioTag.getAttribute( "t-duration" );
            audioTag.innerText = adDuration;
        }
        if (allLiTag[j].getAttribute( "li-index" ) == musicIndex) {
            allLiTag[j].classList.add( "playing" );
            audioTag.innerText = "Playing" ;
        }
        allLiTag[j].setAttribute( "onclick" , "clicked(this)" );
    }
}
function  clicked ( element ) {
     let getLiIndex = element.getAttribute( "li-index" );
    musicIndex = getLiIndex;
    loadMusic(musicIndex);
    playMusic();
    playingSong();
}
function  setVolume () {
    curr_track.volume = volumeslider.value / 100 ;
}
maxvolum.addEventListener( "click" , () => {
    curl_track.volume = 1 ;
    volumeslider.value = 100
})
minvolum.addEventListener( "click" , () => {
    curr_track.volume = 0.01 ;
    volumeslider.value = 0 
})

That's it,I saw some of you commenting asking for my music player code, in this article I have shared with you the code to display the music player using JavaScript . If you do not understand any part or error, please comment below this article and I will help you! will make video on it too

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.