JSFiddle - React, Tailwind, and code Playground

by sardistic

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var audioContext = new AudioContext();
var oscillator = audioContext.createOscillator();
oscillator.connect(audioContext.destination);
oscillator.start();

var frequencySlider = document.createElement('input');
frequencySlider.type = 'range';
frequencySlider.min = 20;
frequencySlider.max = 20000;
frequencySlider.value = 440;
frequencySlider.oninput = function() {
  oscillator.frequency.value = frequencySlider.value;
};
document.body.appendChild(frequencySlider);

var waveformSelect = document.createElement('select');
var waveforms = ['sine', 'square', 'sawtooth', 'triangle'];
for (var i = 0; i < waveforms.length; i++) {
  var option = document.createElement('option');
  option.value = waveforms[i];
  option.innerHTML = waveforms[i];
  waveformSelect.appendChild(option);
}
waveformSelect.onchange = function() {
  oscillator.type = waveformSelect.value;
};
document.body.appendChild(waveformSelect);

var volumeSlider = document.createElement('input');
volumeSlider.type = 'range';
volumeSlider.min = 0;
volumeSlider.max = 1;
volumeSlider.step = 0.01;
volumeSlider.value = 0.5;
volumeSlider.oninput = function() {
  oscillator.volume.value = volumeSlider.value;
};
document.body.appendChild(volumeSlider);

var playButton = document.createElement('button');
playButton.innerHTML = 'Play';
playButton.onclick = function() {
  oscillator.start();
};
document.body.appendChild(playButton);

var stopButton = document.createElement('button');
stopButton.innerHTML = 'Stop';
stopButton.onclick = function() {
  oscillator.stop();
};
document.body.appendChild(stopButton);
});
        </script>
    </head>
    <body style="margin: 0;">
        <div style="background-color: black; position: fixed; bottom: 0; width: 100%; height: 20px; padding: 20px; opacity: .85; z-index: 1000;">
            <svg id="Layer_1" data-name="Layer 1" height="40px" width="40px" style="top: -8px;
           ...