commit 7ab09ed8e8a2bfa3fae57a144ad1d1185fbf80cf
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 16:46:06 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8a2e85e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,27 @@
+<main class="container">
+ <header>
+ <h1>SoundWave</h1>
+ <p>Upload your music. Watch it come alive.</p>
+ </header>
+
+ <section class="upload-section">
+ <label for="audio-upload" class="upload-btn">Choose MP3 File</label>
+ <input type="file" id="audio-upload" accept="audio/mp3" hidden>
+ </section>
+
+ <section class="player-section">
+ <canvas id="visualizer"></canvas>
+ <div class="controls">
+ <button id="play-btn" aria-label="Play" disabled>
+ <span class="play-icon"></span>
+ </button>
+ <div class="progress-bar">
+ <div class="progress"></div>
+ </div>
+ </div>
+ </section>
+
+ <footer>
+ <p>Made with passion for music lovers</p>
+ </footer>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..7c4a903
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://soundwave.scroll.pub
+metaTags
+editButton /edit.html
+title SoundWave - Beautiful Audio Visualizer
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d1d5959
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_016aJBaECWY2ZmT3qrLVhS9G",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a beautiful audio visualizer website. For the domain, I suggest:\n\n---domain---\nsoundwave.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://soundwave.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SoundWave - Beautiful Audio Visualizer\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"container\">\n <header>\n <h1>SoundWave</h1>\n <p>Upload your music. Watch it come alive.</p>\n </header>\n\n <section class=\"upload-section\">\n <label for=\"audio-upload\" class=\"upload-btn\">Choose MP3 File</label>\n <input type=\"file\" id=\"audio-upload\" accept=\"audio/mp3\" hidden>\n </section>\n\n <section class=\"player-section\">\n <canvas id=\"visualizer\"></canvas>\n <div class=\"controls\">\n <button id=\"play-btn\" aria-label=\"Play\" disabled>\n <span class=\"play-icon\"></span>\n </button>\n <div class=\"progress-bar\">\n <div class=\"progress\"></div>\n </div>\n </div>\n </section>\n\n <footer>\n <p>Made with passion for music lovers</p>\n </footer>\n</main>\n\n---style.css---\n:root {\n --primary: #2a0845;\n --secondary: #6441A5;\n --accent: #f72585;\n --text: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: var(--text);\n min-height: 100vh;\n line-height: 1.6;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n display: flex;\n flex-direction: column;\n gap: 3rem;\n}\n\nheader {\n text-align: center;\n}\n\nh1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(to right, #fff, #f72585);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: glow 2s ease-in-out infinite alternate;\n}\n\n@keyframes glow {\n from {\n text-shadow: 0 0 10px rgba(247, 37, 133, 0.5);\n }\n to {\n text-shadow: 0 0 20px rgba(247, 37, 133, 0.8);\n }\n}\n\n.upload-section {\n text-align: center;\n}\n\n.upload-btn {\n display: inline-block;\n padding: 1rem 2rem;\n background: var(--accent);\n color: white;\n border-radius: 50px;\n cursor: pointer;\n transition: transform 0.3s ease;\n box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);\n}\n\n.upload-btn:hover {\n transform: translateY(-2px);\n}\n\n.player-section {\n position: relative;\n aspect-ratio: 16/9;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 15px;\n overflow: hidden;\n backdrop-filter: blur(10px);\n}\n\ncanvas {\n width: 100%;\n height: 100%;\n}\n\n.controls {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 1rem;\n background: linear-gradient(transparent, rgba(0,0,0,0.5));\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n#play-btn {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: none;\n background: var(--accent);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease;\n}\n\n#play-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n#play-btn:not(:disabled):hover {\n transform: scale(1.1);\n}\n\n.play-icon {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 10px 0 10px 20px;\n border-color: transparent transparent transparent white;\n}\n\n.progress-bar {\n flex: 1;\n height: 5px;\n background: rgba(255,255,255,0.2);\n border-radius: 5px;\n overflow: hidden;\n}\n\n.progress {\n width: 0%;\n height: 100%;\n background: var(--accent);\n transition: width 0.1s linear;\n}\n\nfooter {\n text-align: center;\n opacity: 0.8;\n}\n\n@media (max-width: 768px) {\n .container {\n padding: 1rem;\n gap: 2rem;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const canvas = document.getElementById('visualizer');\n const ctx = canvas.getContext('2d');\n const audioInput = document.getElementById('audio-upload');\n const playBtn = document.getElementById('play-btn');\n const progressBar = document.querySelector('.progress');\n \n let audioContext;\n let analyser;\n let source;\n let audioElement;\n let animationId;\n let isPlaying = false;\n\n function initAudio() {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n analyser = audioContext.createAnalyser();\n analyser.fftSize = 256;\n }\n\n function handleFile(file) {\n const reader = new FileReader();\n reader.onload = (e) => {\n if (audioElement) {\n audioElement.pause();\n URL.revokeObjectURL(audioElement.src);\n }\n \n audioElement = new Audio();\n audioElement.src = URL.createObjectURL(file);\n \n source = audioContext.createMediaElementSource(audioElement);\n source.connect(analyser);\n analyser.connect(audioContext.destination);\n \n playBtn.disabled = false;\n \n audioElement.addEventListener('timeupdate', () => {\n const progress = (audioElement.currentTime / audioElement.duration) * 100;\n progressBar.style.width = `${progress}%`;\n });\n };\n reader.readAsArrayBuffer(file);\n }\n\n function visualize() {\n canvas.width = canvas.offsetWidth;\n canvas.height = canvas.offsetHeight;\n \n const bufferLength = analyser.frequencyBinCount;\n const dataArray = new Uint8Array(bufferLength);\n \n function draw() {\n animationId = requestAnimationFrame(draw);\n \n analyser.getByteFrequencyData(dataArray);\n \n ctx.fillStyle = 'rgba(42, 8, 69, 0.2)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n const barWidth = (canvas.width / bufferLength) * 2.5;\n let barHeight;\n let x = 0;\n \n for(let i = 0; i < bufferLength; i++) {\n barHeight = dataArray[i] * 2;\n \n const gradient = ctx.createLinearGradient(0, canvas.height - barHeight, 0, canvas.height);\n gradient.addColorStop(0, '#f72585');\n gradient.addColorStop(1, '#6441A5');\n \n ctx.fillStyle = gradient;\n ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);\n \n x += barWidth + 1;\n }\n }\n \n draw();\n }\n\n playBtn.addEventListener('click', () => {\n if (!isPlaying) {\n audioElement.play();\n visualize();\n playBtn.querySelector('.play-icon').style.borderStyle = 'double';\n } else {\n audioElement.pause();\n cancelAnimationFrame(animationId);\n playBtn.querySelector('.play-icon').style.borderStyle = 'solid';\n }\n isPlaying = !isPlaying;\n });\n\n audioInput.addEventListener('change', (e) => {\n if (e.target.files[0]) {\n if (!audioContext) initAudio();\n handleFile(e.target.files[0]);\n }\n });\n});\n\n---end---\n\nThis creates a sleek, modern audio visualizer with these features:\n- Beautiful gradient background with animated glow effects\n- Smooth file upload interface\n- Real-time audio visualization using Canvas API\n- Progress bar showing current playback position\n- Play/pause controls\n- Responsive design that works on all devices\n- Gorgeous color scheme with gradient animations\n- Glass-morphism effects for the player\n- Clean, accessible semantic HTML\n- Modern CSS with fluid animations\n\nThe visualizer creates beautiful wave-form patterns that react to the music's frequency data, with smooth color transitions and professional animations."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2449
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..bff2678
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# soundwave.scroll.pub
+Website generated by Claude from prompt: A mp3 beautiful graphic visualizer
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..34a8873
--- /dev/null
+++ b/script.js
@@ -0,0 +1,101 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('visualizer');
+ const ctx = canvas.getContext('2d');
+ const audioInput = document.getElementById('audio-upload');
+ const playBtn = document.getElementById('play-btn');
+ const progressBar = document.querySelector('.progress');
+
+ let audioContext;
+ let analyser;
+ let source;
+ let audioElement;
+ let animationId;
+ let isPlaying = false;
+
+ function initAudio() {
+ audioContext = new (window.AudioContext || window.webkitAudioContext)();
+ analyser = audioContext.createAnalyser();
+ analyser.fftSize = 256;
+ }
+
+ function handleFile(file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ if (audioElement) {
+ audioElement.pause();
+ URL.revokeObjectURL(audioElement.src);
+ }
+
+ audioElement = new Audio();
+ audioElement.src = URL.createObjectURL(file);
+
+ source = audioContext.createMediaElementSource(audioElement);
+ source.connect(analyser);
+ analyser.connect(audioContext.destination);
+
+ playBtn.disabled = false;
+
+ audioElement.addEventListener('timeupdate', () => {
+ const progress = (audioElement.currentTime / audioElement.duration) * 100;
+ progressBar.style.width = `${progress}%`;
+ });
+ };
+ reader.readAsArrayBuffer(file);
+ }
+
+ function visualize() {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+
+ const bufferLength = analyser.frequencyBinCount;
+ const dataArray = new Uint8Array(bufferLength);
+
+ function draw() {
+ animationId = requestAnimationFrame(draw);
+
+ analyser.getByteFrequencyData(dataArray);
+
+ ctx.fillStyle = 'rgba(42, 8, 69, 0.2)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ const barWidth = (canvas.width / bufferLength) * 2.5;
+ let barHeight;
+ let x = 0;
+
+ for(let i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i] * 2;
+
+ const gradient = ctx.createLinearGradient(0, canvas.height - barHeight, 0, canvas.height);
+ gradient.addColorStop(0, '#f72585');
+ gradient.addColorStop(1, '#6441A5');
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+
+ x += barWidth + 1;
+ }
+ }
+
+ draw();
+ }
+
+ playBtn.addEventListener('click', () => {
+ if (!isPlaying) {
+ audioElement.play();
+ visualize();
+ playBtn.querySelector('.play-icon').style.borderStyle = 'double';
+ } else {
+ audioElement.pause();
+ cancelAnimationFrame(animationId);
+ playBtn.querySelector('.play-icon').style.borderStyle = 'solid';
+ }
+ isPlaying = !isPlaying;
+ });
+
+ audioInput.addEventListener('change', (e) => {
+ if (e.target.files[0]) {
+ if (!audioContext) initAudio();
+ handleFile(e.target.files[0]);
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9c261e3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,158 @@
+:root {
+ --primary: #2a0845;
+ --secondary: #6441A5;
+ --accent: #f72585;
+ --text: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: var(--text);
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+}
+
+header {
+ text-align: center;
+}
+
+h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(to right, #fff, #f72585);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+ from {
+ text-shadow: 0 0 10px rgba(247, 37, 133, 0.5);
+ }
+ to {
+ text-shadow: 0 0 20px rgba(247, 37, 133, 0.8);
+ }
+}
+
+.upload-section {
+ text-align: center;
+}
+
+.upload-btn {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background: var(--accent);
+ color: white;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);
+}
+
+.upload-btn:hover {
+ transform: translateY(-2px);
+}
+
+.player-section {
+ position: relative;
+ aspect-ratio: 16/9;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 15px;
+ overflow: hidden;
+ backdrop-filter: blur(10px);
+}
+
+canvas {
+ width: 100%;
+ height: 100%;
+}
+
+.controls {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 1rem;
+ background: linear-gradient(transparent, rgba(0,0,0,0.5));
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+#play-btn {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: none;
+ background: var(--accent);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform 0.2s ease;
+}
+
+#play-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+#play-btn:not(:disabled):hover {
+ transform: scale(1.1);
+}
+
+.play-icon {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 10px 0 10px 20px;
+ border-color: transparent transparent transparent white;
+}
+
+.progress-bar {
+ flex: 1;
+ height: 5px;
+ background: rgba(255,255,255,0.2);
+ border-radius: 5px;
+ overflow: hidden;
+}
+
+.progress {
+ width: 0%;
+ height: 100%;
+ background: var(--accent);
+ transition: width 0.1s linear;
+}
+
+footer {
+ text-align: center;
+ opacity: 0.8;
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding: 1rem;
+ gap: 2rem;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ }
+}