HTML5 Audio Player

Developer
Arsen Zbidniakov
Size
5,934 Kb
Views
42,504
  1. HTML5 Audio Player Previews
  2. HTML5 Audio Player HTML Codes
  3. HTML5 Audio Player CSS Codes
  4. HTML5 Audio Player JS Codes

How do I make an html5 audio player?

Circular music player on HTML5 and CSS3. Features: - Canvas progress bar. - Full width album cover. - Lyrics support. - Playlist on backside. - 3D animation. - Responsive design.. What is a html5 audio player? How do you make a html5 audio player? This script and codes were developed by Arsen Zbidniakov on 12 October 2022, Wednesday.

HTML5 Audio Player Previews
IQ Test

HTML5 Audio Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Audio Player</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container">	<label class="to-back-label" for="to-back"><i class="fa fa-bars fa-lg"></i></label>	<input type="checkbox" id="to-back"><!-- playlist toggle -->	<canvas id="progress" width="320" height="320"></canvas><!-- progress bar -->	<div id="player">	<audio id="audio" controls>	<source src="http://storage-new.newjamendo.com/download/track/705190/mp32/Abi_-_Abitude.mp3" type="audio/mpeg" codecs="mp3"></source>	</audio>	<img src="http://imgjam1.jamendo.com/albums/s82/82250/covers/1.300.jpg"><!-- album cover -->	<label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg"></i></label>	<input type="checkbox" id="to-lyrics"><!-- lyrics toggle -->	<div class="cover">	<div class="controls">	<button id="backward" title="Backward"><i class="fa fa-retweet fa-lg"></i></button>	<button id="backward" title="Backward"><i class="fa fa-backward fa-2x"></i></button>	<button id="play-pause" title="Play" onclick="togglePlayPause()"><i class="fa fa-play fa-3x"></i></button>	<button id="forward" title="Forward"><i class="fa fa-forward fa-2x"></i></button>	<button id="backward" title="Backward"><i class="fa fa-random fa-lg"></i></button>	<input id="volume" name="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />	</div><!-- #controls -->	<div class="info">	<p class="song"><a href="http://www.jamendo.com/en/track/705190/abitude" target="_blank">Abitude</a></p>	<p class="author"><a href="http://www.jamendo.com/en/artist/365579/abi" target="_blank">Abi</a></p>	</div><!-- #info -->	<div class="lyrics">	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>	<p>Donec vulputate nec leo vel tincidunt.</p>	<p>Pellentesque urna massa, volutpat eu viverra in, dignissim in diam.</p>	<p>Nullam laoreet aliquet pellentesque.</p>	<p>Duis varius augue eu sem fringilla dignissim.</p>	<p>Cras ligula erat, suscipit ac arcu vel, consectetur mollis nulla.</p>	<p>Pellentesque aliquam tortor in mollis pharetra.</p>	<p>Vestibulum consequat lacinia blandit.</p>	<p>Sed sodales semper nibh pulvinar viverra.</p>	<p>Pellentesque id magna ipsum. In hac habitasse platea dictumst.</p>	<p>Aliquam lorem lectus, consequat eget fermentum eget, posuere vel dolor.</p>	<p>Sed vel tellus gravida, bibendum lacus at, convallis est.</p>	<p>Duis cursus purus a ligula gravida pulvinar.</p>	<p>Vivamus vitae sem aliquet, interdum orci id, viverra dui.</p>	<p>Etiam at laoreet justo, eget congue neque.</p>	<p>Morbi tempor semper sem malesuada iaculis.</p>	<p>Aenean condimentum massa sit amet venenatis ultricies.</p>	<p>Fusce urna justo, interdum at purus sit amet, sagittis tristique orci.</p>	<p>Nunc nibh tellus, pretium at diam sit amet, vestibulum tincidunt mauris.</p>	<p>Curabitur in augue et nisi adipiscing ultrices.</p>	<p>Proin cursus in quam in ullamcorper.</p>	<p>Mauris laoreet sodales magna a mollis.</p>	<p>Maecenas elementum porttitor dolor nec auctor.</p>	<p>Praesent dignissim elit et turpis facilisis, ut sagittis metus congue.</p>	<p>Curabitur quis augue pulvinar, condimentum ante et, sollicitudin justo.</p>	<p>Ut interdum ut erat nec egestas.</p>	<p>Ut a lectus a justo euismod sodales.</p>	</div><!-- #lyrics -->	<p class="scroll">scroll down</p>	</div><!-- #cover -->	</div><!-- #player -->	<div id="flip-back">	<ul class="playlist">	<h3>The AbiStory</h3>	<li><a href="#">1. Attitude ghetto feat Double Conscience et Métice 54</a></li>	<li><a href="#">2. The AbiStory</a></li>	<li><a href="#" style="color:#26C5CB;"><i class="fa fa-play" style="margin-right:4px;"></i> 3. Abitude</a></li>	<li><a href="#">4. Mon Rap Hashdivy Et Ambdi "Nocredi"</a></li>	<li><a href="#">5. Tel Est Mon Destin</a></li>	<li><a href="#">6. Celle Qe J'aime Feat Jiji Et Syle</a></li>	<li><a href="#">7. Pardonne Moi Feat Sarah</a></li>	<li><a href="#">8. Wamaoré Feat Tsutsumbi Remix</a></li>	<li><a href="#">9. Comment je m'appelle feat Youssa Gangsta</a></li>	<li><a href="#">10. Pour les mecs du bitumes feat Jiiji et Ambdi "Nocredi"</a></li>	</ul>	</div><!-- #flip-back -->
</div><!-- #container -->
<div class="credits">	<p>MUSIC — "<a href="http://www.jamendo.com/en/track/705190/abitude" target="_blank">Abitude</a>" by <a href="http://www.jamendo.com/en/artist/365579/abi" target="_blank">Abi</a> is licensed under <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a></p>
</div><!-- #credits --> <script src="js/index.js"></script>
</body>
</html>

