JSFiddle - React, Tailwind, and code Playground

by Ehsan Ziya

HTML

<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<div class='container' id='container'>
    <h2>SoundCloud Sampler 1.0</h2>
    
    <div class='row' id='url'>
        <input class="col-md-12 input" type="text" placeholder="Paste SoundCloud URL and press Enter"/>
    </div>
    
    <div class='row'>
        <canvas id='canvas'></canvas>
        <div id='slider'></div>
    </div>
    <div class='row' id='envelope'>
        <h3 class='name'>Envelope</h3>
        <hr/>
        <div id='attack' class='adsr'>
            <div class='textlabel'>Attack</div>
        </div>
        <div id='decay' class='adsr'>
            <div class='textlabel'>Decay</div>
        </div>
        <div id='sustain' class='adsr'>
            <div class='textlabel'>Sustain</div>
        </div>
        <div id='release' class='adsr'>
            <div class='textlabel'>Release</div>
        </div>
        <h3 class='name' id='mastername'>Master</h3> 
        <hr id='hr2'/>
        <div id='reverb' class='adsr'>
            <div class='textlabel'>Reverb</div>
        </div>
        <div id='mastergain' class='adsr'>
            <div class='textlabel'>Master</div>
        </div>
        
        <div id='radio'>
          <div id='text'>Loop Mode<div>  
            <input type="radio" id="radio1" name="radio"/><label for="radio1">ON</label>
            <input type="radio" id="radio2" name="radio" checked="checked"/><label for="radio2">OFF</label>
        </div>
              
    </div>
    
</div>

CSS

body {
    background: #EEEEEE;
}
#url {
    text-align:center;
}
#container {
    text-align:center;
    width:700px;
}
.input {
    outline: 0;
    border: 0;
    width: 700px;
    height: 25px;
    padding: 20px;
    font-size: 12px;
    background: #FFFFFF;
}
#canvas {
    width: 700px;
    height: 100px;
    margin-top: 10px;
    background: #FFFFFF;
}
#slider {
    width: 700px;
    text-align:center;
    position: absolute;
    top:116px;
}
#envelope {
    background: #FFFFFF;
    width: 700px;
    height: 207px;
    margin-top: 5px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
}
#master {
    background: #FFFFFF;
    width: 390px;
    margin-top: -55px;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-left: 290px;
    height: 212px;
}

.adsr {
    background: #36393D;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 50px;
}
.ui-slider .ui-slider-handle {
    background: #FF7400;
}
.textlabel {
    margin-top: -20px;
    margin-left: -12px;
    font-size: 11px;
}
.name {
    text-align: left;
    margin-top: -10px;
    margin-bottom: -10px;
    font-size: 15px;
}
hr {
    width: 320px;
    margin-left:0px;
}
#hr2 {
    width: 280px;
    margin-left: 380px;
}

#mastername {
    margin-top: -46px;
    margin-left: 380px;
}
#radio{
    margin-left: 560px;
    margin-top: 120px;
}

#radio .ui-button{
    width: 50px;
    height: 20px;
    
    
}

#radio .ui-button-text{
    color: #FF7400;
    font-size: 12px;
    margin-top:-4px;
}
#text{
    font-size: 11px;
    width: 100px;
}

JavaScript

var context = new webkitAudioContext();

//LOADER FUNCTION
function Loader(source, successcallback) {
    var that = this;
    that.source = source;
    that.isLoaded = false;
    this.buffer = null;

    var request = new XMLHttpRequest();
    request.open('GET', source, true);
    request.responseType = "arraybuffer";

    request.onload = function () {
        context.decodeAudioData(request.response, function (e) {
            that.buffer = e;
            that.isLoaded = true;
            successcallback();

        });
    };
    request.send();
}

//DRAW FUNCTION
function drawBuffer(width, height, context, buffer) {
    var data = buffer.getChannelData(0);
    var step = Math.ceil(data.length / width);
    var amp = height / 2;
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);
    context.fillStyle = '#FF7400';
    for (var i = 0; i < width; i++) {
        var min = 1.0;
        var max = -1.0;
        for (j = 0; j < step; j++) {
            var datum = data[(i * step) + j];
            if (datum < min) min = datum;
            if (datum > max) max = datum;
        }
        context.fillRect(i, (1 + min) * amp, 1, Math.max(1, (max - min) * amp));
    }
}

//getting canvas context
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//loading the file and drawing
var url = 'https://dl.dropboxusercontent.com/u/141488253/ZQNCR.mp3';
var file = new Loader(url, function () {
    drawBuffer(canvas.width, canvas.height, ctx, file.buffer);

});

// range slider
$('#slider').slider({
    range: true,
    min: 0,
    max: 700,
    values: [0, 700]
}).css({
    'border': '0px',
        'border-radius': '0',
        'outline-color': 'transparent'
});
$("#slider .ui-slider-range").css({
    'background': '#FFFFFF',
        'border': '0px',
        'opacity': '0'
});
$("#slider .ui-slider-handle").css({
    'width': '2px',
        'height': '102px',
        'margin-left': '0px',
        'border': '1.5px solid...