diff --git a/ventures/wavehello/index.html b/ventures/wavehello/index.html index 9ef725e..d088861 100644 --- a/ventures/wavehello/index.html +++ b/ventures/wavehello/index.html @@ -131,8 +131,16 @@ background-color: #f1f5f9; } + .file-input { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + } + .visualization { - margin: 2rem 0; + margin: 2rem 0 0.5rem; min-height: 200px; display: flex; align-items: center; @@ -142,12 +150,25 @@ .waveform { width: 100%; height: 200px; - background-color: #f1f5f9; + background-color: transparent; border-radius: 0.5rem; position: relative; overflow: hidden; } + .waveform canvas { + width: 100%; + height: 100%; + display: block; + } + + .wave-readout { + font-size: 0.75rem; + color: var(--text-secondary); + min-height: 1.2em; + margin-bottom: 1rem; + } + .controls { display: flex; flex-wrap: wrap; @@ -324,15 +345,6 @@ padding: 1rem; } } - - .loading { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - font-style: italic; - color: var(--text-secondary); - }
@@ -355,17 +367,17 @@Record a message or drop an audio file to generate beautiful soundwave art
- +Or drop an audio file here
(MP3, WAV, or any audio format)
+