JSFiddle - React, Tailwind, and code Playground

by MAORBITON

HTML

<head>
 <!-- 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 -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 
	<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>
 
<audio id="myAudio">
        <source src="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">
    </audio>
 
    <div id="c" onclick="playAndPause()">   
        <img id="play-image" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/play_arrow.svg_.png"
            width="170" height="170">
        <img id="pause-image" style="display:none;"
            src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]" width="170"
            height="170">                   
</div>

<div  id="a" onclick="skip(30)"> <img id="30 seconds ahead-image"
            src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/forward_30.svg_.png" width="90"
            height="90">
 
</div>
 
<div  id="b" onclick="skip(300)"> <img id="5 minutes ahead-image"
            src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/forward_5.svg_.png" width="90"
            height="90"> 
 
</div>
   
<div  id="d" onclick="skip(-300)"> <img id="5 minutes back-image"
            src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/replay_5.svg_.png" width="90"
            height="90">            
</div>
 
<div ...

CSS

/* סרגל התקדמות - חדש*/
/* 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: red;
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;
}

/* כפתורים - עצור ודלג*/
#a {
  position: fixed;
  left: 268px;
  top: 245px;}
#b {
  position: fixed;
  left: 360px;
  top: 245px;}
#c {
  position: fixed;
  left: 435px;
  top: 210px;}
#d {
  position: fixed;
  left: 593px;
  top: 245px;}
#e {
  position: fixed;
  left: 685px;
  top: 245px;}
  
/* רקע נגן*/

#rcorners1 {
  position: fixed;
  top: 217px;
  left: 261px;
  border-radius: 70px;
  border: 9px solid #a4a9ad;
  background-color:#dae8eb;
  width: 504px;
  height: 108px;
  z-index: -1;
 }


#rcorners2 { 
  position: relative;
  width: 90%;
  width: 504px;
  height: 108px;
  background: #fff;
  border-radius: 12px;
  top: 1px;
  left: 1px;
  
}
#rcorners2::before {
  position: absolute;
  content: '';
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  background: linear-gradient(to left, #007db5, #ff8a00);
  border-radius: 12px;
  z-index: -1;
}
 /* סרגל התקדמות
 

#progress {
   margin-left: 80px;
   border: 1px solid black;
}

#bar {
   height: 20px;
  ...

JavaScript

var myAudio = document.getElementById("myAudio");
        var imgPlay = document.getElementById("play-image");
        var imgPause = document.getElementById("pause-image");
       
        //  סרגל התקדמות - חדש
        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");
        

 // פליי ועצור
        function playAndPause() {
            if (myAudio.paused) {
                myAudio.play();
                imgPlay.style.display = "none";
                imgPause.style.display = "inline";
            } else {
                myAudio.pause();
                imgPlay.style.display = "inline";
                imgPause.style.display = "none";
            }
            
        }
        // דלג
    function skip(value) {
            
                        var audio = document.getElementById("myAudio");
            
                        audio.currentTime += value;}
   // סרגל התקדמות - חדש
   
   // Function to reset all values to their default
function resetValues() {
curr_time.textContent = "00:00";
total_duration.textContent = "00:00";
seek_slider.value = 0;
}
function seekTo() {
// Calculate the seek position by the
// percentage of the seek slider
// and get the relative duration to the track
seekto = myAudio.duration * (seek_slider.value / 100);

// Set the current track position to the calculated seek position
myAudio.currentTime = seekto;
}
function setVolume() {
// Set the volume according to the
// percentage of the volume slider set
myAudio.volume = volume_slider.value / 100;
}
function seekUpdate() {
let seekPosition = 0;

// Check if the current track duration is a legible number
if (!isNaN(myAudio.duration)) {
	seekPosition = myAudio.currentTime * (100 / myAudio.duration);
	seek_slider.value = seekPosition;

	// Calculate the time left...