Implement native browser-side audio extraction and server upload

- Update index.html file input to accept audio/*,video/*
- Add engine selection dropdown (Local vs Server) in index.html
- Implement JS bufferToWav WAV encoder in app.js (Float32Array PCM to 16-bit WAV)
- Integrate server-side transcribing route via FormData POST in app.js
- Update DEVELOPMENT_RULES.md to mark browser-side extraction as implemented

Co-Authored-By: Claude Opus 4.8 <noreply@anthreply.com>
This commit is contained in:
Gan, Jimmy
2026-06-03 11:38:51 +08:00
parent f201ef509d
commit 784a67c921
3 changed files with 111 additions and 29 deletions
+12 -3
View File
@@ -15,6 +15,7 @@
<h1>Media to Text Converter</h1>
<div>
<label for="language">Language: </label>
<select id="language">
<option value="en-US">English</option>
<option value="es-ES">Spanish</option>
@@ -32,10 +33,18 @@
</select>
</div>
<div style="margin-top: 10px;">
<label for="engine">Transcription Engine: </label>
<select id="engine">
<option value="local">Local (Offline Browser)</option>
<option value="server">Server (Whisper Python)</option>
</select>
</div>
<div style="margin: 20px 0; padding: 20px; border: 2px dashed #ccc; border-radius: 8px;">
<h3>Upload Audio File</h3>
<p style="color: #666; font-size: 14px;">Upload audio file for transcription (processed in browser)</p>
<input type="file" id="file-input" accept="audio/*">
<h3>Upload Media File</h3>
<p style="color: #666; font-size: 14px;">Upload audio or video file for transcription</p>
<input type="file" id="file-input" accept="audio/*,video/*">
<button id="upload-btn" disabled>Convert to Text</button>
</div>