Sine Wave The Hard Way

by replicateur

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<div class="growl"></div>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <p>
                <button class="btn btn-default btn-add">Add Graph</button>
                <button class="btn btn-default btn-remove">Remove Graph</button>
            </p>
            <div class="well">
                <div id="chartdiv"></div>
            </div>
        </div>
    </div>
</div>

CSS

#chartdiv {
    width : 100%;
    height : 450px;
    font-size : 11px;
}

* {
    font-size: 11px !important;
    line-height: 1.42857143;
}
#chartdiv {
    min-height: 445px;
}
.container {
    padding-top: 15px;
}
.well {
    margin: 0;
}
/* JUST FOR THE NOTIFICATIONS */
 .growl {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1337;
}
.growl .alert {
    width: 250px;
    opacity: 0.8;
    cursor: pointer;
}

Babel + JSX

const REAL_TIME_FREQUENCY = 440;
const ANGULAR_FREQUENCY = REAL_TIME_FREQUENCY * 2 * Math.PI;

let audioContext = new AudioContext();
let myBuffer = audioContext.createBuffer(1, 88200, 44100);
let myArray = myBuffer.getChannelData(0);
for (let sampleNumber = 0 ; sampleNumber < 88200 ; sampleNumber++) {
  myArray[sampleNumber] = generateSample(sampleNumber);
}

function generateSample(sampleNumber) {
  let currentTime = sampleNumber / 44100;
  let currentAngle = currentTime * ANGULAR_FREQUENCY;
  return generateCurve(currentAngle);
}

function generateCurve(x) {
  return Math.sin(x)**Math.cos(x);
}

let src = audioContext.createBufferSource();
src.buffer = myBuffer;
src.connect(audioContext.destination);
src.start();