<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/SebL/pen/pcinL?depth=everything&order=popularity&page=34&q=react&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.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'>
<style class="cp-pen-styles">#title {
padding: 1rem !important;
text-align: center !important;
color: black !important;
font-family: sans-serif !important;
font-weight: 100 !important;
margin-bottom: 4rem !important;
}
#title i {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/154694/bg-hive.svg) !important;
background-repeat: no-repeat !important;
width: 3rem !important;
height: 3.5rem !important;
display: inline-block !important;
line-height: 3.5rem !important;
font-size: 2rem !important;
color: white !important;
margin-right: 0.5rem !important;
}
#title h1 {
display: inline-block !important;
margin: 0 auto !important;
font-size: 1.5rem !important;
margin-bottom: 0.5rem !important;
}
#title p {
font-size: 0.9rem !important;
color: #bdc3c7 !important;
}
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;
}
</style></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='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//connect.soundcloud.com/sdk.js'></script>
<script >// 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
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