HTML5 Audio Player - Script Codes CSS Codes

/* Font Awesome */
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
/* Roboto Condensed */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
/* Basic */
*, *:before, *:after { box-sizing: border-box; }
body { margin: 0; min-height: 100%; background: #EEE; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }
a { color: #FFF; text-decoration: none; }
a:hover { color: #26C5CB; }
p { margin: 0; }
.credits { position: absolute; left: 20px; bottom: 20px; color: #ccc; font-size: 14px; }
.credits a { color: #26C5CB; }
/* Centering */
#container, #progress, #player, #flip-back, .cover, .playlist { position: absolute; margin: auto; top: 0; left: 0; right: 0;	bottom: 0;
}
#container { width: 320px; height: 320px; perspective: 550px; -webkit-perspective: 550px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
}
#player {	width: 300px; height: 300px; background: #fff;	border-radius: 50%; overflow: hidden; box-shadow: 2px 2px 20px 0 rgba(0,0,0,.3); z-index: 300;
}
#progress { width: 320px; height: 320px; z-index: 200; transform: rotate(147deg); -webkit-transform: rotate(147deg); filter: blur(1px); -webkit-filter: blur(1px); transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
}
#flip-back { width: 300px; height: 300px; background: #4D4D4D; border: 4px solid #AEAEAE; border-radius: 50%; overflow: hidden; box-shadow: inset 0 -10px 10px -5px rgba(0,0,0,.3), 2px 2px 20px 0 rgba(0,0,0,.3); /* inner + outer */ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);
}
/* Album Cover */
img {	width: 100%; height: 100%; background: #fff; opacity: .75; transition: .3s all ease-in-out; -webkit-transition: .3s all ease-in-out;
}
/* Fade */
#container:hover .cover,
#container:hover .to-lyrics-label,
#container:hover .to-back-label { opacity: .9;
}
.cover,
.to-lyrics-label,
.to-back-label { opacity: .3; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;
}
/* Player Buttons */
.controls { position: relative; width: 100%; color: #fff; text-align: center;
}
button { margin: 10px; color: #fff; background: transparent; border: 0; outline: 0; cursor: pointer; text-align: center; text-shadow: 1px 1px 3px #000; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;
}
button:hover { color: #26C5CB;
}
#play-pause { width: 46px; height: 46px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;	}
/* Song Info */
.info {	position: relative; margin-top: 28px; bottom: 10px; color: #fff; text-align: center; text-shadow: 1px 1px 3px #000;
}
.song { font-size: 18px;
}
.author { font-size: 14px; margin-bottom: -8px;
}
/* ... */
.song,
.author,
.playlist a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Volume */
input[type='range'] { display: block; margin: 14px auto; width: 80px; height: 2px; outline: 0; cursor: pointer; box-shadow: 1px 1px 3px 0 #000; -webkit-appearance: none !important;
}
input[type='range']::-webkit-slider-thumb { background: #AEAEAE; height: 6px; width: 6px; border-radius: 50%; transition: .1s all linear; -webkit-transition: .1s all linear; -webkit-appearance: none !important;
}
input[type='range']:hover::-webkit-slider-thumb {	background: #26C5CB; -webkit-transform:scale(2);
}
/* Checkboxes */
input[type=checkbox] {	position: absolute; top: -9999px; left: -9999px;
}
label { text-shadow: 1px 1px 3px #000;
}
.to-back-label:hover,
.to-lyrics-label:hover { color: #26C5CB;
}
label:active,
label:focus { top: 0; opacity: 0;
}
label.to-back-label { position: absolute; top: 20px; left: 50%; width: 30px; height: 30px; margin-left: -15px; color: #fff; text-align: center; cursor: pointer; z-index: 500;
}
label.to-lyrics-label { position: absolute; top: 276px; left: 50%; width: 20px; height: 20px; margin-left: -5px; color: #fff; cursor: pointer; z-index: 500;
}
/* Flip Back */
#player, #flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s ease-in-out; -webkit-transition: -webkit-transform .5s ease-in-out;
}
#to-back:checked ~ #flip-back { z-index: 400; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
}
#to-back:checked ~ #player { z-index: -1; transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
#to-back:checked ~ #progress { opacity: 0; transform: rotate(0); -webkit-transform: rotate(0);
}
#to-back:checked ~ #flip-back .playlist { transform: translateY(0); -webkit-transform: translateY(0);
}
/* Lyrics */
.lyrics { position: relative; width: 100%; height: 96px; margin-top: 30px; padding: 4px 24px; color: #000; background: rgba(255,255,255,.3); font-size: 12px; text-align: center; overflow-y: scroll; box-shadow: inset 0 -3px 5px 0 rgba(0,0,0,.5);	transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
}
.lyrics:hover {	background: rgba(255,255,255,.8);
}
.lyrics::-webkit-scrollbar { display: none;
}
.scroll { color: #fff; text-align: center; font-size: 9px; font-weight: bold; text-shadow: 1px 1px 3px #000;
}
.cover { padding-top: 130px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;
}
#to-lyrics:checked ~ .cover { padding-top: 40px;
}
#to-lyrics:checked ~ .cover .lyrics { margin-top: 0px;
}
#to-lyrics:checked ~ .cover button { margin: 4px;
}
/* Playlist */
.playlist {	margin-top: 20px; padding: 14px 20px; font-size: 12px; text-align: center; list-style: none; overflow-y: auto; z-index: 9999; transform: translateY(300px); -webkit-transform: translateY(300px); transition: transform .5s ease-in-out .3s; -webkit-transition: -webkit-transform .5s ease-in-out .3s;
}
.playlist h3 { color: #aeaeae;
}
.playlist li { display: block; padding: 4px 0; color: #AEAEAE; cursor: pointer; text-decoration: none;
}
.playlist li:hover { color: #26C5CB;
}
.playlist li:nth-child(1) { padding: 0 24px;
}
.playlist::-webkit-scrollbar { display: none;
}
/* Media Queries */
@media all and (max-width: 768px) { #container, #player { width: 150px; height: 150px;} #progress { width: 160px; height: 160px; margin-top: -5px; margin-left: -5px; } label, .lyrics, .scroll { display: none; } .cover { padding-top: 46px; } button { margin: 4px; } button:first-of-type, button:last-of-type { display: none; } input[type='range'] { display: block; margin-top: -76px; height: 1px; } .info { margin-top: 70px; } .song { font-size: 12px; } .author { font-size: 10px; }
}

