A Pen by Michael Zhigulin on CodePen.
Created
November 18, 2019 20:37
-
-
Save alasomlira/8d559c5ad770651b7ae3fa4d11f2bf7d to your computer and use it in GitHub Desktop.
Material Design UI Audio Player
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="player"> | |
<div class="like waves-effect waves-light"> | |
<i class="icon-heart"></i> | |
</div> | |
<div class="mask"></div> | |
<ul class="player-info info-one"> | |
<li>Rock'n'Roll Nerd</li> | |
<li>Tim Minchin</li> | |
<li>5:34</li> | |
</ul> | |
<ul class="player-info info-two"> | |
<li>Rock'n'Roll Nerd</li> | |
<li>Tim Minchin</li> | |
<li><span id="duration"></span><i> / </i>5:34</li> | |
</ul> | |
<div id="play-button" class="unchecked"> | |
<i class="icon icon-play"></i> | |
</div> | |
<div class="control-row"> | |
<div class="waves-animation-one"></div> | |
<div class="waves-animation-two"></div> | |
<div id="pause-button"> | |
<i class="icon"></i> | |
</div> | |
<div class="seek-field"> | |
<input id="audioSeekBar" min="0" max="334" step="1" value="0" type="range" oninput="audioSeekBar()" onchange="this.oninput()"> | |
</div> | |
<div class="volume-icon"> | |
<i class="icon-volume-up"></i> | |
</div> | |
<div class="volume-field"> | |
<input type="range" min="0" max="100" value="100" step="1" oninput="audio.volume = this.value/100" onchange="this.oninput()"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<audio id="audio-player" ontimeupdate="SeekBar()" ondurationchange="CreateSeekBar()" preload="auto" loop> | |
<source src="https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/audio/Tim%20Minchin%20%E2%80%94%20Rock%20n%20Roll%20Nerd.ogg" type="audio/ogg"> | |
<source src="https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/audio/Tim%20Minchin%20%E2%80%94%20Rock%20n%20Roll%20Nerd.mp3" type="audio/mpeg"> | |
</audio> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var audio = document.getElementById("audio-player"); | |
$(document).ready(function() { | |
$("#play-button").click(function() { | |
if ($(this).hasClass("unchecked")) { | |
$(this) | |
.addClass("play-active") | |
.removeClass("play-inactive") | |
.removeClass("unchecked"); | |
$(".info-two") | |
.addClass("info-active"); | |
$("#pause-button") | |
.addClass("scale-animation-active"); | |
$(".waves-animation-one, #pause-button, .seek-field, .volume-icon, .volume-field, .info-two").show(); | |
$(".waves-animation-two").hide(); | |
$("#pause-button") | |
.children('.icon') | |
.addClass("icon-pause") | |
.removeClass("icon-play"); | |
setTimeout(function() { | |
$(".info-one").hide(); | |
}, 400); | |
audio.play(); | |
audio.currentTime = 0; | |
} else { | |
$(this) | |
.removeClass("play-active") | |
.addClass("play-inactive") | |
.addClass("unchecked"); | |
$("#pause-button") | |
.children(".icon") | |
.addClass("icon-pause") | |
.removeClass("icon-play"); | |
$(".info-two") | |
.removeClass("info-active"); | |
$(".waves-animation-one, #pause-button, .seek-field, .volume-icon, .volume-field, .info-two").hide(); | |
$(".waves-animation-two").show(); | |
setTimeout(function() { | |
$(".info-one").show(); | |
}, 150); | |
audio.pause(); | |
audio.currentTime = 0; | |
} | |
}); | |
$("#pause-button").click(function() { | |
$(this).children(".icon") | |
.toggleClass("icon-pause") | |
.toggleClass("icon-play"); | |
if (audio.paused) { | |
audio.play(); | |
} else { | |
audio.pause(); | |
} | |
}); | |
$("#play-button").click(function() { | |
setTimeout(function() { | |
$("#play-button").children(".icon") | |
.toggleClass("icon-play") | |
.toggleClass("icon-cancel"); | |
}, 350); | |
}); | |
$(".like").click(function() { | |
$(".icon-heart").toggleClass("like-active"); | |
}); | |
}); | |
function CreateSeekBar() { | |
var seekbar = document.getElementById("audioSeekBar"); | |
seekbar.min = 0; | |
seekbar.max = audio.duration; | |
seekbar.value = 0; | |
} | |
function EndofAudio() { | |
document.getElementById("audioSeekBar").value = 0; | |
} | |
function audioSeekBar() { | |
var seekbar = document.getElementById("audioSeekBar"); | |
audio.currentTime = seekbar.value; | |
} | |
function SeekBar() { | |
var seekbar = document.getElementById("audioSeekBar"); | |
seekbar.value = audio.currentTime; | |
} | |
audio.addEventListener("timeupdate", function() { | |
var duration = document.getElementById("duration"); | |
var s = parseInt(audio.currentTime % 60); | |
var m = parseInt((audio.currentTime / 60) % 60); | |
duration.innerHTML = m + ':' + s; | |
}, false); | |
Waves.init(); | |
Waves.attach("#play-button", ["waves-button", "waves-float"]); | |
Waves.attach("#pause-button", ["waves-button", "waves-float"]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.5/waves.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: Roboto; | |
background-color: #bbdefb; | |
} | |
.container { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.player { | |
position: relative; | |
background-color: #ffffff; | |
background-image: url("https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/tim_minchin_piano.jpg"); | |
width: 550px; | |
height: 375px; | |
border-radius: 3px; | |
border-bottom: 6px solid #3f51b5; | |
box-shadow: 0 0 20px 3px rgba(0, 0, 0, .5); | |
z-index: 1; | |
&:hover .mask { | |
background-color: rgba(255, 255, 255, .1); | |
transition: all 1s; | |
} | |
& .like { | |
position: absolute; | |
width: 35px; | |
height: 35px; | |
top: 15px; | |
right: 20px; | |
z-index: 15; | |
font-size: 1.5em; | |
vertical-align: middle; | |
line-height: 38px; | |
color: #f2f2f2; | |
border-radius: 50%; | |
text-align: center; | |
cursor: pointer; | |
} | |
& .icon-heart { | |
display: block; | |
} | |
& .mask { | |
width: 100%; | |
height: 100%; | |
background-color: rgba(255, 255, 255, .2); | |
z-index: 2; | |
transition: all 1s; | |
} | |
&-info { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
z-index: 4; | |
list-style: none; | |
color: #262626; | |
transform: scale(1); | |
& li { | |
margin-bottom: 7px; | |
} | |
& li:nth-child(1) { | |
font-size: 1.5em; | |
} | |
& li:nth-child(2) { | |
font-size: 1.2em; | |
} | |
& li:nth-child(3) { | |
font-size: .9em; | |
} | |
} | |
& .info-two { | |
left: auto; | |
right: 4.5%; | |
z-index: 1; | |
color: #f2f2f2; | |
& li:nth-child(2) { | |
float: right; | |
} | |
& li:nth-child(3) { | |
display: inline-block; | |
float: right; | |
clear: both; | |
} | |
} | |
& #play-button { | |
box-sizing: border-box; | |
position: absolute; | |
width: 80px; | |
height: 80px; | |
border-radius: 50%; | |
background-color: #5c6bc0; | |
box-shadow: 0 8px 25px 6px rgba(0, 0, 0, .5); | |
right: 40px; | |
bottom: 90px; | |
z-index: 5; | |
cursor: pointer; | |
transition: all 70ms; | |
border: none; | |
&:hover { | |
width: 70px; | |
height: 70px; | |
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .5); | |
right: 45px; | |
bottom: 95px; | |
transition: all 70ms; | |
} | |
& .icon-play { | |
position: absolute; | |
font-size: 1.5em; | |
left: 52%; | |
top: 50%; | |
transform: translate(-48%, -50%); | |
transition: all 70ms; | |
color: #ffffff; | |
} | |
&:hover .icon-play { | |
font-size: 1.2em; | |
transition: all 70ms; | |
} | |
& .icon-cancel { | |
position: absolute; | |
font-size: 1.6em; | |
left: 50%; | |
top: 49%; | |
transform: translate(-50%, -51%); | |
color: #ffffff; | |
} | |
} | |
} | |
.control-row { | |
position: absolute; | |
bottom: -1px; | |
width: 100%; | |
height: 130px; | |
background-color: #ffffff; | |
overflow: hidden; | |
z-index: 3; | |
& #pause-button { | |
box-sizing: border-box; | |
position: absolute; | |
width: 80px; | |
height: 80px; | |
border-radius: 50%; | |
background-color: #f2f2f2; | |
left: 40px; | |
bottom: 25px; | |
z-index: 5; | |
cursor: pointer; | |
border: none; | |
transform: scale(0); | |
display: none; | |
animation: scale-animation .4s; | |
animation-fill-mode: forwards; | |
animation-delay: .3s; | |
& .icon-pause { | |
position: absolute; | |
font-size: 1.5em; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
transition: all .1s; | |
color: #424242; | |
} | |
& .icon-play { | |
position: absolute; | |
font-size: 1.5em; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
transition: all .1s; | |
color: #424242; | |
} | |
} | |
& .seek-field { | |
bottom: 67px; | |
left: 148px; | |
position: absolute; | |
width: 170px; | |
z-index: 5; | |
transform: scale(0); | |
display: none; | |
animation: scale-animation .4s; | |
animation-fill-mode: forwards; | |
animation-delay: .3s; | |
} | |
& .volume-field { | |
bottom: 67px; | |
right: 127px; | |
position: absolute; | |
width: 50px; | |
z-index: 5; | |
transform: scale(0); | |
display: none; | |
animation: scale-animation .4s; | |
animation-fill-mode: forwards; | |
animation-delay: .3s; | |
} | |
& .volume-icon { | |
width: 20px; | |
height: 20px; | |
position: absolute; | |
border-radius: 50%; | |
bottom: 58px; | |
right: 185px; | |
z-index: 5; | |
font-size: 1.2em; | |
display: none; | |
transform: scale(0); | |
animation: scale-animation .4s; | |
animation-fill-mode: forwards; | |
animation-delay: .3s; | |
& .icon-volume-up { | |
color: #424242; | |
} | |
} | |
} | |
.like-active { | |
color: #ef5350; | |
animation: scale-animation .4s; | |
animation-fill-mode: forwards; | |
} | |
@keyframes scale-animation { | |
0% { | |
transform: scale(0); | |
} | |
50% { | |
transform: scale(1.2); | |
} | |
100% { | |
transform: scale(1); | |
} | |
} | |
.waves-animation-one { | |
position: absolute; | |
width: 80px; | |
height: 80px; | |
border-radius: 50%; | |
background-color: #5c6bc0; | |
z-index: 3; | |
left: 42.5%; | |
bottom: 20%; | |
transform: scale(0); | |
animation: waves-animation-one .25s; | |
animation-fill-mode: forwards; | |
animation-delay: .3s; | |
display: none; | |
} | |
@keyframes waves-animation-one { | |
0% { | |
transform: scale(1); | |
} | |
99% { | |
transform: scale(7.8); | |
} | |
100% { | |
transform: scale(7.8); | |
} | |
} | |
.waves-animation-two { | |
position: absolute; | |
width: 80px; | |
height: 80px; | |
border-radius: 50%; | |
background-color: #5c6bc0; | |
z-index: 3; | |
right: 40px; | |
bottom: 35px; | |
transform: scale(7.8); | |
display: none; | |
animation: waves-animation-two .2s; | |
animation-fill-mode: forwards; | |
} | |
@keyframes waves-animation-two { | |
to { | |
transform: scale(0); | |
} | |
} | |
.info-active { | |
animation: info-active-animation 3s; | |
animation-fill-mode: forwards; | |
animation-delay: .37s; | |
} | |
@keyframes info-active-animation { | |
to { | |
bottom: 56.5%; | |
} | |
} | |
.play-active { | |
animation: play-animation .3s; | |
animation-fill-mode: forwards; | |
} | |
@keyframes play-animation { | |
0% { | |
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | |
} | |
98% { | |
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | |
transform: translate(-200px, 65px); | |
} | |
99% { | |
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | |
transform: translate(-200px, 65px) scale(0); | |
} | |
100% { | |
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | |
transform: translate(0, 65px) scale(1); | |
} | |
} | |
.play-inactive { | |
animation: play-inactive 1s; | |
animation-fill-mode: forwards | |
} | |
@keyframes play-inactive { | |
from { | |
transform: translate(0, 65px); | |
} | |
} | |
input[type="range"] { | |
-webkit-appearance: none; | |
width: 100%; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
input[type="range"]:focus { | |
outline: none; | |
} | |
input[type="range"] + .thumb { | |
display: none; | |
} | |
input[type="range"]::-webkit-slider-runnable-track { | |
width: 100%; | |
height: 3px; | |
cursor: pointer; | |
animate: 0.2s; | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
background: #f2f2f2; | |
border-radius: 0; | |
border: 0px solid #000101; | |
} | |
input[type="range"]::-webkit-slider-thumb { | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
border: 0px solid transparent; | |
height: 18px; | |
width: 18px; | |
border-radius: 50%; | |
background: #009688; | |
cursor: pointer; | |
-webkit-appearance: none; | |
margin-top: -7px; | |
} | |
input[type="range"]:focus::-webkit-slider-runnable-track { | |
background: #f2f2f2; | |
} | |
input[type="range"]::-moz-range-track { | |
width: 100%; | |
height: 3px; | |
cursor: pointer; | |
animate: 0.2s; | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
background: #f2f2f2; | |
border-radius: 0; | |
border: 0px solid #000101; | |
} | |
input[type="range"]::-moz-range-thumb { | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
border: 0px solid transparent; | |
height: 18px; | |
width: 18px; | |
border-radius: 50%; | |
background: #009688; | |
cursor: pointer; | |
} | |
input[type="range"]::-ms-track { | |
width: 100%; | |
height: 3px; | |
cursor: pointer; | |
animate: 0.2s; | |
background: transparent; | |
border-color: transparent; | |
border-width: 39px 0; | |
color: transparent; | |
padding-top: 5px; | |
} | |
input[type="range"]::-ms-fill-lower { | |
background: #f2f2f2; | |
border: 0px solid transparent; | |
border-radius: 0; | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
} | |
input[type="range"]::-ms-fill-upper { | |
background: #f2f2f2; | |
border: 0px solid transparent; | |
border-radius: 0x; | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
} | |
input[type="range"]::-ms-thumb { | |
box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent; | |
border: 0px solid transparent; | |
height: 18px; | |
width: 18px; | |
border-radius: 50%; | |
background: #009688; | |
cursor: pointer; | |
margin-top: 1px; | |
} | |
input[type="range"]::-ms-tooltip { | |
display: none; | |
} | |
input[type="range"]::-ms-ticks { | |
display: none; | |
} | |
input[type="range"]:focus::-ms-fill-lower { | |
background: #f2f2f2; | |
} | |
input[type="range"]:focus::-ms-fill-upper { | |
background: #f2f2f2; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.5/waves.min.css" rel="stylesheet" /> | |
<link href="https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/font/font.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment