Skip to content

Instantly share code, notes, and snippets.

@vishalkakadiya
Last active May 5, 2021 11:13
Show Gist options
  • Save vishalkakadiya/8169e79dd38174e224268cd53ffe40da to your computer and use it in GitHub Desktop.
Save vishalkakadiya/8169e79dd38174e224268cd53ffe40da to your computer and use it in GitHub Desktop.
Audio(tag) Player - Play/Pause/Restart/Skip Some Seconds
<!--
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>
<!--
- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment