Creating an audio player using html, css and jQuery

Creating an audio player using html, css and jQuery

6 min. read

Take a look at the audio player that we are going to build

Various states of audio player

  1. Ready to play

    Audio player

  2. Ready to play + hover on player

    Audio player

  3. Playing the audio

    Audio player

  4. 1. Playing the audio + hover on playerAudio player

    2. Playing the audio + hover on playerAudio player

Creating directories( folders ) for the application

  1. Create a directory named audioPlayer on your computer.
  2. Create subdirectories named css, js and audioFiles inside your audioPlayer directory.

HTML markup for audio player

<!DOCTYPE html>
<html>

	<head>
		<title>Audio player</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<link rel="stylesheet" href="css/playerSkin.css">
	</head>

	<body>
		<div id="playerCover">
			<div id="player">
				<div id="playPause"><i class="fa fa-play" aria-hidden="true"></i></div>
				<div id="sArea">
					<div id="insTime">00:00</div>
					<div id="sHover"></div>
					<div id="seekBar">
						<div id="seName">Wonder - Hillsong United</div>
					</div>
					<div id="trackName">Wonder - Hillsong United</div>
				</div>

				<div id="aTime">
					<div id="aTm">
						<div id="aPlayed">00:00</div>
						<div id="aTotal">00:00</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/player.js"></script>
	</body>

</html>

Save this html as audioPlayer.html file in audioPlayer directory.

CSS rules

body
{
	margin:0px;
	font-family:Helvetica,arial;
}

#playPause,#sArea,#aTime,#aPlayed,#aTotal
{
	display:table-cell;
	vertical-align:middle;
}

#player,#aTm
{
	display:table;
	width:100%;
}

#playerCover
{
	width:80%;
	margin:0 auto;
	background-color:#e2281a;
	position: fixed;
	top: 50%;
	margin-top: -24px;
	left: 0px;
	right: 0px;
	box-shadow: 0px 0px 10px #adadad;
	border-radius: 4px;
}

#insTime
{
	position: absolute;
	top: -37px;
	padding: 5px 7px;
	font-size: 14px;
	color: #fff;
	background-color: #000;
	border-radius: 4px;
	display:none;
}

#playPause
{
	width:18px;
}

#aTime
{
	width: 100px;
	font-size:14px;
}

#aPlayed
{
	border-right: 1px solid #af111c;
}

#playPause,#aTime
{
	text-align:center;
	color:#fff;
	padding:15px;
}

#sHover
{
	position: absolute;
	top:0px;
	left: 0px;
	height:48px;
	background-color: #fff;
	width: 0px;
	z-index: 3;
	opacity: 0.3;
}

#sArea,#seekBar
{
	position:relative;
}

#sArea
{
	height:48px;
}

#seekBar
{
	width: 0px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	height:18px;
	padding: 15px 0px;
	left: 0px;
	color: #fff;
	z-index: 2;
	background-color: #ce2317;
}

#trackName
{
	padding-left: 15px;
	color: #9a0712;
	z-index: 1;
}

#playPause,#sArea
{
	cursor:pointer;
}

#seName
{
	padding-left:15px;
	white-space: pre;
}

Save this css as playerSkin.css file in css directory.

Javascript code to make audio player functional

