<svg id="svg-source" height="0" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute">
<g id="play" data-iconmelon="Simple Line Icons:e49b2f5bafabafa76435cc0d94743a6f">
<g>
<path d="M28.55,13.351L6.29,0.499c-2.268-1.307-4.568,0.089-4.568,2.64v25.703c0,1.865,1.131,3.16,2.752,3.16
c0.598,0,1.207-0.17,1.811-0.521l22.271-12.855c1.094-0.638,1.723-1.602,1.723-2.642S29.649,13.982,28.55,13.351z M27.23,16.339
L4.971,29.193c-0.283,0.163-0.452,0.176-0.497,0.176l-0.006,0.016c-0.031-0.034-0.113-0.191-0.113-0.543V3.139
c0-0.353,0.082-0.51,0.126-0.528c0.038,0,0.207,0.013,0.496,0.176L27.23,15.642c0.308,0.166,0.396,0.323,0.415,0.332
C27.626,16.015,27.538,16.169,27.23,16.339z"></path>
</g>
</g>
<g id="rewind" data-iconmelon="Simple Line Icons:a918f32e5825f2a2a6a9af867fe6b2f7">
<g>
<path d="M31.016,14.482L18.3,7.139c-1.304-0.743-2.617,0.047-2.617,1.509v6.153
c-0.115-0.105-0.198-0.229-0.346-0.318L2.614,7.139C1.314,6.396,0,7.186,0,8.647v14.691c0,1.066,0.646,1.806,1.576,1.806
c0.341,0,0.689-0.097,1.038-0.298l12.723-7.351c0.147-0.085,0.23-0.212,0.346-0.318v6.161c0,1.066,0.646,1.806,1.572,1.806
c0.345,0,0.693-0.097,1.045-0.298l12.716-7.351C31.645,17.135,32,16.588,32,15.989C32,15.395,31.645,14.85,31.016,14.482z
M14.579,16.192L1.86,23.539c-0.162,0.094-0.259,0.102-0.284,0.102l-0.003,0.009c-0.019-0.021-0.065-0.11-0.065-0.311V8.647
c0-0.201,0.047-0.291,0.068-0.302c0.025,0,0.122,0.008,0.284,0.101l12.719,7.341c0.173,0.1,0.227,0.189,0.237,0.197
C14.806,16.008,14.752,16.096,14.579,16.192z M30.262,16.192l-12.72,7.347c-0.165,0.094-0.258,0.102-0.287,0.102l-0.004,0.009
c-0.014-0.021-0.061-0.11-0.061-0.311V8.647c0-0.201,0.047-0.291,0.064-0.302c0.029,0,0.122,0.008,0.287,0.101l12.72,7.341
c0.173,0.1,0.227,0.189,0.233,0.197C30.488,16.008,30.435,16.096,30.262,16.192z"></path>
</g>
</g>
<g id="pause" data-iconmelon="Dripicons:aa02daadf53a065dad1b35b99db2d7fa">
<g>
<path d="M8.862,0C7.544,0,6.475,1.069,6.475,2.388v27.224C6.475,30.931,7.544,32,8.862,32c1.319,0,2.389-1.069,2.389-2.388V2.388
C11.251,1.069,10.182,0,8.862,0z"></path>
<path d="M23.138,0c-1.319,0-2.389,1.069-2.389,2.388v27.224c0,1.319,1.069,2.388,2.389,2.388c1.318,0,2.388-1.069,2.388-2.388
V2.388C25.525,1.069,24.456,0,23.138,0z"></path>
</g>
</g>
<g id="heart" data-iconmelon="Simple Line Icons:4d8790feb0398dfc768a4d4d14c15dfc">
<g>
<path d="M21.753,0c-2.078,0-4.056,0.617-5.752,1.787C14.324,0.631,12.297,0,10.253,0
C7.554,0,5.019,1.051,3.112,2.959C1.2,4.87,0.146,7.413,0.146,10.115c0,2.705,1.054,5.247,2.94,7.131L16.001,32l12.893-14.727
c3.945-3.946,3.945-10.367,0.002-14.314C26.985,1.051,24.45,0,21.753,0z M28.068,16.499L16.001,30.278L3.913,16.473
c-1.7-1.697-2.636-3.955-2.636-6.357c0-2.4,0.936-4.658,2.636-6.355c1.691-1.696,3.943-2.629,6.34-2.629
c1.969,0,3.84,0.627,5.408,1.807l0.34,0.256l0.342-0.255c1.567-1.181,3.438-1.808,5.41-1.808c2.395,0,4.647,0.933,6.342,2.629
C31.599,7.266,31.599,12.97,28.068,16.499z"></path>
</g>
</g>
<g id="rotate" data-iconmelon="Simple Line Icons:186dfe5a0455715f8ace47e52e370ef8">
<g>
<path d="M30.328,11.192c-0.125-0.373-0.521-0.576-0.898-0.45c-0.373,0.125-0.576,0.527-0.451,0.898
c1.672,5,0.424,10.393-3.256,14.078c-5.368,5.356-14.088,5.365-19.442,0c-0.153-0.152-0.247-0.313-0.386-0.475l4.951,0.002
c0.389,0,0.711-0.318,0.711-0.711c0-0.391-0.322-0.711-0.711-0.711l-6.182-0.002c-0.248-0.206-0.584-0.27-0.852-0.074
c-0.023,0.02-0.023,0.051-0.043,0.074H3.376v7.469C3.376,31.682,3.697,32,4.088,32c0.389,0,0.711-0.318,0.711-0.709v-5.1
c0.16,0.176,0.302,0.361,0.475,0.534C8.229,29.679,12.112,31.16,16,31.16c3.88,0,7.768-1.481,10.729-4.435
C30.789,22.654,32.168,16.703,30.328,11.192z"></path>
<path d="M6.283,6.279c5.361-5.36,14.078-5.36,19.439,0c0.156,0.156,0.247,0.314,0.387,0.479l-4.951-0.005
c-0.391,0-0.709,0.321-0.709,0.714c0,0.389,0.318,0.711,0.709,0.711l6.188,0.002c0.24,0.199,0.572,0.268,0.84,0.074
c0.024-0.02,0.024-0.055,0.049-0.074h0.389V0.711C28.623,0.317,28.309,0,27.912,0C27.521,0,27.2,0.317,27.2,0.711v5.098
c-0.156-0.18-0.298-0.359-0.472-0.535c-5.916-5.916-15.537-5.91-21.448,0C1.211,9.34-0.169,15.295,1.675,20.811
c0.102,0.296,0.376,0.484,0.675,0.484c0.074,0,0.148-0.012,0.223-0.035c0.377-0.125,0.576-0.529,0.451-0.902
C1.35,15.355,2.6,9.964,6.283,6.279z"></path>
</g>
</g>
<g id="speech" data-iconmelon="80 icons pack:a9d60000ca8edcf2afe45876d9cf53f3">
<g>
<g>
<path d="M16,4.652c7.727,0,13.989,4.355,13.989,9.727S23.727,24.104,16,24.104c-0.178,0-0.354-0.005-0.53-0.009
c-1.632,1.26-3.69,2.257-6.027,2.808c-1.298,0.306-2.577,0.442-3.81,0.442c-0.061,0-0.123,0-0.184,0
c1.597-1.282,2.846-2.83,3.65-4.508c-4.232-1.672-7.089-4.833-7.089-8.459C2.011,9.008,8.274,4.652,16,4.652 M16,2.643
c-4.143,0-8.063,1.139-11.04,3.208C1.762,8.075,0,11.104,0,14.379c0,3.7,2.335,7.125,6.227,9.316
c-0.57,0.754-1.257,1.457-2.036,2.082c-0.661,0.531-0.919,1.422-0.641,2.225c0.276,0.803,1.028,1.345,1.878,1.354l0.205,0.001
c1.437,0,2.873-0.167,4.271-0.496c2.28-0.538,4.413-1.482,6.213-2.745c4.1-0.021,7.975-1.159,10.923-3.209
c3.198-2.224,4.96-5.252,4.96-8.527s-1.762-6.305-4.96-8.528C24.063,3.781,20.143,2.643,16,2.643L16,2.643z"></path>
</g>
</g>
</g>
</svg>
<section>
<div class="soundcloud-widget">
<div class="header"><i class="fa fa-soundcloud"></i> </div>
<div class="play-area">
<div class="cover"></div>
<div class="artist"></div>
<div id="plays" class="play">
<div class="firefox-fix-play">
<svg class="play-button" viewBox="0 0 30 30">
<g filter="">
<use xlink:href="#play"></use>
</g>
</svg>
</div>
<div class="firefox-fix-pause">
<svg class="pause-button" viewBox="0 0 30 30">
<g filter="">
<use xlink:href="#pause"></use>
</g>
</svg>
</div>
</div>
<div id="prev" class="previus">
<svg viewBox="0 0 34 34">
<g filter="">
<use xlink:href="#rewind"></use>
</g>
</svg>
</div>
<div id="next" class="next">
<svg viewBox="0 0 34 34">
<g filter="">
<use xlink:href="#rewind"></use>
</g>
</svg>
</div>
<div class="song"></div>
<audio id="audio"></audio>
</div>
<div class="footer">
<ul>
<li>
<div class="icon">
<svg class="play-button" viewBox="0 0 35 35">
<g filter="">
<use xlink:href="#play"></use>
</g>
</svg>
</div>
<span class="plays"></span>
</li>
<li>
<div class="icon">
<svg class="heart-button" viewBox="0 0 35 35">
<g filter="">
<use xlink:href="#heart"></use>
</g>
</svg>
</div>
<span class="likes"></span>
</li>
<li>
<div class="icon">
<svg class="rotate-button" viewBox="0 0 35 35">
<g filter="">
<use xlink:href="#rotate"></use>
</g>
</svg>
</div>
<span class=""></span>
</li>
<li>
<div class="icon">
<svg class="speech-button" viewBox="0 0 35 35">
<g filter="">
<use xlink:href="#speech"></use>
</g>
</svg>
</div>
<span class="comments"></span>
</li>
</ul>
</div>
</div>
</section>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
$orange:#f56c36;
$footerBg:#0f1316;
*, *:after, *:before{
box-sizing:border-box;
}
#play, #rewind,#pause, #heart, #rotate, #speech{
fill: white;
stroke:white;
}
.footer #play:hover{
fill: $orange;
stroke:$orange;
}
section {
position:absolute;
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
overflow:hidden;
background-image:
radial-gradient(
ellipse at bottom,
#4e575e,
#0d0e12 80%
);
}
.soundcloud-widget {
width: 400px;
height: 525px;
margin: 10% auto;
border-radius:25px;
position:relative;
background-image:
radial-gradient(
ellipse ,
#1b1b1b,
#000 60%
);
}
.header {
height:77px;
width: 100%;
background:$orange;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
color:white;
font-size:4.8em;
position:relative;
z-index:1;
}
.footer {
width:100%;
height: 73px;
background: $footerBg;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index:1;
li {
list-style:none;
width:25%;
height:73px;
float:left;
color: #505153;
border-right: 1px solid #14181b;
text-align:center;
font-size: 0.8em;
padding-top:30px;
&:last-child{
border:none;
}
span {
display:inline-block;
vertical-align:middle;
}
}
.icon{
width:12px;
height:12px;
opacity:0.5;
display:inline-block;
vertical-align:middle;
margin-right:5px;
}
}
.play-area {
padding:20px;
.cover {
width: 400px;
height: 525px;
left: 0;
top: 0;
position:absolute;
background-color: black;
background-blend-mode: multiply;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.play {
margin:100px auto 0;
width:84px;
height:84px;
border-radius: 50%;
background:$orange;
cursor:pointer;
position:relative;
z-index:1;
.play-button{
height:35px;
width:30px;
margin:22px 2px 0px 30px;
}
.firefox-fix-pause {display:none;}
.pause-button{
height:35px;
width:30px;
margin:22px 2px 0px 27px;
display:none;
}
}
.previus {
opacity:0.4;
position:absolute;
left:80px;
margin-top:-53px;
cursor:pointer;
width:25px;
height:25px;
transform: rotate(180deg);
}
.next {
opacity:0.4;
position:absolute;
right:80px;
margin-top:-53px;
cursor:pointer;
width:25px;
height:25px;
}
.song {
color:white;
text-align:center;
opacity:0.6;
margin-top:35px;
font-weight: 300;
font-size: 0.85em;
}
.artist {
color:white;
text-align:center;
opacity:0.6;
padding-top: 40px;
font-weight: 300;
font-size: 0.9em;
}
}
/*
This widget it's using a playlist that I made on soundcloud, if you want to use it, you just have to change the client id and the url on the ajax call:
url: "https://api.soundcloud.com/playlists/PLAYLIST-ID.json?client_id=YOUR-ID"
*/
var track, i =0;
var widgetSong = $('.song');
var widgetArtist = $('.artist');
var widgetPlays = $('.footer .plays');
var widgetLikes = $('.likes');
var widgetComments = $('.comments');
SC.initialize({
client_id: "b4a1717a623f21abb173e93aa8eb3592"
});
$.ajax({
url: "https://api.soundcloud.com/playlists/39522163.json?client_id=b4a1717a623f21abb173e93aa8eb3592",
type: 'GET',
dataType: 'json',
contentType: 'application/json',
processData: false,
data: '{"foo":"bar"}',
success: function (data) {
track = data.tracks[i];
totalSongs = data.tracks.length;
tittle = track.title;
artist = track.user.username;
plays = track.playback_count;
likes = track.favoritings_count;
comments = track.comment_count;
widgetSong.html(tittle);
widgetPlays.html(plays);
widgetArtist.html(artist);
widgetLikes.html(likes);
widgetComments.html(comments);
myaudio = new Audio(track.uri + '/stream?client_id=b4a1717a623f21abb173e93aa8eb3592');
console.log(artist);
$('#plays').on('click', function(e){
e.preventDefault();
if($('.pause-button').is(':hidden') || $('.firefox-fix-pause').is(':hidden')){
myaudio.play();
$('.play .play-button, .firefox-fix-play').hide();
$('.play .pause-button, .firefox-fix-pause').show();
} else {
myaudio.pause();
$('.play .play-button, .firefox-fix-play').show();
$('.play .pause-button, .firefox-fix-pause').hide();
}
});
$('#next').on('click',function(e){
e.preventDefault();
myaudio.pause();
if(i < (totalSongs-1)){
i++
track = data.tracks[i];
myaudio = new Audio(track.uri + '/stream?client_id=b4a1717a623f21abb173e93aa8eb3592');
tittle = track.title;
artist = track.user.username;
plays = track.playback_count;
likes = track.favoritings_count;
comments = track.comment_count;
widgetSong.html(tittle);
widgetPlays.html(plays);
widgetArtist.html(artist);
widgetLikes.html(likes);
myaudio.play();
}else {
i=0;
track = data.tracks[i];
myaudio = new Audio(track.uri + '/stream?client_id=b4a1717a623f21abb173e93aa8eb3592');
tittle = track.title;
artist = track.user.username;
plays = track.playback_count;
likes = track.favoritings_count;
comments = track.comment_count;
widgetSong.html(tittle);
widgetPlays.html(plays);
widgetArtist.html(artist);
widgetLikes.html(likes);
widgetComments.html(comments);
myaudio.play();
}
});
$('#prev').on('click',function(e){
e.preventDefault();
myaudio.pause();
if(i > 0){
i--
track = data.tracks[i];
myaudio = new Audio(track.uri + '/stream?client_id=b4a1717a623f21abb173e93aa8eb3592');
tittle = track.title;
artist = track.user.username;
plays = track.playback_count;
likes = track.favoritings_count;
comments = track.comment_count;
widgetSong.html(tittle);
widgetPlays.html(plays);
widgetArtist.html(artist);
widgetLikes.html(likes);
myaudio.play();
}else {
i=0;
track = data.tracks[i];
myaudio = new Audio(track.uri + '/stream?client_id=b4a1717a623f21abb173e93aa8eb3592');
myaudio.play();
}
});
},
error: function(){
console.log('not able to return data');
}
});
