vishalkakadiya/audio-sample.html

## 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>

## 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>