HTML5 Audio Player - Script Codes JS Codes

/*
DONE:
- play/pause;
- volume;
- progress bar.
TODO:
- backward/forward;
- repeat/shuffle;
- lyrics;
- playlist.
*/
var audio = document.getElementById('audio');
var progress = document.getElementById('progress');
var playpause = document.getElementById("play-pause");
var volume = document.getElementById("volume");
audio.controls = false;
audio.addEventListener('timeupdate', function() {	updateProgress();
}, false);
function togglePlayPause() { if (audio.paused || audio.ended) { playpause.title = "Pause"; playpause.innerHTML = '<i class="fa fa-pause fa-3x"></i>'; audio.play(); } else { playpause.title = "Play"; playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>'; audio.pause(); }
}
function setVolume() { audio.volume = volume.value;
}
function updateProgress() {	var percent = Math.floor((100 / audio.duration) * audio.currentTime);	progress.value = percent;	var canvas = document.getElementById('progress');	var context = canvas.getContext('2d');	var centerX = canvas.width / 2;	var centerY = canvas.height / 2;	var radius = 150;	var circ = Math.PI * 2;	var quart = Math.PI / 2;	var cpercent = percent / 100; /* current percent */	context.beginPath();	context.arc(centerX, centerY, radius, 0, ((circ) * cpercent), false);	context.lineWidth = 10;	context.strokeStyle = '#26C5CB';	context.stroke();	if (audio.ended) resetPlayer();
}
function resetPlayer() { audio.currentTime = 0; context.clearRect(0,0,canvas.width,canvas.height); playpause.title = "Play"; playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
}
// thx to: http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html
HTML5 Audio Player - Script Codes
HTML5 Audio Player - Script Codes
Home Page Home
Developer Arsen Zbidniakov
Username ARS
Uploaded October 12, 2022
Rating 4.5
Size 5,934 Kb
Views 42,504
Do you need developer help for HTML5 Audio Player?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arsen Zbidniakov (ARS) Script Codes
Name
Apple Devices Mockup
ELEKS Digital Production
Pastel Loader
Infinity Morph
Understanding CSS clip
Long Shadows for Font Awesome
IPhone lockscreen
GSAP Text Animation
Shattering Text Animation
Page Transition Loader
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!