JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<div class="mute">
  <a class="mutee">Mute</a>
  
</div>
<canvas id="c"></canvas>



<!-- 
typical workflow for web audio:
1.  Создаем аудио контекст
2. С помощью методов контекста создаем источники сигнала: 
* AudioBufferSourceNode - аудио буффер
* MediaElementAudioSourceNode -  <audio> или <video> элемент
* MediaStreamAudioSourceNode - внешний аудиопоток (микрофон)
* oscillator ?
3. Создаем модули эффектов, такие как reverb, biquad filter, panner, compressor
var effectNode = context.createModule();
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.
source.connect(gainNode);
gainNode.connect(destination);
-->

CSS

.mute {

  width: 8em;
  height: 2em;
  color: #555;
  background-color: white;
  font-size: 0.5em;
  border-radius: 2%;
  border: 0 solid lightskyblue;
}

a {
  padding: 2em;
}

a:hover {
  color: skyblue;
  overflow: hidden;
}

JavaScript

/*Web audio API -- W3C */

// ===============================
// Initial options for oscillator (Hz) and for gain (in cents)
var width = 800;
var height = 600;
var initFreq = 3000; // Начальная частота
var maxFreq = 6000; // Макс. частота
var initVol = 0.5;
var maxVol = 1;





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

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

// 3. Create effects nodes (gainNode), biquadFilter -- любые модули Api
// gain — усилитель
var gainNode = aCtx.createGain(); // volume

// Set options for the oscillator and gainNode
oscillator.type = 'sine'; // 'square', 'sawtooth', 'triangle'

oscillator.frequency.value = initFreq;
oscillator.detune.value = 100;
oscillator.start();


gainNode.gain.value = initVol;
// 4. Choose final destination of audio, (system speakers)

// 5.0 Connect sources and effects;
oscillator.connect(gainNode);
// 5.1 Linking sources and destination
gainNode.connect(aCtx.destination);




// Mute button
var mute = document.querySelector('.mute');
mute.onclick = function() {
  if (mute.id == "") {
    gainNode.disconnect(aCtx.destination);
    mute.id = "activated";
    mute.innerHTML = "Unmute";
  } else {
  
    gainNode.connect(aCtx.destination);
    mute.id = "";
    mute.innerHTML = "Mute";
  };
  
  
}


var curX;
var curY;
document.onmousemove = update;

function update(e) {
  curX = (window.Event) ? e.pageX : event.clientX;
 curY = (window.Event) ? e.pageY : event.clientY;
 
  oscillator.frequency.value = (curX / width) * maxFreq;
  gainNode.gain.value = (curY / height) * maxVol;
  canvasDraw();
}


function random(number1, number2) {
  var randomNo = number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
  return randomNo;
}

var canvas = document.getElementById('c'),
  ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
function canvasDraw() {
rX = curX;
rY = curY;
rZ =...