"soundCloud"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: