JSFiddle - React, Tailwind, and code Playground

by MAORBITON

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Simple Music Player</title>
    <!-- Load FontAwesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

    <!-- Load the custom CSS style file -->

  </head>

  <body>

    <div class="player">

      <!-- Define the section for displaying details -->
      <div class="details">
        <div class="now-playing">מנגן x מתוך y</div>
        <div class="track-art"></div>
        <div class="track-name">Track Name</div>
        <div class="track-artist">Track Artist</div>
      </div>

      <!-- Define the section for displaying track buttons -->
      <div class="buttons">
        <div class="prev-track" onclick="prevTrack()">
          <i class="fa fa-step-backward fa-2x"></i>
        </div>
        <div class="playpause-track" onclick="playpauseTrack()">
          <i class="fa fa-play-circle fa-5x"></i>
        </div>
        <div class="next-track" onclick="nextTrack()">
          <i class="fa fa-step-forward fa-2x"></i>
        </div>
      </div>

      <!-- Define the section for displaying the seek slider-->
      <div class="slider_container">
        <div class="current-time">00:00</div>
        <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
        <div class="total-duration">00:00</div>
      </div>

      <!-- Define the section for displaying the volume slider-->
      <div class="slider_container">
        <i class="fa fa-volume-down"></i>
        <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
        <i class="fa fa-volume-up"></i>
      </div>
    </div>

CSS

/* Using flex with the column direction to
align items in a vertcal direction */
.player {
height: 95vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}

.details {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 25px;
}

/* Changing the font sizes to suitable ones */


.track-name {
font-size: 3rem;
}

.track-artist {
font-size: 1.5rem;
}

/* Using flex with the row direction to
align items in a horizontal direction */
.buttons {
display: flex;
flex-direction: row;
align-items: center;
}

.playpause-track,
.prev-track,
.next-track {
padding: 25px;
opacity: 0.8;

/* Smoothly transition the opacity */
transition: opacity .2s;
}

/* Change the opacity when mouse is hovered */
.playpause-track:hover,
.prev-track:hover,
.next-track:hover {
opacity: 1.0;
}

/* Define the slider width so that it scales properly */
.slider_container {
width: 75%;
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
background: black;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: white;
cursor: pointer;
border-radius: 50%;
}

/* Change the opacity when mouse is hovered */
.seek_slider:hover,
.volume_slider:hover {
opacity: 1.0;
}

.seek_slider {
width: 60%;
}

.volume_slider {
width: 30%;
}

.current-time,
.total-duration {
padding: 10px;
}

i.fa-volume-down,
i.fa-volume-up {
padding: 10px;
}

/* Change the mouse cursor to a pointer
when hovered over */
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
cursor: pointer;
}

JavaScript

let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");
 //+
let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

// Specify globally used values
let track_index = 0;
let isPlaying = false;
let updateTimer;

// צור את אלמט השמע 
let myAudio = document.createElement('audio');

//הגדר את רצועות השמע שיש להשמיע
let track_list = [
{
	name: "חכמת חינוך-פרשת בראשית",
	artist: "הרב חנינא מנס",
	path: "https://kol-tvuna.co.il/wp-content/uploads/2020/07/%D7%97%D7%9B%D7%9E%D7%AA-%D7%97%D7%99%D7%A0%D7%95%D7%9A-%D7%91%D7%9C%D7%A7.mp3"
},
{
	name: "חכמת חינוך-פרשת שמות",
	artist: "הרב חנינא מנס",
	path: "https://kol-tvuna.co.il/wp-content/uploads/2020/07/%D7%97%D7%9B%D7%9E%D7%AA-%D7%97%D7%99%D7%A0%D7%95%D7%9A-%D7%91%D7%9C%D7%A7.mp3"
},
{
	name: "חכמת חינוך-פרשת ויקרא",
	artist: "הרב חנינא מנס",
	path: "https://kol-tvuna.co.il/wp-content/uploads/2020/07/%D7%97%D7%9B%D7%9E%D7%AA-%D7%97%D7%99%D7%A0%D7%95%D7%9A-%D7%91%D7%9C%D7%A7.mp3",
},
];
function loadTrack(track_index) {
// Clear the previous seek timer
clearInterval(updateTimer);
resetValues();

// Load a new track
myAudio.src = track_list[track_index].path;
myAudio.load();

// Update details of the track
track_art.style.backgroundImage =
	"url(" + track_list[track_index].image + ")";
track_name.textContent = track_list[track_index].name;
track_artist.textContent = track_list[track_index].artist;
now_playing.textContent =
	"PLAYING " + (track_index + 1) + " OF " + track_list.length;

// Set an interval of 1000 milliseconds
// for updating the seek...