נגן פרוייקט

by MAORBITON

HTML

<!DOCTYPE html>

<html lang="he">
<head>
    <title>נגן ארכיון</title>
    <meta charset="UTF-8">
</head>

<p  id="H1"> חכמת חינוך - פרשת בראשית </p>
<p id="H2">בהגשת הרב חנניא מנס שליט"א</p>


	<audio id="myAudio">
        <source src="https://onedrive.live.com/download?cid=F760FC356480E079&resid=F760FC356480E079%212007&authkey=AJq_7WZuS1BaSPY" type="audio/mpeg">
          
    </audio>
 <div id="play" onclick="playAndPause()">   
        <img id="play-image" src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]"
            width="100" height="100">
        <img id="pause-image" style="display:none;"
            src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/[email protected]" width="100"
            height="100">
            <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  id="e"onclick="skip(-30)"> <img id="30 seconds back-image"
            src="https://kol-tvuna.co.il/wp-content/uploads/2021/01/replay_30.svg_.png" width="90"
            height="90">
</div>

    

      <!-- זמן ווליום -->
        <input type="range" min="0" max="1" step="0.01" id="volume"
            onchange="ChangeVolume()">
        <br />

        <input type="range" step="any" id="seekbar" class="seek_slider"
            onchange="ChangeTheTimea()">
        <label class="p1" id="lblTime">00:00</label>
        <label class="p1" id="lblTimeA">00:00</label> 
    </div>
          <!--...

CSS

#H1 { 
  direction: rtl;
  unicode-bidi: bidi-override;
  top: 20px;
  font-size: 40px;
  text-align: center;
  position: relative;
  animation-name: h1;
  animation-duration: 11s;
  animation-delay: -6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: -3;

}

@keyframes h1 {
  0%   {left:1000px; top:0px;}
  50%  { left:0px; top:0px;}
  100% {left:-1000px; top:0px;}
  
}
 
  #H2 {
  direction: rtl;
  unicode-bidi: bidi-override;
  font-size: 40px;
  top: 20px;
  text-align: center;
  position: relative;
  animation-name: h2;
  animation-duration: 11s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: -3;
}

@keyframes h2 {
  0%   {left:1000px; top:-85px;}
  50%  { left:0px; top:-85px;}
  100% {left:-1000px; top:-85px;}
  
}
/* כיסוי לכתב */
  #rcorners5-1 {
  position: fixed;
  top:30px;
  left:1043px;
  border-radius: 3px;
   background-color:#1b7597;
  width:12px;
  height: 40px;
  z-index: -2;
 }
 #rcorners5-2 {
  position: fixed;
  top:30px;
  left:-1px;
  border-radius: 3px;
   background-color:#1b7597;
  width:12px;
  height: 40px;
  z-index: -2;
 }
 #rcorners5-3 {
  position: fixed;
  top:30px;
  left:11px;
  border-radius: 3px;
   background-color:#fff;
  width:50px;
  height: 40px;
  z-index: -3;
 }
 
#lblTime {
  position: fixed;
  left: 950px;
 top: 173px;}
  
  #lblTimeA {
  position: fixed;
  left: 140px;
  top: 173px;}
  
  .IMG
  {
  position: fixed;
  left: 223px;
  top: 112.5px;
  z-index: -1;
  width: 725px;
  height:150px;
  }
 /* עיצוב סגרל התקדמות */ 
  .seek_slider {
appearance: none;
 /* מיקום */ 
position: fixed;
  left: 223px;
  top: 181px;
/* אורך סרגל */
width: 712px;
/* עובי סרגל */
height: 4.5px;
/* צבע סרגל */
background: #fff; opacity: 0.8;


}

/* עיגול */

.seek_slider::-webkit-slider-thumb {
appearance: none;
width: 5px;
height: 60px;
background: #1b7597;
border-radius: 2px;
opacity: 0.7;
}
/*צבע נגיעה - מדגיש במעבר אצבע ...

JavaScript

// get the audio, volume and seekbar elements
        var  myaudio = document.getElementById("myAudio");
        var imgPlay = document.getElementById("play-image");
        var imgPause = document.getElementById("pause-image");
       
        var volumeRange = document.getElementById('volume');
        var seekbar = document.getElementById('seekbar');
        
        
        
        window.onload = function () {
            myaudio.addEventListener('timeupdate', UpdateTheTime, false);
             myaudio.addEventListener('durationchange', SetSeekBar, false);
            volumeRange.value = audio.volume;
        }

       // יופעל בעת שינוי אלמנט הנפח
        function ChangeVolume() {
            var myVol = volumeRange.value;
             myaudio.volume = myVol;
            if (myVol == 0) {
                 myaudio.muted = true;
            } else {
                 myaudio.muted = false;
            }
        }

// מופעל בעת טעינת הדף, הוא מגדיר את טווח המינימום והמקסימום של האודיו
function SetSeekBar() {
            seekbar.min = 0;
            seekbar.max = myaudio.duration;
        }

        // fires when seekbar is changed
        function ChangeTheTimea() {
             myaudio.currentTime = seekbar.value;
        }
        


        function UpdateTheTime() {
        
           myaudio.currentTime * (100 / myAudio.duration);
           // זמן כולל
           var min = Math.floor(myAudio.duration / 60);
            var sec = Math.floor(myAudio.duration - min * 60)
            // זמן שחלף
            var minA = Math.floor(myAudio.currentTime / 60);
            var secA = Math.floor(myAudio.currentTime - minA * 60)
            
            // השלמת 0
            if (sec.toString().length < 2) sec = "0" + sec;
            if (min.toString().length < 2) min = "0" + min;
            if (secA.toString().length < 2) secA = "0" + secA;
            if (minA.toString().length < 2) minA = "0" + minA;
            // הצג טיימרים
           ...