Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <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 and play smooth waveforms that sound like music"> <meta name="keywords" content="waveform, generator, music, sound, canvas"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script type="text/javascript"> var localStoragePrefix = "ct-168115994763978"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> const numWaveforms = 5; const canvasWidth = 300; const canvasHeight = 100; const audioContext = new AudioContext(); const waveforms = []; function randomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function drawWaveform(canvas, color) { const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvasWidth, canvasHeight); const numPoints = 50; const step = canvasWidth / numPoints; const centerY = canvasHeight / 2; ctx.beginPath(); ctx.moveTo(0, centerY); ctx.strokeStyle = color; ctx.lineWidth = 2; for (let i = 0; i < numPoints; i++) { const x = i * step; const y = centerY + Math.sin(i / 5) * (Math.random() * centerY / 2); ctx.lineTo(x, y); } ctx.stroke(); } function regenerateWaveform(index) { const canvas = waveforms[index].canvas; const color = randomColor(); drawWaveform(canvas, color); waveforms[index].color = color; } function regenerateAllWaveforms() { for (let i = 0; i < numWaveforms; i++) { regenerateWaveform(i); } } function playWaveform(index) { const canvas = waveforms[index].canvas; const color = waveforms[index].color; const ctx = canvas.getContext('2d'); const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight); const data = imageData.data; const gainNode = audioContext.createGain(); gainNode.gain.value = 0.1; gainNode.connect(audioContext.destination); const oscillator = audioContext.createOscillator(); oscillator.type = 'sine'; const waveArray = new Float32Array(canvasWidth); for (let x = 0; x < canvasWidth; x++) { for (let y = 0; y < canvasHeight; y++) { const index = (y * canvasWidth + x) * 4; if (data[index] === parseInt(color.slice(1, 3), 16) && data[index + 1] === parseInt(color.slice(3, 5), 16) && data[index + 2] === parseInt(color.slice(5, 7), 16)) { waveArray[x] = 1 - 2 * y / canvasHeight; break; } } } const waveTable = audioContext.createPeriodicWave(waveArray, new Float32Array(canvasWidth)); oscillator.setPeriodicWave(waveTable); oscillator.frequency.value = 440; oscillator.connect(gainNode); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + 1); } function playAllWaveforms() { for (let i = 0; i < numWaveforms; i++) { playWaveform(i); } } $(document).ready(() => { for (let i = 0; i < numWaveforms; i++) { const canvas = document.createElement('canvas'); canvas.width = canvasWidth; canvas.height = canvasHeight; const color = randomColor(); drawWaveform(canvas, color); waveforms.push({ canvas, color }); const listItem = $('<li></li>').appendTo('#waveform-list'); $(canvas).appendTo(listItem); $('<button class="btn btn-secondary">Regenerate</button>') .click(() => regenerateWaveform(i)) .appendTo(listItem); $('<button class="btn btn-primary">Play</button>') .click(() => playWaveform(i)) .appendTo(listItem); } }); </script> <style> #main-container { text-align: center; } #waveform-list { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; } #waveform-list li { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } </style> <link rel="canonical" href="https://calculator.tools/prompt/115/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <h1>Waveform Generator 🎵</h1> <button id="regenerate-all" class="btn btn-secondary" onclick="regenerateAllWaveforms()">Regenerate All</button> <button id="play-all" class="btn btn-primary" onclick="playAllWaveforms()">Play All</button> <ul id="waveform-list"> </ul> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Waveform Generator
Calculator Tools