Audio Player in JS – Sam’s Blog

Learn to code audio player in JS using HTML & CSS.

Video Part: 1

Video Part: 2

Download | Demo

Source Code:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Custom Audio Player in JS</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<div class="audio-player-cont">
			<div class="logo">
				<img src="images/audio-player.png" />
			</div>
			<div class="player">
				<div id="songTitle" class="song-title">Song title goes here</div>
				<input id="songSlider" class="song-slider" type="range" min="0" step="1" onchange="seekSong()" />
				<div>
					<div id="currentTime" class="current-time">00:00</div>
					<div id="duration" class="duration">00:00</div>
				</div>
				<div class="controllers">
					<img src="images/previous.png" width="30px" onclick="previous();" />
					<img src="images/backward.png" width="30px" onclick="decreasePlaybackRate();" />
					<img src="images/pause.png" width="40px" onclick="playOrPauseSong(this);" />
					<img src="images/forward.png" width="30px" onclick="increasePlaybackRate();" />
					<img src="images/next.png" width="30px" onclick="next();" />
					<img src="images/volume-down.png" width="15px" />
					<input id="volumeSlider" class="volume-slider" type="range" min="0" max="1" step="0.01" 
onchange="adjustVolume()" />
					<img src="images/volume-up.png" width="15px" style="margin-left:2px;" />
				</div>
				<div id="nextSongTitle" class="song-title"><b>Next Song :</b>Next song title goes here...</div>
			</div>
		</div>
		<script type="text/javascript" src="player.js"></script>
	</body>
</html>

CSS

body{
	background: #f1e7e7;
}

.audio-player-cont{
	width: 450px;
	height: 135px;
	background: #f3ebdc;
	box-shadow: 0 0 6px 2px #c7a8a8;
	color: #003ba9;
	font-family: verdana;
	font-size: 12px;

	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
}

.logo{
	float:left;
}

.player{
	float:right;
	margin: 7px;
}

.song-title{
	width: 300px;
	padding: 5px 0px 5px 0px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.song-slider{
	width: 300px;
}

.current-time{
	float:left;
	font-size: 10px;
}

.duration{
	float:right;
	font-size: 10px;
}

.controllers{
	clear: both;
	display: table;
}

.controllers *{
	vertical-align: middle;
	margin-right: 2px;
}

.volume-slider{
	width: 90px;
	margin-left:5px;
}

var songs = ["Don Moen - I Want To Be Where You Are.mp3",
		"don moen - I Want To Know More.mp3",
		"don moen - I want to know you more.mp3",
		"don moen - I Will Bless The Lord.mp3",
		"don moen - I Will Celebrate.mp3",
		"don moen - I Worship You Almighty God.mp3",
		"don moen - I Worship You, Almighty God.mp3",
		"don moen - I'm The God That Healed.mp3",
		"don moen - If You Could See Me Now.mp3",
		"don moen - it is well with my soul.mp3"];

var songTitle = document.getElementById('songTitle');
var songSlider = document.getElementById('songSlider');
var currentTime = document.getElementById('currentTime');
var duration = document.getElementById('duration');
var volumeSlider = document.getElementById('volumeSlider');
var nextSongTitle = document.getElementById('nextSongTitle');

var song = new Audio();
var currentSong = 0;

window.onload = loadSong;

function loadSong () {
	song.src = "songs/" + songs[currentSong];
	songTitle.textContent = (currentSong + 1) + ". " + songs[currentSong];
	nextSongTitle.innerHTML = "<b>Next Song: </b>" + songs[currentSong + 1 % songs.length];
	song.playbackRate = 1;
	song.volume = volumeSlider.value;
	song.play();
	setTimeout(showDuration, 1000);
}

setInterval(updateSongSlider, 1000);

function updateSongSlider () {
	var c = Math.round(song.currentTime);
	songSlider.value = c;
	currentTime.textContent = convertTime(c);
	if(song.ended){
		next();
	}
}

function convertTime (secs) {
	var min = Math.floor(secs/60);
	var sec = secs % 60;
	min = (min < 10) ? "0" + min : min;
	sec = (sec < 10) ? "0" + sec : sec;
	return (min + ":" + sec);
}

function showDuration () {
	var d = Math.floor(song.duration);
	songSlider.setAttribute("max", d);
	duration.textContent = convertTime(d);
}

function playOrPauseSong (img) {
	song.playbackRate = 1;
	if(song.paused){
		song.play();
		img.src = "images/pause.png";
	}else{
		song.pause();
		img.src = "images/play.png";
	}
}

function next(){
	currentSong = currentSong + 1 % songs.length;
	loadSong();
}

function previous () {
	currentSong--;
	currentSong = (currentSong < 0) ? songs.length - 1 : currentSong;
	loadSong();
}

function seekSong () {
	song.currentTime = songSlider.value;
	currentTime.textContent = convertTime(song.currentTime);
}

function adjustVolume () {
	song.volume = volumeSlider.value;
}

function increasePlaybackRate () {
	songs.playbackRate += 0.5;
}

function decreasePlaybackRate () {
	songs.playbackRate -= 0.5;
}

Leave a Reply Cancel reply