Audio Play Pause and Stop using JavaScript

This tutorial blog to learn how to play pause and stop audio file using JavaScript.

Video tutorial of Audio Play Pause and Stop using JavaScript

This tutorial video to learn how to play pause and stop audio file using JavaScript.

Audio Play Pause and Stop using JavaScript [Source Codes]

This source code can help you to create Audio Play Pause and Stop using JavaScript.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<div>
	<audio id="audio">
		<source src="media/audio.mp3" type="audio/mpeg">
	</audio>

	<button id="playPauseBTN" onclick="playPause()">Play ►</button>
	 
	 
	<button onclick="stop()">Stop ▋</button>
</div>



<script src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	min-height: 100vh;
	background:#000;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

button{
	padding: 10px 25px;
	font-size: 22px;
	line-height: 40px;
	min-width: 150px;
	text-align: center;
	cursor: pointer;
	background: linear-gradient(to right bottom,#273c75,#079992);
	color: #fff;
	border-radius: 5px;
	border:0px;
	height: 60px;
}

JavaScript Code

Copy

var audio = document.getElementById('audio');
var playPauseBTN = document.getElementById('playPauseBTN');
var count = 0;

function playPause(){
	if(count == 0){
		count = 1;
		audio.play();
		playPauseBTN.innerHTML = "Pause ⏸";
	}else{
		count = 0;
		audio.pause();
		playPauseBTN.innerHTML = "Play ►";
	}

}

function stop(){
	playPause()
	audio.pause();
	audio.currentTime = 0;
	playPauseBTN.innerHTML = "Play ►";
}

Audio Play Pause and Stop using JavaScript

Video tutorial of Audio Play Pause and Stop using JavaScript

Audio Play Pause and Stop using JavaScript [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS