【JavaScript】ブラウザーで OpenAI API の音声認識 (Speech to Text) でマイク音声を録音してアップロードする方法

curl https://api.openai.com/v1/audio/transcriptions \
  -H "Authorization: Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py" \
  -H "Content-Type: multipart/form-data" \
  -F file="@./speech.mp3" \
  -F model="whisper-1" \
  -F language="ja" \
  -F response_format="json"

{
  "text": "本日の天気予報です。"
}

本日の天気予報です。

1
00:00:00,000 --> 00:00:02,000
本日の天気予報です。

{
  "task": "transcribe",
  "language": "japanese",
  "duration": 1.840000033378601,
  "text": "本日の天気予報です。",
  "segments": [
    {
      "id": 0,
      "seek": 0,
      "start": 0.0,
      "end": 2.0,
      "text": "本日の天気予報です。",
      "tokens": [
        50364,
        8802,
        6890,
        2972,
        6135,
        25870,
        1369,
        230,
        17803,
        4767,
        1543,
        50464
      ],
      "temperature": 0.0,
      "avg_logprob": -0.2016688734292984,
      "compression_ratio": 0.7317073345184326,
      "no_speech_prob": 0.021211111918091774
    }
  ]
}

WEBVTT

00:00:00.000 --> 00:00:02.000
本日の天気予報です。

<input id="afile" type="file" accept="audio/*">
<button type="button" id="btn">送信</button>

const btn_el = document.getElementById('btn');
const afile_el = document.getElementById('afile');

btn_el.addEventListener('click', async (event) => {
    // OpenAI API にリクエストするための FormData オブジェクトを生成
    var fd = new FormData();
    fd.append('file', afile_el.files[0]);
    fd.append('model', 'whisper-1');
    fd.append('language', 'ja');
    fd.append('response_format', 'json');

    // fetch で OpenAI API にリクエスト
    const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py'
        },
        body: fd
    });

    // レスポンスボディをテキストとして取り出す
    const rdata = await response.text();
    console.log(rdata);
});

multipart/form-data; boundary=----WebKitFormBoundarywI4sNqf7XZyB6YlS

<input id="vfile" type="file" accept="video/*">
<button type="button" id="btn">送信</button>
<video id="video" controls></video>

const btn_el = document.getElementById('btn');
const vfile_el = document.getElementById('vfile');
const video_el = document.getElementById('video');

// 動画ファイルが選択されたら video 要素にセットして確認できるようにする
vfile_el.addEventListener('change', (event) => {
    const file = event.currentTarget.files[0];
    video_el.src = URL.createObjectURL(file);
});

// 送信ボタンが押されたときの処理
btn_el.addEventListener('click', async (event) => {
    // OpenAI API にリクエストするための FormData オブジェクトを生成
    var fd = new FormData();
    fd.append('file', vfile_el.files[0]);
    fd.append('model', 'whisper-1');
    fd.append('language', 'ja');
    fd.append('response_format', 'vtt');

    // fetch で OpenAI API にリクエスト
    const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py'
        },
        body: fd
    });

    // レスポンスの VTT データを取り出す
    const vtt = await response.text();

    // VTT から Blob オブジェクトを生成
    const blob = new Blob([vtt], { type: "text/plain; charset=utf-8" });

    // track 要素を生成
    const track_el = document.createElement('track');
    track_el.srclang = 'ja-JP';
    track_el.kind = 'captions';
    track_el.default = true;

    // track 要素の src 属性に Object URL をセット
    track_el.src = URL.createObjectURL(blob);

    // track 要素を video 要素に追加
    video_el.innerHTML = '';
    video_el.append(track_el);

    // 字幕の準備ができたら動画を再生
    video_el.play();
});

// マイクロフォンから音声を取り込む MediaStream オブジェクトを生成
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

// マイクロフォンからの音声を録音する MediaRecorder オブジェクトを生成
const recorder = new MediaRecorder(stream);

// 録音を開始
// - 1 秒ごとに Blob オブジェクトを生成する (Safari 対策)
recorder.start(1000);

const chunks = [];
recorder.ondataavailable = async (event) => {
    const blob = event.data;
    chunks.push(blob);
};

// 録音を停止する
recorder.stop();

// MediaRecorder オブジェクトで stop イベントが発生したときの処理
recorder.onstop = async () => {
    // 録音データの blob オブジェクトのリストを 1 つの File オブジェクトに変換
    // - ファイル名は何でも良いが、Safari 対策のため .mp4 のファイル名を付けておく
    const file = new File(chunks, 'dummy.mp4');

    // OpenAI API にリクエストするための FormData オブジェクトを生成
    var fd = new FormData();
    fd.append('file', file);
    fd.append('model', 'whisper-1');
    fd.append('language', 'ja');
    fd.append('response_format', 'text');

    // fetch で OpenAI API にリクエスト
    const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer sk-axcuw8EQwBnPVLexeKj83G9RblPqWG3qwalWvmdeLoFng2py'
        },
        body: fd
    });

    // レスポンスボディをテキストとして取り出す
    const rdata = await response.text();
    console.log(rdata);
};