JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Virtual Synth</title>
</head>

<body>

<div class="main">
    
<div class="synth">
    <b>VIRTUAL OSCILLATOR</b> by Benjamin IJ Mintzer
    <br />Plan Dynamique (<i>volume</i>) <input id="amplitude" type="range" min="0" max="1" step=".01" value="0"/>
<br />Plan Harmonique (<i>tone</i>) <input id="timbre" type="range" min="20" max="20000" step=".001" value="0"/>
    <br />Plan Melodique (<i>frequency</i>) <input id="frequency" type="range" min="20" max="20000" step=".01" value="440"/>

</div>





<br />
<div class="about">
<p>Hello World! This is my first attempt at programming in Javascript as well as my first exploration into the new <a href="http://www.w3.org/TR/webaudio/">Web Audio API</a> Webkit. I hope you enjoy this minimal application of the coding, which, for me, was quite complex to attempt. </p>
    <br />
<p><b>Controls</b></p>
<p><i>Plan Dynamique</i>
<br />This controls the amplitude, or volume, of the wave being produced. On load, this gain node is set to 0, so in order to hear anything, adjust this range.
</p>
<br />
<p><i>Plan Harmonique</i>
<br />This controls the tone of the wave produced. This is a highpass filter, which means that it controls the frequency of the pitch's overtones. It is defaulted to 0Hz and can be changed up to 20,000Hz.
<br /><i>PRO TIP 1: Works best in a direct relationship with the frequency. I.e., if you're working with a frequency of 440Hz, it's best to adjust the highpass filter between 20 and 440Hz!
<br />PRO TIP 2: From what I can gather, the undertones are dynamically affected by the frequencies of the overtones! That means, when you raise the overtone frequency, and then quickly lower it back down, the undertones you hear slowly dissipate and leave you with a straight tone. This is super neat, albeit slightly frustrating since the sounds it produces are pretty cool. But that slow fade is pretty awesome. </i>...

JavaScript

var context = new webkitAudioContext(),
    //Source and Nodes
    oscillator = context.createOscillator(),
    gainNode = context.createGainNode(),
    filter = context.createBiquadFilter();

//connect Source and Nodes to speakers
oscillator.connect(filter);
filter.connect(gainNode);
gainNode.connect(context.destination);

//turn oscillator on
oscillator.noteOn(0);

//var attributes
filter.type = 1;
filter.Q.value = 40;
filter.frequency.value = 0;
gainNode.gain.value = 0;
oscillator.frequency.value = 440;

//functions
document.getElementById('amplitude').addEventListener('change', function() {
    gainNode.gain.value = this.value;
});

document.getElementById('timbre').addEventListener('change', function() {
    filter.frequency.value = this.value
        });
    
document.getElementById('frequency').addEventListener('change', function() {
    oscillator.frequency.value = this.value
});