//to use on light background
$light: rgba(255,255,255,.5);
$background-light: rgba(255,255,255,.15);
//to use on dark background
$background-dark: rgba(0,0,0,.25);
$dark: rgba(0,0,0,.5);
$base-gutter: 15px;
$img-url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/dark.jpg";
@mixin calc($property, $expression){
#{$property}: -webkit-calc(#{$expression});
#{$property}: -moz-calc(#{$expression});
#{$property}: calc(#{$expression});
}
*, *:before, *:after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body{
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
color: $light;
}
.background{
position: absolute;
background: url($img-url);
background-size: cover;
transform-origin: top left;
z-index: -1;
height: 120%;
width: 120%;
margin: -10%;
filter: blur(10px);
-webkit-filter: blur(10px);
}
a{
text-decoration: none;
color: $light;
}
h1, h2, h3, h4, h5, h6, p{
margin: 0;
padding: 0;
line-height: 1.4em;
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix {
display: inline-block;
&:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
}
.container{
background-color: $background-light;
width: 50%;
margin-left: 25%;
margin-top: 5%;
color: $light;
min-width: 235px;
}
.navbar{
padding: $base-gutter;
.fa{
position: relative;
font-size: 16px;
line-height: 13px;
border-radius: 50%;
border: 2px solid $light;
padding: 10px;
}
.fa-heart-o{
border-color: transparent;
/* border: none;*/
/* margin-top: 5px; */
/* font-size: 24px; */
/* padding-top: 10px; */
}
}
@mixin center(){
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
left:50%;
top:50%;
}
.content{
position: relative;
.album-info{
padding: $base-gutter*2;
text-align: center;
}
.album{
text-align: center;
width: 100%;
height: 200px;
}
}
.player{
padding-bottom: $base-gutter;
position: relative;
.track-time, .track-duration{
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
}
.player-status{
width: 100%;
height: 2px;
position: relative;
background-color: $background-light;
display: inline-block;
.status-progress{
background-color: $light;
height: 2px;
position: relative;
@include calc(max-width, "100% - 12px");
}
.status-pointer{
position: relative;
cursor: pointer;
width: 12px;
height: 12px;
background-color: rgba(255,255,255,.9);
border-radius: 50%;
top: -5px;
left: 100%;
/* @include calc(left, "100% - 12px"); */
/* margin-left: -12px; */
}
}
.player-buttons{
padding: $base-gutter;
text-align: center;
.fa{
padding-left: 10px;
padding-right: 10px;
}
.play-pause{
text-align: center;
}
.fa-pause, .fa-play{
border-radius: 50%;
border: 2px solid $light;
padding: 10px;
width: 40px;
height: 40px;
}
.fa-pause{
display: inline-block;
}
.fa-play{
display: none;
}
}
}
.disco {
cursor: pointer;
position: absolute;
position: relative;
top: 80px;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
.disco-cover,
.disco-vinil {
position: absolute;
width: 100%;
height: 100%;
}
.disco-cover {
background: url($img-url) no-repeat center center;
background-size: cover;
width: 200px;
height: 200px;
border-radius: 4px;
overflow: hidden;
z-index: 10;
transition: transform 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.disco-cover::after,
.disco::before {
content: "";
position: absolute;
}
.disco-vinil {
background: url(https://1.bp.blogspot.com/-I-BB_uhpjcg/T4h7jWphKbI/AAAAAAAAAn4/vuyzfIlMJjA/s1600/Vinyl%20Yellow%20512.png) no-repeat center center;
background-size: 210px 210px;
transform: translate3d(25px, 0px, 0px) rotateZ(0deg);
transition: transform 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
/* .disco-vinil::after {
background: -webkit-radial-gradient(center, ellipse cover, 7(255,255,255,0) 30%, rgba(214,214,214,0.2) 100%), -webkit-linear-gradient(65deg, rgba(255,255,255,0) 50%, rgba(255,190,190,0.5) 100%);
box-shadow: inset 0px 1px 1px rgba(255,255,255,0.3), inset -1px 1px 2px rgba(135,126,125,0.2), inset 0px 0px 2px 30px rgba(55,55,55,0.1), inset 0px 0px 2px 19px rgba(25,25,25,0.1), inset 0px 0px 1px 40px rgba(25,25,25,0.2);
background-size: 190px 190px;
content:"";
border-radius: 100%;
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 190px;
} */
.disco:hover > .disco-vinil {
transform: translate3d(80px, 0px, 0px) rotateZ(40deg);
}
.disco:hover > .disco-cover {
transform: translate3d(-60px, 0px, 0px);
}
.disco-center{
width: 61px;
height: 61px;
position: relative;
top: 70px;
left: 70px;
/* text-align: center; */
border-radius: 50%;
background: url($img-url);
background-size: cover;
&::after{
content: "";
width: 5px;
height: 5px;
background-color: white;
border: 1px solid #e7e7e7;
position: absolute;
left: 28px;
top: 28px;
border-radius: 50%;
}
}
.active-button .fa{
color: rgba(255,255,255,.9);
}
@media (max-width: 680px) {
/* .disco{
zoom: .5;
have a work to do here!!!
} */
}
View Compiled
/*
INSPIRED BY DRIBBLE SHOTS
musics taken from krafta
https://dribbble.com/shots/1478420-Music-app
https://dribbble.com/shots/1249898-Music-Player-Side-Menu
*/
$("#random_track, #repeat_track").click(function(){
$(this).toggleClass("active-button");
})
$(".play-pause").click(function(){
if($(this).hasClass("pause-active")){
$(this).removeClass("pause-active");
$(this).addClass("play-active");
$(".fa-play").css("display","inline-block");
$(".fa-pause").hide();
}else{
$(this).addClass("pause-active");
$(this).removeClass("play-active");
$(".fa-play").hide();
$(".fa-pause").show();
}
});
function secondsToTime(secs){
secs = Math.round(secs);
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var time = "";
if(minutes < 10){
time = "0"+minutes;
}else{
time = minutes;
}
time += ":";
if(seconds < 10){
time += "0"+seconds;
}else{
time += seconds;
}
return time;
}
/*ADDING MAGIC TO THE PLAYER*/
var track_time = -1; //in seconds
var total_time = 409; //in seconds
var play = setInterval(function(){updateTime()}, 1000);
function updateTime(){
track_time++;
//updating timer
$("#track_time").html(secondsToTime(track_time));
//updating status-progress
var progress_width = (100*track_time)/total_time;
$(".status-progress").css("width", progress_width+"%");
//on finish track, go to the next one
if(track_time >= total_time){
audio.pause();
stopPlaying();
if(playing_track < tracks.track.length){
playing_track++;
}
//change track here
playTrack();
}
}
function stopPlaying() {
clearInterval(play);
}
var tracks = {"track":[
{
"trackName" : "Time",
"trackArtist" : "Pink Floyd",
"trackUrl":"https://api.soundcloud.com/tracks/16362406/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231",
"trackImage":"https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/dark.jpg",
"trackDuration":"409"
},
{
"trackName" : "Paranoid",
"trackArtist" : "Black Sabbath",
"trackUrl":"https://api.soundcloud.com/tracks/23256180/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231",
"trackImage":"http://upload.wikimedia.org/wikipedia/en/6/64/Black_Sabbath_-_Paranoid.jpg",
"trackDuration":"173"
},
{
"trackName" : "I Talk to the Wind",
"trackArtist" : "King Crimson",
"trackUrl":"https://api.soundcloud.com/tracks/122200268/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231",
"trackImage":"https://consequenceofsound.files.wordpress.com/2013/09/kingcrimson21st.jpg",
"trackDuration":"367"
},
{
"trackName" : "Ghost of Perdition",
"trackArtist" : "Opeth",
"trackUrl":"https://api.soundcloud.com/tracks/62222301/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231",
"trackImage":"http://www.metalsucks.net/wp-content/uploads/2014/11/Opeth-Ghost-Reveries.jpg",
"trackDuration":"630"
},
]};
var audio = new Audio('https://api.soundcloud.com/tracks/16362406/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231');
audio.play();
$(".play-pause").click(function(){
if($(this).hasClass("play-active")){
audio.pause();
stopPlaying();
}else{
audio.play();
var play = setInterval(function(){updateTime()}, 1000);
}
});
var playing_track = 0; //index of track vector
$(".next-track").click(function(){
if(playing_track < tracks.track.length){
playing_track++;
}
audio.pause();
stopPlaying();
//change track here
playTrack();
});
$(".prev-track").click(function(){
if(playing_track>0){
playing_track--;
}
audio.pause();
stopPlaying();
//change track here
playTrack();
});
function playTrack(){
track_time = -1;
total_time = tracks.track[playing_track].trackDuration;
//updating images
$(".background").css("background","url("+tracks.track[playing_track].trackImage+")");
$(".background").css("background-size","cover");
$(".disco-cover").css("background","url("+tracks.track[playing_track].trackImage+")");
$(".disco-cover").css("background-size","cover");
$(".disco-center").css("background","url("+tracks.track[playing_track].trackImage+")");
$(".disco-center").css("background-size","cover");
//update track info
$("#track_name").html(tracks.track[playing_track].trackName);
$("#track_artist").html(tracks.track[playing_track].trackArtist);
//updating timer
$("#track_time").html("00:00");
$("#track_duration").html(secondsToTime(tracks.track[playing_track].trackDuration));
//updating status-progress
var progress_width = (100*track_time)/total_time;
$(".status-progress").css("width", progress_width+"%");
//play the audio
audio = new Audio(tracks.track[playing_track].trackUrl);
audio.play();
play = setInterval(function(){updateTime()}, 1000);
}