$(function()
{
	var audio, playPause = $('#playPause'), sArea = $('#sArea'), seekBar = $('#seekBar'), tProgress = $('#aPlayed'), tTime = $('#aTotal'), sHover = $('#sHover'), seekT, seekLoc, insTime = $('#insTime');
		
	// 1. Function to handle play and pause actions
	function play_pause()
	{
		if(audio.paused)
		{
			audio.play();
			$('#playPause i').attr('class','fa fa-pause');
		}
		else
		{
			audio.pause();
			$('#playPause i').attr('class','fa fa-play');
		}
	}

	// 2. Function to show hover layer ( Hover layer shows play time at the place of hover )
	function showHover(event)
	{
		var seekBarPos = seekBar.offset(); 
		seekT = event.clientX - seekBarPos.left;
		seekLoc = audio.duration * (seekT / sArea.outerWidth());

		sHover.width(seekT);

		var cM = seekLoc / 60;

		var ctMinutes = Math.floor(cM);
		var ctSeconds = Math.floor(seekLoc - ctMinutes * 60);

		if( (ctMinutes < 0) || (ctSeconds < 0) )
			return;

		if(ctMinutes < 10)
			ctMinutes = '0'+ctMinutes;

		if(ctSeconds < 10)
			ctSeconds = '0'+ctSeconds;

		insTime.text(ctMinutes+':'+ctSeconds).css({'left':seekT,'margin-left':'-25px'}).fadeIn(0);
	}
		
	// 3. Function to hide hover layer
	function hideHover()
	{
		sHover.width(0);
		insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0);
	}

	// Add eventListener for playing audio from a particular time interval when there is click on div#sArea element ( Area between play/pause button and timer )
	
	sArea.on('click',function()
	{
		audio.currentTime = seekLoc;
		seekBar.width(seekT);
		hideHover();
	})

	// 4. Function to update the time upto which audio has been played currently
	function updateCurrTime()
	{
		var curMinutes = Math.floor(audio.currentTime / 60);
		var curSeconds = Math.floor(audio.currentTime - curMinutes * 60);

		var durMinutes = Math.floor(audio.duration / 60);
		var durSeconds = Math.floor(audio.duration - durMinutes * 60);

		var playProgress = (audio.currentTime / audio.duration) * 100;

		if(curMinutes < 10)
			curMinutes = '0'+curMinutes;

		if(curSeconds < 10)
			curSeconds = '0'+curSeconds;

		if(durMinutes < 10)
			durMinutes = '0'+durMinutes;

		if(durSeconds < 10)
			durSeconds = '0'+durSeconds;

		// Show the play progress in the player ui
		tProgress.text(curMinutes+':'+curSeconds);

		// Update the total time duration of audio file in the player ui
		tTime.text(durMinutes+':'+durSeconds);

		// Set the seekbar width
		seekBar.width(playProgress+'%');

		// If audio has been played to its full length, then
		// 1. Show the play icon
		// 2. Set the seekbar width to 0
		// 3. Update the play progress to 00:00
		if( playProgress == 100 )
		{
			$('#playPause i').attr('class','fa fa-play');
			seekBar.width(0);
			tProgress.text('00:00');
		}
	}

	// 5. Main function for making the audio player functional
	function initPlayer()
	{
		// Create an audio object
		audio = new Audio();

		// Add the URL of audio source file to be played
		audio.src = 'audioFiles/wonder.mp3';

		// Set looping to false to avoid audio from playing again
		audio.loop = false;

		// Play or pause the audio when there is click on div#playPause element ( play/pause button )
		playPause.on('click',play_pause);

		// When there is hover on div#sArea element, then show the hover layer.
		// div#sArea element => Area between play/pause button and player timer
		sArea.mousemove(function(event){ showHover(event); });

		// When mouse is removed from div#sArea element hide the hover layer
		sArea.mouseout(hideHover);

		// When current played time is updated ( it is updated when audio is playing ), then update the current time text in player UI
		$(audio).on('timeupdate',updateCurrTime);
	}

	// Make the audio player functional
	initPlayer();

})

Save this js as player.js file in js directory.

Setting up audio player

To make above audio player fully functional ...

  1. First, put an audio file in your audioFiles directory.
  2. Update the value after " audioFiles/ " of audio.src in initPlayer function with the name of your audio file with extension. ( eg. wonder.mp3 )
  3. Update the audio file name in div#seName & div#trackName elements in the player ui html.
  4. Open audioPlayer.html file in your web browser, your player is ready to play audio ... just hit the play button :)
Write comments