Waveform Generator
About this app
Generate random smooth waveforms and play them as sound
Waveform Generator Waveform Generator Regenerate All Play All
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Waveform Generator</title>
<meta name="description" content="Generate random smooth waveforms and play them as sound">
<meta name="keywords" content="waveform, sound, music">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Waveform Generator</h1>
<button id="regenerate-all-btn">Regenerate All</button>
<button id="play-all-btn">Play All</button>
<hr>
<ul id="waveform-list">
</ul>
</div>
<script type="text/javascript">
var canvasWidth = 300;
var canvasHeight = 150;
var canvasMargin = 20;
function createWaveformCanvas(color) {
var canvas = document.createElement("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.strokeStyle = color;
var step = canvasWidth / 20;
var x = 0;
var y = canvasHeight / 2;
ctx.beginPath();
ctx.moveTo(x, y);
for (var i = 0; i < 19; i++) {
x += step;
y += (Math.random() - 0.5) * canvasHeight / 2;
ctx.lineTo(x, y);
}
ctx.stroke();
return canvas;
}
function addWaveformToList(color) {
var waveformCanvas = createWaveformCanvas(color);
var waveformItem = document.createElement("li");
var regenerateBtn = document.createElement("button");
regenerateBtn.innerText = "Regenerate";
regenerateBtn.onclick = function() {
waveformCanvas.replaceWith(createWaveformCanvas(color));
};
var playBtn = document.createElement("button");
playBtn.innerText = "Play";
playBtn.onclick = function() {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var sampleRate = audioCtx.sampleRate;
var buffer = audioCtx.createBuffer(1, canvasWidth, sampleRate);
var data = buffer.getChannelData(0);
var ctx = waveformCanvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
for (var i = 0; i < canvasWidth; i++) {
var pixelIndex = (Math.floor(canvasHeight / 2) * canvasWidth + i) * 4;
var amplitude = imageData.data[pixelIndex] / 255;
data[i] = amplitude * 2 - 1;
}
var source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
source.start();
};
waveformItem.appendChild(waveformCanvas);
waveformItem.appendChild(regenerateBtn);
waveformItem.appendChild(playBtn);
document.getElementById("waveform-list").appendChild(waveformItem);
}
function regenerateAllWaveforms() {
var waveformItems = document.getElementById("waveform-list").children;
for (var i = 0; i < waveformItems.length; i++) {
var waveformCanvas = waveformItems[i].getElementsByTagName("canvas")[0];
waveformCanvas.replaceWith(createWaveformCanvas(waveformCanvas.getContext("2d").strokeStyle));
}
}
function playAllWaveforms() {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var sampleRate = audioCtx.sampleRate;
var buffer = audioCtx.createBuffer(1, canvasWidth, sampleRate);
var data = buffer.getChannelData(0);
var sources = [];
for (var i = 0; i < 5; i++) {
var waveformCanvas = document.getElementById("waveform-" + i);
var ctx = waveformCanvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
for (var j = 0; j < canvasWidth; j++) {
var pixelIndex = (Math.floor(canvasHeight / 2) * canvasWidth + j) * 4;
var amplitude = imageData.data[pixelIndex] / 255;
data[j] += amplitude * 0.2;
}
var source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
sources.push(source);
}
sources.forEach(function(source) {
source.start();
});
}
$(document).ready(function() {
for (var i = 0; i < 5; i++) {
var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
addWaveformToList(color);
}
document.getElementById("regenerate-all-btn").onclick = regenerateAllWaveforms;
document.getElementById("play-all-btn").onclick = playAllWaveforms;
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!