JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<div>
  <a class="mute">Mute button</a>
</div>
<!-- 
A simple, typical workflow for web audio would look something like this:

1. Create audio context
2. Inside the context, create sources — such as <audio>, oscillator, stream
3. Create effects nodes, such as reverb, biquad filter, panner, compressor
4. Choose final destination of audio, for example your system speakers
5. Connect the sources up to the effects, and the effects to the destination.
-->

JavaScript

/*Web audio API -- W3C */

// 1. Create audio context
var aCtx = new(AudioContext || webkitAudioContext)();


// 2. Create sources (oscillator)
// and gain node
var oscillator = aCtx.createOscillator();

// 3. Create effects node (gainNode), biquadFilter
var gainNode = aCtx.createGain(); // volume
var filter = aCtx.createBiquadFilter();
filter.type = 5;
filter.frequency.setValueAtTime(100, 0);
// Create initial options for osciallator — int freq (Hz) 
// and for gainNode — volume (cents)
var initFreq = 3000; // Начальная частота
var maxFreq = 6000; // Макс. частота
var initVol = 0.001;
var maxVol = 0.02;

// Set options for the oscillator and gainNode?
oscillator.type = 'SAWTOOTH'; // 'square'
oscillator.frequency.value = initFreq;
oscillator.detune.value = 100;
oscillator.start(0);
gainNode.gain.value = initVol;

// Mute button
var mute = document.querySelector('.mute');
mute.onclick = function() {
  if (mute.getAttribure('data-muted') == 'false') {
    gainNode.disconnect(aCtx.destination);
    mute.setAttribute('data-muted', 'true');
    mute.innerHTML = 'Unmute';
  } else {
    gainNide.connect(aCtx.destination);
    mute.setAttrubute('data-muted', 'false');
    mute.innerHTML = 'Mute';
  };
}



var curX;
var curY;
document.addEventListener('mousemove', function(e) {
  curX = e.pageX;
  curY = e.pageY;
  filter.frequency.setValueAtTime(1000 * e.clientX / window.innerWidth, context.currentTime + .1);
  oscillator.frequency.value = (curX / width) * maxFreq); gainNode.gain.value = (curY / height) * maxVol; canvasDraw();
//context.currentTime + .1);
});



// 4. Choose final destination of audio, (system speakers)

// 5. Connect sources and effects;
// Effects and destination




var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);


function canvasDraw() {
  for (i = 1; i <= 15; i = i + 2) {
    ctx.beginPath();
    ctx.fillStyle = 'rgb(' + 100 + (i * 10) +...