How to add a new function for replay audio

How to add a new function for replay audio

Hi there, I am new to jQuery and find a Code Snipped which I use, but there is a missing function for replay audio files. And I searched now for days to find a solution. Can someone give me a hint? 

Currently you can start each audio file and pause it and to continue you press play again. If the file then ends, you can't replay the audio, and this is my missing function which I don't get to work. 

  1. HTML Audio Playbuttons
  2. <audio id="myAudio">&nbsp;</audio>
  3. <div data-pos="0" data-src="test1.mp3" data-src2=""><button class="btnPlayPause button">►||</button>Audio 1</div>
  4. <div data-pos="0" data-src="test2.mp3" data-src2=""><button class="btnPlayPause button">►||</button>Audio 2</div>
  5. <div data-pos="0" data-src="test3.mp3" data-src2=""><button class="btnPlayPause button">►||</button>Audio 3</div>
  6. <div data-pos="0" data-src="test4.mp3" data-src2=""><button class="btnPlayPause button">►||</button>Audio 4</div>

  1. jQuery Code Snippet
  2. jQuery(function (){
  3.     var myAudio = document.getElementById("myAudio");
  4.     var current = null;
  5.     var playingString = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">||</span>";
  6.     var pausedString = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">►</span>";
  7.     $(document.body).on('click', '.btnPlayPause',function(e){
  8.         var target = this;
  9.         //console.log(target, current); //return;
  10.         if (current == target) {
  11.             target.innerHTML = pausedString;
  12.             target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
  13.             myAudio.pause();
  14.             current = null;
  15.         } else { // current!=target
  16.             if (current != null) {
  17.                 current.innerHTML = pausedString;
  18.                 current.parentNode.setAttribute('data-pos', '0'); //reset position
  19.                 target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
  20.             }
  21.             current = target;
  22.             target.innerHTML = playingString;
  23.             if(myAudio.canPlayType && myAudio.canPlayType("audio/mpeg") != "") { // MP3
  24.                 myAudio.src = target.parentNode.getAttribute('data-src');
  25.             } else if(myAudio.canPlayType && myAudio.canPlayType("audio/ogg") != "") {  // OGG
  26.                 myAudio.src = target.parentNode.getAttribute('data-src2');
  27.             } else {
  28.                 return; // no audio support
  29.             }
  30.             myAudio.play();
  31.             myAudio.onloadeddata = function () {
  32.                 myAudio.currentTime = parseFloat(target.parentNode.getAttribute('data-pos'));
  33.             };
  34.         }

  36.     });
  37.     $(document.body).on('click', '.btnMute',function(e){
  38.         myAudio.muted = !myAudio.muted;
  39.         $('.btnMute').each(function(){
  40.             if (myAudio.muted) {
  41.                 this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Muted</span>";
  42.             } else {
  43.                 this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Audible</span>";
  44.             }
  45.         });
  46.     });
  47. });