vishalkakadiya · May 5, 2021 11:13
diff --git a/audio-sample.html b/audio-sample.html
 <!-- 
 Just replace your audio file's name with `file_example_MP3_700KB.mp3` given in below code.

 Refs:
 - https://stackoverflow.com/questions/29593733/i-want-to-stop-skip-30-seconds-on-audio-in-html
 - https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics
 - https://www.w3schools.com/tags/ref_av_dom.asp
 -->

 <!DOCTYPE html>
 <html>
 <body>

 <h1>The audio element</h1>

 <p>Click on the play button to play a sound:</p>

 <audio controls id="player">
  <source src="file_example_MP3_700KB.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
 </audio>

 <button type="button" onclick="playsong()">Play</button>
    <button type="button" onclick="pausesong()">Pauza</button>
    <button type="button" onclick="stopsong()">Stop</button>
    <button type="button" onclick="forwardAudio()">Skip 30 seconds</button>

 <script>

 	window.onload = function(){

 		var timeForPlayer = 0;
 		
 		var player = document.getElementById( 'player' );

 		console.log( player.duration );

 		player.addEventListener( "timeupdate", function() {

 		  console.log( player.currentTime );	
 		});

 	}


 	function playsong() {
 	    var player = document.getElementById('player');
 	    player.play();
 	}


 	function pausesong() {
 	    var player = document.getElementById('player');
 	    player.pause();
 	}

 	function stopsong() {
 	    var player = document.getElementById('player');
 	    player.pause();
 	    player.currentTime = 0;/**tried also with audio.currentTime here. Didn't worked **/
 	}

 	function forwardAudio() {
 	    var player = document.getElementById('player');
 	    player.currentTime += 3.0; /**tried also with audio.currentTime here. Didn't worked **/

 	}
 </script>

 </body>
 </html>
diff --git a/player-progress-bar.html b/player-progress-bar.html
 <!--

 - https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics
 - https://www.w3schools.com/tags/ref_av_dom.asp

 -->

 <!DOCTYPE html>
 <html>

 <head>

 <style>
 	#controls {
 	   width: 80px;
 	   float: left;
 	}

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

 	#bar {
 	   height: 20px;
 	   background-color: green;
 	   width: 0;
 	}
 </style>

 </head>


 <body>

 <h1>The audio element</h1>


 <audio id="my-audio">
  <source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg">
  <source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg">
  <!-- place fallback here as <audio> supporting browsers will ignore it -->
  <a href="audiofile.mp3">audiofile.mp3</a>
 </audio>

 <div id="controls">
  <span id="loading">loading</span>
  <button id="play" style="display:none">play</button>
  <button id="pause" style="display:none" >pause</button>
 </div>
 <div id="progress">
  <div id="bar"></div>
 </div>

 <script type="text/javascript">
 	
 	window.onload = function(){

   var myAudio = document.getElementById('my-audio');
   var play = document.getElementById('play');
   var pause = document.getElementById('pause');
   var loading = document.getElementById('loading');
   var bar = document.getElementById('bar');

 console.log( myAudio.duration );


   function displayControls() {
      loading.style.display = "none";
      play.style.display = "block";
   }

   // check that the media is ready before displaying the controls
   if (myAudio.paused) {
      displayControls();
   } else {
      // not ready yet - wait for canplay event
      myAudio.addEventListener('canplay', function() {
         displayControls();
      });
   }

   play.addEventListener('click', function() {
      myAudio.play();
      play.style.display = "none";
      pause.style.display = "block";
   });

   pause.addEventListener('click', function() {
      myAudio.pause();
      pause.style.display = "none";
      play.style.display = "block";
   });

   // display progress

   myAudio.addEventListener('timeupdate', function() {



      //sets the percentage
      bar.style.width = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10) + "%";
   });

 }

 </script>

 </body>

 </html>
	<!--
	Just replace your audio file's name with `file_example_MP3_700KB.mp3` given in below code.

	Refs:
	- https://stackoverflow.com/questions/29593733/i-want-to-stop-skip-30-seconds-on-audio-in-html
	- https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics
	- https://www.w3schools.com/tags/ref_av_dom.asp
	-->

	<!DOCTYPE html>
	<html>
	<body>

	<h1>The audio element</h1>

	<p>Click on the play button to play a sound:</p>

	<audio controls id="player">
	<source src="file_example_MP3_700KB.mp3" type="audio/mpeg">
	Your browser does not support the audio element.
	</audio>

	<button type="button" onclick="playsong()">Play</button>
	<button type="button" onclick="pausesong()">Pauza</button>
	<button type="button" onclick="stopsong()">Stop</button>
	<button type="button" onclick="forwardAudio()">Skip 30 seconds</button>

	<script>

	window.onload = function(){

	var timeForPlayer = 0;

	var player = document.getElementById( 'player' );

	console.log( player.duration );

	player.addEventListener( "timeupdate", function() {

	console.log( player.currentTime );
	});

	}


	function playsong() {
	var player = document.getElementById('player');
	player.play();
	}


	function pausesong() {
	var player = document.getElementById('player');
	player.pause();
	}

	function stopsong() {
	var player = document.getElementById('player');
	player.pause();
	player.currentTime = 0;/tried also with audio.currentTime here. Didn't worked /
	}

	function forwardAudio() {
	var player = document.getElementById('player');
	player.currentTime += 3.0; /tried also with audio.currentTime here. Didn't worked /

	}
	</script>

	</body>
	</html>