AS

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>
  
<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;}

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 loadTrack(myAudio) {

// Load a new track
 myAudio. var = document.getElementById("myAudio");
 myAudio.load();



// Set an interval of 1000 milliseconds
// for updating the seek slider
updateTimer = setInterval(seekUpdate, 1000);


}
   // 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...