SoundCloud Mini player with css record animation

Developer
Sébastien Lombard
Size
5,024 Kb
Views
50,600
  1. SoundCloud Mini player with css record animation Previews
  2. SoundCloud Mini player with css record animation HTML Codes
  3. SoundCloud Mini player with css record animation CSS Codes
  4. SoundCloud Mini player with css record animation JS Codes

How do I make an soundcloud mini player with css record animation?

SoundCloud mini player with css record animation, using SoundCloup API.. What is a soundcloud mini player with css record animation? How do you make a soundcloud mini player with css record animation? This script and codes were developed by Sébastien Lombard on 03 September 2022, Saturday.

SoundCloud Mini player with css record animation Previews
IQ Test

SoundCloud Mini player with css record animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SoundCloud Mini player with css record animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_sebl_p.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="title"> <h1><i class="ion-ios7-musical-notes"></i> SoundCloud Player</h1> <p>Mini player with css record animation, using SoundCloup API.<br /> (hover to see band & track name, and controls)</p><br /> REACT version <a href="https://codepen.io/SebL/details/ZQdbZY/">HERE</a>
</header>
<div id="player" class="closed"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154694/vinyl.png" alt="" id="record"/> <div id="cover"> <img src="http://placekitten.com/g/250/250" width="250" height="250" alt="" id="artwork" /> <div id="trackInfos"> <p class="now">NOW PLAYING</p> <p id="band"></p> <p id="track"></p> <a href="#" id="play" class="ion-ios7-play"></a> </div> </div>
</div>
<p class="streamew"> This is a technic I used for this project:
<a href="https://www.youtube.com/watch?v=p6kfbVDMI-4">STREAMew</a>
</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://connect.soundcloud.com/sdk.js'></script> <script src="js/index.js"></script>
</body>
</html>

SoundCloud Mini player with css record animation - Script Codes CSS Codes

html, body { height: 100%;
}
body { background-image: radial-gradient(ellipse at top, #ffffff, #bdc3c7 80%); font-family: 'Open Sans', sans-serif;
}
#player { transition: all 500ms ease; position: relative; margin: 0 auto; height: 250px;
}
#player #cover { position: absolute; left: 0; top: 0; overflow: hidden; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
}
#player #cover:after { content: ' '; position: absolute; top: 0; left: 0; width: 80%; height: 50%; background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0) 90%); transform: skewX(-45deg); transform-origin: top left;
}
#player #cover img { display: block;
}
#player #record { border-radius: 50%; position: absolute; top: 0; right: 0; width: 250px; height: 250px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
#player #trackInfos { transition: all 500ms ease; box-sizing: border-box; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; padding: 1rem; background-color: rgba(0, 0, 0, 0.8); color: white; opacity: 0;
}
#player #trackInfos:hover { opacity: 1;
}
#player #trackInfos .now { font-size: 0.8rem; color: #7f8c8d; margin-bottom: 0.5rem;
}
#player #trackInfos #band { text-transform: uppercase;
}
#player #trackInfos #track { font-weight: 300; color: #bdc3c7;
}
#player #trackInfos #play { position: absolute; top: calc(50% - 2.5rem); left: 0; display: block; width: 100%; height: 5rem; line-height: 5rem; text-align: center; font-size: 5rem; color: rgba(255, 255, 255, 0.5);
}
.closed { width: 250px;
}
.open { width: 350px;
}
.spinning { -moz-animation: turntable 4s linear infinite; -webkit-animation: turntable 4s linear infinite; animation: turntable 4s linear infinite;
}
@keyframes turntable { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }
}
@-webkit-keyframes turntable { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }
}
@-moz-keyframes turntable { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }
}
@-o-keyframes turntable { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); }
}
.streamew { text-align: center; margin-top: 5rem; color: #7f8c8d;
}
.streamew a { color: #3498db; text-decoration: none;
}

SoundCloud Mini player with css record animation - Script Codes JS Codes

// settings
var clientId = '853fdb79a14a9ed748ec9fe482e859dd';
var trackId = '120912535';
// DOM elements
var artwork = $("#artwork");
var band = $('#band');
var song = $('#track');
// Init SoundCloud JS SDK (dont forget to include the .js SDK)
SC.initialize({ client_id: clientId
});
// Getting SC track infos
SC.get('/tracks/'+trackId, function(track){ // Injecting infos artwork.attr('src', track.artwork_url.replace('-large', '-crop')); // Cover (replacing the default image size "large" with "crop") band.html(track.user.username); // Band Name song.html(track.title); // Song name // Play btn var status = false; // play status $('#play').click(function(e){ e.preventDefault(); if(status == false){ $('#player').addClass('open'); // Opening the player $('#record').addClass('spinning'); // vinyl now spinning $(this).removeClass('ion-ios7-play').addClass('ion-ios7-pause'); // change play btn to pause btn audioPlayer = new Audio(track.uri + '/stream?client_id=' + clientId); // Create audio object with stream url... audioPlayer.play(); // ...and play status = !status; // invert player status } else { $('#player').removeClass('open'); // Closing the player $('#record').removeClass('spinning'); // vinyl stopped spinning $(this).removeClass('ion-ios7-pause').addClass('ion-ios7-play'); // change pause btn to play btn audioPlayer.pause(); // Pause the player status = !status; // invert status } });
});
SoundCloud Mini player with css record animation - Script Codes
SoundCloud Mini player with css record animation - Script Codes
Home Page Home
Developer Sébastien Lombard
Username SebL
Uploaded September 03, 2022
Rating 4.5
Size 5,024 Kb
Views 50,600
Do you need developer help for SoundCloud Mini player with css record animation?

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!

Sébastien Lombard (SebL) Script Codes
Name
NgServerMessages
Bloc hover animation
Super simple CSS custom checkbox
Super quick responsive parametric grid generator with SASS
Perspective modal window
Handles
Responsive grid template editor concept
Simple 2 sides title animation
ES6 Class to get query params in string url or array of string urls
Create amazing love letters 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!