changeset 28:99b71a377f2c

audio for textarea
author Franklin Schmidt <fschmidt@gmail.com>
date Sat, 02 Aug 2025 20:04:35 -0600
parents 176a182c02cf
children 505185272dd7
files src/chat.css src/chat.html.luan src/chat.js src/site.js
diffstat 4 files changed, 12 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/src/chat.css	Fri Aug 01 20:08:13 2025 -0600
+++ b/src/chat.css	Sat Aug 02 20:04:35 2025 -0600
@@ -36,3 +36,7 @@
 dialog[rename] input {
 	width: 300px;
 }
+
+div[buttons] audio {
+	height: 34px;
+}
--- a/src/chat.html.luan	Fri Aug 01 20:08:13 2025 -0600
+++ b/src/chat.html.luan	Sat Aug 02 20:04:35 2025 -0600
@@ -29,6 +29,7 @@
 		</style>
 		<script>
 			let chatId = <%= chat.id %>;
+			let lang = '<%= chat.language_region %>';
 		</script>
 		<script src="/chat.js?s=<%=started%>"></script>
 	</head>
@@ -52,6 +53,7 @@
 			<div ask>
 				<textarea autofocus oninput="fixTextarea(event.target)" onkeydown="textareaKey(event)"></textarea>
 				<div buttons>
+					<audio controls preload=none></audio>
 					<button record onclick="toggleRecording()">Record</button>
 					<button onclick="askAi()" title="Send"><img src="/images/send.svg"></button>
 				</div>
--- a/src/chat.js	Fri Aug 01 20:08:13 2025 -0600
+++ b/src/chat.js	Sat Aug 02 20:04:35 2025 -0600
@@ -70,10 +70,15 @@
 	}
 }
 
+let audio;
+
 function fixTextarea(textarea) {
 	textarea.style.height = 'initial';
 	textarea.style.height = (textarea.scrollHeight+2) + 'px';
 	textarea.parentNode.scrollIntoViewIfNeeded(false);
+	if( !audio )
+		audio = document.querySelector('div[buttons] audio');
+	audio.src = `/tts.mp3?lang=${lang}&text=${encodeURIComponent(textarea.value)}`;
 }
 
 function askAi() {
--- a/src/site.js	Fri Aug 01 20:08:13 2025 -0600
+++ b/src/site.js	Sat Aug 02 20:04:35 2025 -0600
@@ -139,7 +139,7 @@
 			}
 			//console.log(mdDiv.textContent);
 			let lang = div.getAttribute('lang');
-			text += `\n<p><audio controls preload=none src="/tts.mp3?lang=${lang}&text=${encodeURIComponent(mdDiv.textContent)}"></p>\n`;
+			text += `\n<p><audio controls preload=none src="/tts.mp3?lang=${lang}&text=${encodeURIComponent(mdDiv.textContent)}"></audio></p>\n`;
 		}
 		div.innerHTML = text;
 		div.removeAttribute('markdown');