Soundcloud Player

by Will Stott

HTML

<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="http://will-s.nn.pe/resources/waveform.js"></script>
<link rel="stylesheet" href="http://will-s.nn.pe/resources/web%20fonts/museoslab_500_macroman/stylesheet.css">
<link rel="stylesheet" href="http://will-s.nn.pe/resources/web%20fonts/codepro_regulardemo_macroman/stylesheet.css">
<div class="container">
    <div id="left-section">
        <div id="waveform_container">
            <div id="title">Will Stott</div>
            <div id='waveform_generated'></div>
        </div>
        <div id="artwork">
            <div id="playbtn" onmousedown="window.streamRef.play();">
            </div>
        </div>
    </div>
    <div id="right-section">
        <div class="menu">
            <div class="menuitem">Home</div>
            <div class="menuitem">What's On</div>
            <div class="menuitem">Watch/Listen</div>
            <div class="menuitem">Contact</div>
        </div>
        <div class="sq_btn">
        
        </div>
        <div class="mainInfo">
            <div class="indent"></div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim
            massa vel enim varius vel tincidunt elit pellentesque. Nam suscipit rutrum
            feugiat. Integer commodo faucibus neque, nec dapibus nunc semper quis.
            Duis ornare neque vitae mi congue ornare. Proin at nisl in dolor molestie
            tincidunt. Vestibulum at felis sit amet lacus viverra scelerisque. Praesent
            vel tortor et sem tempus luctus. Donec pulvinar elit a purus congue volutpat.
            Duis adipiscing scelerisque arcu, quis posuere nisl pretium quis. Aenean
            dui velit, lacinia eu cursus eu, placerat ut mauris.
            <br /><br /><div class="indent"></div>
            Suspendisse massa augue, consectetur nec aliquet sit amet, ultricies vel
            mi. Quisque sed condimentum elit. Nam non neque quam. Pellentesque sed
            fringilla...

CSS

body {
    font-family:CodeProDemoRegular, sans-serif;
}
.container {
    height: 500px;
    /*background:grey;*/
    display:block;
    width:800px;
    margin-left: auto;
    margin-right: auto;
}
canvas {
    z-index:2;
    position:relative;
}
#artwork {
    display:block;
    width: 300px;
    height: 300px;
    background-size: 100%;
}
#waveform_container {
    display:block;
    width: 300px;
    height: 55px;
}
#waveform_generated {
    display:block;
    float:left;
    width: 300px;
    height: 40px;
    margin-top:-15px;
    position:relative;
}
#title {
    position:relative;
    font-family:MuseoSlab500Regular, sans-serif;
    float:left;
    height:50px;
    width:300px;
    font-size:50px;
    text-align:left;
    color:black;
    z-index:3;
}
#left-section {
    display:inline-block;
    vertical-align:top;
    height:500px;
    width: 300px;
    padding-top:-40px;
}
#right-section {
    display:inline-block;
    vertical-align:top;
    height: 500px;
    width: 400px;
    /*background: red;*/
}
.menu {
        display:inline-block;
    vertical-align:top;
    padding-top: 19px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    width:312px;
    cursor:pointer;
    /*background:black;*/
}
.menuitem {
    width:145px;
    height:27px;
    display:inline-block;
    vertical-align:middle;
    padding-left: 7px;
    padding-top:10px;
    border-left-style:solid;
    border-left-width:2px;
    background:rgba(255,  100, 0, 0.8);
    margin-bottom:4px;
    margin-left:0px;
}
.menuitem:hover {
    margin-left:0px;
    border-left-style:solid;
    border-left-width:3px;
    padding-left: 6px;
    
}
.mainInfo {
    font-size: 12px;
    padding-left: 5px;
    padding-top: 5px;
    text-align:justify;
    text-justify:distribute;
    font-family:MuseoSlab500Regular, sans-serif;
}
.indent {
    display:inline-block;
    vertical-align:top;
    width:20px;
}
#playbtn {
    width:300px;
    height:300px;
   ...

JavaScript

var trackPermalink = "tracks/dopadoopydoopa-wav";
window.streamRef;

//GETTING WAVEFORM
$.getJSON('http://api.soundcloud.com/' + trackPermalink + '.json?client_id=02279ab1b6ec248aa05fd3f900e3b46f', function (data) {
    var art = data.artwork_url;
    art = art.replace("large", "original");
    document.getElementById("artwork").style.backgroundImage = 'url(' + art + ')';
    //console.log(data);
});

//INITIALIZING SOUNDCLOUD API
SC.initialize({
    client_id: "02279ab1b6ec248aa05fd3f900e3b46f",
});

//LOADING TRACK
SC.get("/" + trackPermalink, function (track) {
    var waveform = new Waveform({
        container: document.getElementById("waveform_generated"),
        innerColor: "rgba(25,25,25,0.8)"
    });

    waveform.dataFromSoundCloudTrack(track);
    var streamOptions = waveform.optionsForSyncedStream({
        defaultColor: "rgba(25,25,25,0.8)",
        loadedColor: "rgba(50, 50, 50, 0.8)",
        playedColor: "rgba(255,  100, 0, 0.8)"
    });
    console.log(streamOptions.whileplaying.fn);
    SC.stream(track.uri, streamOptions, function (stream) {
        window.streamRef = stream;

        window.streamRef.setVolume(0);
        //streamRef.play();
        waveform.innerColor = "rgba(255,51,51,0.515)";
    });
});