ผมสร้าง Live Captions บนเบราว์เซอร์

คุณไม่จำเป็นต้องใช้ Whisper ไม่ต้องมี API key และไม่ต้องมีเซิร์ฟเวอร์

Chrome และ Edge มีเอนจิน speech-to-text ในตัว ผมสร้าง live captions ด้วยเอนจินนี้โดยใช้โค้ดเพียง 30 บรรทัด

ลองเล่นได้ที่นี่: https://dev48v.infy.uk/solve/day8-live-captions.html

โค้ดนี้ใช้ SpeechRecognition API

มีการตั้งค่าสองอย่างที่ทำให้แตกต่างระหว่างกล่องพิมพ์ตามคำบอกธรรมดา กับ live captions ของจริง:

หากไม่มีสองสิ่งนี้ เอนจินจะแสดงข้อความหลังจากที่คุณหยุดพูดเท่านั้น แต่ถ้ามีสิ่งนี้ คุณจะเห็นการคาดเดาคำพูดแบบเรียลไทม์ ซึ่งทำให้เกิดเอฟเฟกต์คำบรรยายแบบกะพริบ (flickering caption effect)

เอนจินจะหยุดทำงานหากได้ยินความเงียบเป็นเวลานานเกินไป คุณสามารถแก้ปัญหานี้ได้ด้วยการสั่งให้มันเริ่มทำงานใหม่ใน onend event การทำลูปแบบนี้จะช่วยให้คำบรรยายทำงานต่อไปได้แม้ในช่วงที่มีการหยุดพักหรือช่วงที่เงียบ

Chrome จะสตรีมเสียงไปยังเซิร์ฟเวอร์ของ Google เพื่อประมวลผลขั้นตอนนี้ ซึ่งหมายความว่าคุณจำเป็นต้องมีการเชื่อมต่ออินเทอร์เน็ต

คุณสามารถใช้สิ่งนี้ได้มากกว่าแค่ไมโครโฟน คุณสามารถดักจับเสียงจากการวิดีโอคอลหรือแท็บ YouTube ได้ โดยใช้ getDisplayMedia เพื่อดึงเสียงและส่งต่อไปยังตัวแปลงเสียงเป็นข้อความ (transcriber)

เบราว์เซอร์มีฟีเจอร์มากมายที่ยังไม่ได้ถูกนำมาใช้ ทั้ง live captions และคำสั่งเสียงสามารถใช้งานได้ด้วยโค้ดเพียงบรรทัดเดียว โดยที่คุณไม่จำเป็นต้องมี backend เลย

ที่มา: https://dev.to/dev48v/i-built-live-captions-in-the-browser-no-api-key-no-server-4i7n