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>
            So this is a description of the website and stuff. Maybe here you'd say a few things, have a few links. Information about something. I dunno.
            <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 sapien. Nullam eget nunc sit amet massa tempus laoreet et id
            felis. Vestibulum nulla lorem, faucibus non auctor vel, cursus vel dolor.
            Proin fringilla ultricies nunc sit amet blandit. Cras mollis aliquet urna,
            vel gravida leo fermentum et.
        </div>
    </div>
</div>

CSS

body {
    font-family:CodeProDemoRegular, sans-serif;
    background:url('http://free-textures.got3d.com/architectural/free-wood-textures/images/free-wood-texture-002.jpg');
}
.container {
    height: 100%;
    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:white;
    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.4);
    margin-bottom:4px;
    margin-left:0px;
}
.menuitem:hover {
    margin-left:0px;
    border-left-style:solid;
    background:rgba(255,  100, 0, 0.6);
    border-left-width:3px;
    padding-left: 6px;
    
}
.mainInfo {
    font-size: 12px;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    text-align:justify;
    text-justify:distribute;
    font-family:MuseoSlab500Regular, sans-serif;
   ...

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(10, 10, 10, 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)";
    });
});