render wav

index.html

@@ -226,8 +226,10 @@
       margin-top: 0.75rem;
       width: 100%;
       max-width: 360px;
-      height: 40px;
+      min-height: 40px;
+      height: auto;
       border-radius: 8px;
+      display: block;
     }
 
     .input-area {

main.js

@@ -441,19 +441,20 @@ async function generate(userMessage) {
         if (waveform.length > 0) {
           generatedText = result.textOutput || `Generated ${result.audioCodes.length} audio frames (${(waveform.length / 24000).toFixed(2)}s)`;
 
-          // Create separate audio message block
+          // Create audio player
           const audioMsgEl = document.createElement('div');
           audioMsgEl.className = 'message assistant';
           const wavBlob = createWavBlob(waveform, 24000);
           console.log('TTS WAV blob created:', wavBlob.size, 'bytes');
           const audioUrl = URL.createObjectURL(wavBlob);
+
           const audioEl = document.createElement('audio');
-          audioEl.src = audioUrl;
           audioEl.controls = true;
-          audioEl.preload = 'auto';
-          audioEl.style.display = 'block';
-          audioEl.style.width = '100%';
-          audioEl.style.maxWidth = '360px';
+          const sourceEl = document.createElement('source');
+          sourceEl.src = audioUrl;
+          sourceEl.type = 'audio/wav';
+          audioEl.appendChild(sourceEl);
+
           audioMsgEl.appendChild(audioEl);
           chatContainer.appendChild(audioMsgEl);
           chatContainer.scrollTop = chatContainer.scrollHeight;
@@ -502,19 +503,20 @@ async function generate(userMessage) {
             generatedText = `Generated ${result.audioCodes.length} audio frames`;
           }
 
-          // Create separate audio message block
+          // Create audio player
           const audioMsgEl = document.createElement('div');
           audioMsgEl.className = 'message assistant';
           const wavBlob = createWavBlob(waveform, 24000);
           console.log('WAV blob created:', wavBlob.size, 'bytes');
           const audioUrl = URL.createObjectURL(wavBlob);
+
           const audioEl = document.createElement('audio');
-          audioEl.src = audioUrl;
           audioEl.controls = true;
-          audioEl.preload = 'auto';
-          audioEl.style.display = 'block';
-          audioEl.style.width = '100%';
-          audioEl.style.maxWidth = '360px';
+          const sourceEl = document.createElement('source');
+          sourceEl.src = audioUrl;
+          sourceEl.type = 'audio/wav';
+          audioEl.appendChild(sourceEl);
+
           audioMsgEl.appendChild(audioEl);
           chatContainer.appendChild(audioMsgEl);
           chatContainer.scrollTop = chatContainer.scrollHeight;