ブラウザだけで動く！音声録音＋文字起こしツールを無料で作ってみよう

はじめに
使う技術
完成イメージ
コード全体
使い方
注意点
発展編
まとめ

はじめに

「会議のメモを取りたい」「ふと思いついたアイデアを残したい」
そんなとき、インストール不要でブラウザからすぐ使える録音＋文字起こしツールがあったら便利ですよね。

今回はブラウザ標準のWeb APIだけで作れる、シンプルな録音＆文字起こしツールを作ってみます。
必要なのはPCまたはスマホのブラウザだけ。サーバー不要、無料で動きます。

使う技術

MediaRecorder API
→ マイク音声を録音
Web Speech API
→ 音声をリアルタイムで文字に変換
HTML + JavaScriptだけで完結

完成イメージ

ページを開くと「録音開始」ボタン
ボタンを押すと録音開始＆リアルタイム文字起こし
停止すると音声ファイルを保存できるリンクも表示

コード全体

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>音声録音＋文字起こし</title>
<style>
  body { font-family: sans-serif; max-width: 600px; margin: auto; }
  button { font-size: 1.2em; padding: 10px 20px; margin: 10px 0; }
  #transcript { white-space: pre-wrap; padding: 10px; border: 1px solid #ccc; min-height: 100px; }
</style>
</head>
<body>
<h1>音声録音＋文字起こし</h1>
<button id="startBtn">🎙 録音開始</button>
<button id="stopBtn" disabled>■ 停止</button>
<div id="transcript"></div>
<div id="audio"></div>

<script>
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const transcriptDiv = document.getElementById('transcript');
const audioDiv = document.getElementById('audio');

let mediaRecorder, chunks = [];
let recognition;

// 音声録音セットアップ
async function setupRecorder() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream);
  mediaRecorder.ondataavailable = e => chunks.push(e.data);
  mediaRecorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'audio/webm' });
    chunks = [];
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'recording.webm';
    a.textContent = '録音ファイルをダウンロード';
    audioDiv.innerHTML = '';
    audioDiv.appendChild(a);
  };
}

// 音声認識セットアップ
function setupSpeechRecognition() {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  recognition = new SpeechRecognition();
  recognition.lang = 'ja-JP';
  recognition.interimResults = true;
  recognition.continuous = true;

  recognition.onresult = (event) => {
    let text = '';
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      text += event.results[i][0].transcript;
    }
    transcriptDiv.textContent = text;
  };
}

startBtn.onclick = async () => {
  await setupRecorder();
  setupSpeechRecognition();
  mediaRecorder.start();
  recognition.start();
  startBtn.disabled = true;
  stopBtn.disabled = false;
};

stopBtn.onclick = () => {
  mediaRecorder.stop();
  recognition.stop();
  startBtn.disabled = false;
  stopBtn.disabled = true;
};
</script>
</body>
</html>

使い方

上記HTMLをコピペしてindex.htmlとして保存
ブラウザで開く（Chrome推奨）
「🎙 録音開始」を押すと録音＆文字起こしが始まる
停止すると音声ファイルのダウンロードリンクが出る

注意点

Web Speech APIはブラウザ依存（Chrome系はOK、Safariは制限あり）
長時間録音だとブラウザが不安定になる場合あり
実運用向けにはサーバー側でSTT（Speech-to-Text）APIを使う方が精度は高い

発展編

OpenAI Whisper APIやGoogle Cloud Speech-to-Textに送って高精度化
翻訳APIを組み合わせて多言語文字起こし
PWA化してスマホホーム画面から1タップ起動

まとめ

ブラウザだけで音声録音＋リアルタイム文字起こしが可能
インストール不要、ローカルで完結
発展させれば高精度なAI文字起こしツールにもなる

思いついたアイデアや打ち合わせメモに、サクッと使ってみてください。