Beranda → Blog → Cara merekam suara di browser dan mengubahnya menjadi teks

Cara merekam suara di browser dan mengubahnya menjadi teks

Input suara berguna di tempat mengetik terasa lambat: tiket dukungan dari ponsel, komentar di kolom, mendikte deskripsi panjang. Browser merekam audio dengan antarmuka bawaan, dan transkripsinya satu permintaan lagi — dari server Anda, bukan dari halaman.

Merekam di browser

MediaRecorder bawaan menghasilkan berkas jadi tanpa pustaka apa pun:

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const rec = new MediaRecorder(stream, { mimeType: "audio/webm" });
const chunks = [];

rec.ondataavailable = e => chunks.push(e.data);
rec.onstop = async () => {
  const blob = new Blob(chunks, { type: "audio/webm" });
  const form = new FormData();
  form.append("file", blob, "voice.webm");
  const r = await fetch("/api/transcribe", { method: "POST", body: form });
  document.querySelector("#out").value = (await r.json()).text;
};

rec.start();
setTimeout(() => rec.stop(), 15000);

webm diterima langsung, jadi tidak ada yang perlu dikonversi.

Kenapa kunci tak boleh ada di browser

Mengirim berkas langsung dari halaman memang menggoda, tapi kuncinya lalu tertulis di kode yang bisa dibaca siapa saja. Dalam sejam akan ditemukan, dalam sehari saldonya habis.

Bentuk yang benar adalah lapisan tipis di server Anda: browser mengunggah ke Anda, Anda memeriksa pengguna dan kuotanya, lalu server Anda yang menghubungi API dengan kuncinya.

Lapisan di sisi server

import express from "express";
import multer from "multer";
import OpenAI from "openai";
import { toFile } from "openai/uploads";

const upload = multer({ limits: { fileSize: 25 * 1024 * 1024 } });
const client = new OpenAI({ baseURL: "https://voicesscribe.com/v1", apiKey: process.env.VS_KEY });

express()
  .post("/api/transcribe", upload.single("file"), async (req, res) => {
    const file = await toFile(req.file.buffer, "voice.webm");
    const r = await client.audio.transcriptions.create({ model: "whisper-1", file });
    res.json({ text: r.text });
  })
  .listen(3000);

Di sini pula tempat membatasi durasi rekaman dan jumlah permintaan per pengguna — kalau tidak, bot pertama yang menemukan formulir akan mengubahnya jadi tagihan Anda.

Batasan browser

• Hanya HTTPS. Akses mikrofon tidak diberikan pada koneksi tak terenkripsi, kecuali di localhost saat pengembangan.
• Izin eksplisit. Perekaman baru mulai setelah pengguna setuju, jadi mintalah lewat klik tombol, bukan saat halaman dimuat.
• Wadah berbeda. Sebagian browser merekam webm, sebagian mp4 — keduanya diterima, tapi nama berkas harus sesuai tipe aslinya.
• Tab latar. Di ponsel perekaman berhenti saat tab ditinggalkan, jadi dikte panjang tidak andal.

Pertanyaan yang sering diajukan

Bacaan terkait

• Suara ke teks dengan Node.js: kode siap pakai dan jebakan yang biasa — Cara mentranskrip audio dari Node.js: SDK resmi, stream dan FormData, menangani unggahan di Express, timeout dan percobaan ulang — dengan kode yang bisa langsung disalin.
• Cara mengubah catatan suara menjadi teks secara otomatis — Mengubah catatan suara dari ponsel dan perekam menjadi basis pengetahuan yang bisa dicari: folder tersinkron, skrip pemantau, dan templat catatan.
• Privasi dan keamanan transkripsi: yang perlu ditanyakan — Lima pertanyaan untuk penyedia pengenalan suara: masa simpan, pemakaian data untuk pelatihan, enkripsi kanal, akses karyawan, dan penghapusan atas permintaan.