FD

by MAORBITON

HTML

<audio id="myAudio" type="audio/mpeg"   preload="metadata" 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="audio-player-container">
     <div id="play-pause-container"></div>
     <div id="volume-container"></div>
     <div id="seek-container"></div>
</div>
<!--  כפתור ההפעלה / השהיה -->
<div id="play-pause-container">
   <img version="1.1" id="play-button" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/play_arrow.svg_.png">
    <img version="1.1" id="pause-button" class="display-none" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]">
</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>
   <!--   בקרות עוצמת קול של אודיו HTML  -->
<div id="volume-container">
     <input id="volume-slider" type="range" min="0" max="1" value="1" step="0.1"> <br>
     <div id="vol-down-btn" class="vol-btn">
          <img version="1.1" id="vol-down-svg" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]" >
     </div>
     <div id="vol-up-btn" class="vol-btn">
          <img version="1.1" id="vol-up-svg" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]">
     </div>
     <div id="vol-mute-btn" class="vol-btn">
         <img version="1.1" id="vol-mute-svg" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]" >
     </div>
</div>

CSS

.display-none {
    display:none;
}

JavaScript

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");
// 
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');
});
//לקבוע כמה זמן האודיו
myAudio.addEventListener('loadedmetadata', function() {
    totalTimeContainer.innerHTML = myAudio.duration;
    currentTimeContainer.innerHTML = myAudio.currentTime;
});
// פונקציה להמרה לדקות ושניות
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);
});
//לאתחל את הערך המקסימלי של המחוון וכן להגדיר את תכונת הערך
myAudio.addEventListener('loadedmetadata', function() {
     totalTimeContainer.innerHTML = convertElapsedTime(myAudio.duration);
     currentTimeContainer.innerHTML = convertElapsedTime(myAudio.currentTime);
     seekSlider.max= myAudio.duration;
  ...