Need to transform a single music audio player(single already works) into a playlist music audio player

.display-none {
display:none;
}

/volume**/

#volume-container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
}

#volume-slider{
transform: rotate(-90deg);
width: 100px;

}
#vol-up-svg{
margin-bottom: 50px;
transform: scale(1.5);
}

#vol-down-svg{
margin-top: 30px;
transform: scale(1.5);
}

#vol-down-svg:hover, #vol-up-svg:hover{
cursor: pointer;
}

input[type=range] {
width: 100%;
margin: 5.65px 0;
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: rgba(0, 38, 255, 0.78);
border: 0;
border-radius: 20.6px;
width: 100%;
height: 9.7px;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
margin-top: -5.65px;
width: 9px;
height: 21px;
background: #ffffff;
border: 1.8px solid #00001e;
border-radius: 21px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(0, 38, 255, 0.78);
}
input[type=range]::-moz-range-track {
background:rgba(0, 38, 255, 0.78);
border: 0;
border-radius: 20.6px;
width: 100%;
height: 9.7px;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 9px;
height: 21px;
background: #ffffff;
border: 1.8px solid #00001e;
border-radius: 21px;
cursor: pointer;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 6.55px 0;
color: transparent;
width: 100%;
height: 9.7px;
cursor: pointer;
}
input[type=range]::-ms-fill-lower {
background:rgba(0, 38, 255, 0.78);
border: 0;
border-radius: 41.2px;
}
input[type=range]::-ms-fill-upper {
background: rgba(0, 38, 255, 0.78);
border: 0;
border-radius: 41.2px;
}
input[type=range]::-ms-thumb {
width: 9px;
height: 21px;
background: #ffffff;
border: 1.8px solid #00001e;
border-radius: 21px;
cursor: pointer;
margin-top: 0px;
/Needed to keep the Edge thumb centred/
}
input[type=range]:focus::-ms-fill-lower {
background:rgba(0, 38, 255, 0.78);
}
input[type=range]:focus::-ms-fill-upper {
background: rgba(0, 38, 255, 0.78);
}

/*TIME/

#seek-container{
width: 300px;
}

<audio id="my-audio" src="/Portfolio/P1 - Music Site/music/hypnagogia-album/4_secondport.mp3" type="audio/mpeg" preload="metadata"></audio>

 <div id="audio-player-container">

        <div id="play-pause-container">
            <i class="fas fa-play" id="play-button"></i>

                
            <i class="fas fa-pause" id="pause-button"></i>

        </div>
        


        <div id="volume-container">

            <div id="vol-up-btn" class="vol-btn">
                <i class="fas fa-volume-up" id="vol-up-svg"></i>
              
             </div>

         <input id="volume-slider" type="range" min="0" max="1" value="1" step="0.1"> <br>
         
         <div id="vol-down-btn" class="vol-btn">
            <i class="fas fa-volume-off" id="vol-down-svg"></i>

         </div>
         
         
         <!-- <div id="vol-mute-btn" class="vol-btn">
            
         </div> -->
  
        </div>



        <div id="seek-container">
            <input id="seekslider" type="range" min="0" step="1" value="">
            <div id="seek-values" style="display:flex">
               <div id="current-time" style="flex:1;"></div>
               <div id="total-time" style="flex: 1; text-align:right;"></div>
            </div>

        </div>


    </div>




    <script>

var myAudio = document.getElementById(‘my-audio’);

var playButton = document.getElementById(‘play-button’);
var pauseButton = document.getElementById(‘pause-button’);

var currentTimeContainer = document.getElementById(‘current-time’);
var totalTimeContainer = document.getElementById(‘total-time’);
var seekSlider = document.getElementById(“seekslider”);

var volUpButton = document.getElementById(‘vol-up-btn’);
var volDownButton = document.getElementById(‘vol-down-btn’);
var volMuteButton = document.getElementById(‘vol-mute-btn’);
let volumeSlider = document.getElementById(“volume-slider”);

var myAudio = document.getElementById(‘my-audio’);

    playButton.addEventListener("click", function(){
        myAudio.play();
        playButton.classList.add('display-none');
        pauseButton.classList.remove('display-none');
    });
    pauseButton.addEventListener("click", function(){
        myAudio.pause();
        pauseButton.classList.add('display-none');
        playButton.classList.remove('display-none');
    });
    volUpButton.addEventListener("click", function(){
        myAudio.volume+=0.1;
    });
    volDownButton.addEventListener("click", function(){
        myAudio.volume-=0.1;
    });

//TIME

function convertElapsedTime(inputSeconds) {
var seconds = Math.floor(inputSeconds % 60)
if (seconds < 10) {
seconds = “0” + seconds
}
var minutes = Math.floor(inputSeconds / 60)
return minutes + “:” + seconds
}

myAudio.addEventListener(‘loadedmetadata’, function() {
totalTimeContainer.innerHTML = convertElapsedTime(myAudio.duration);
currentTimeContainer.innerHTML = convertElapsedTime(myAudio.currentTime);
seekSlider.max= myAudio.duration;
seekSlider.setAttribute(“value”, myAudio.currentTime);
});

myAudio.addEventListener(‘timeupdate’, function() {
currentTimeContainer.innerHTML = convertElapsedTime(myAudio.currentTime);
seekSlider.setAttribute(“value”, myAudio.currentTime);
seekSlider.value = myAudio.currentTime;

if (myAudio.ended) {
   pauseButton.classList.add('display-none');
   playButton.classList.remove('display-none');
}

});

seekSlider.addEventListener(“change”, function () {
myAudio.currentTime = seekSlider.value;
});

//VOLUME
function setvolume(){
myAudio.volume = volumeSlider.value;
}
function setvolumeSlider(){
volumeSlider.value = myAudio.volume;
}
volumeSlider.addEventListener(“mousemove”, setvolume);

volUpButton.addEventListener(“click”, function(){
myAudio.volume+=0.1;
setvolumeSlider();
});
volDownButton.addEventListener(“click”, function(){
myAudio.volume-=0.1;
setvolumeSlider();
});
volMuteButton.addEventListener(“click”, function(){
myAudio.muted = !myAudio.muted;
});

    </script>
</body>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.