JavaScriptを使って会話を録音し、その音声をOpenAI APIを利用して文字起こしと要約をするアプリを作ってみました。
この記事ではコードのサンプルと、実装の手順を紹介します。
実際に作成したアプリ
以下のようなアプリを作成しました。
デザインはChatGPTに考えてもらったのですが最高にクールになりました。
アプリの概要
今回作成したアプリの主な機能は次の3つです。
音声の録音
MediaRecorder APIを使い、リアルタイムで音声を録音します。
文字起こし
録音した音声データをOpenAI Whisper APIに送信して文字起こしを行います。
要約
文字起こしされたテキストをGPT-4を利用して簡潔に要約します。
実装手順
基本的なHTML構造
まずは基本となるHTMLを準備します。この中で、録音ボタンや文字起こし結果を表示するテキストエリアを用意します。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='style.css'>
<title>Voice Recorder with Transcription</title>
</head>
<body>
<div class='container'>
<h1>Voice Recorder with Transcription</h1>
<div class='controls'>
<button id='startRecording' class='btn'>録音開始</button>
<button id='stopRecording' class='btn'>録音停止</button>
</div>
<div class='timer' id='timer'>00:00</div>
<button id='startTranscription'>文字起こし</button>
<textarea id='transcriptionResult' placeholder='ここに文字起こし結果が表示されます'></textarea>
<button id='summarizeButton'>要約</button>
<div id='summary'>要約結果: ここに表示されます</div>
</div>
</body>
</html>
録音機能の実装
音声の録音にはブラウザのMediaRecorder APIを利用します。以下は録音の開始と停止を制御するJavaScriptコードの一部です。
録音中はタイマーを動かしてどれくらい録音しているかをわかるようにします。
let mediaRecorder;
let audioChunks = [];
let timerInterval;
let elapsedTime = 0;
// 録音開始
document.getElementById('startRecording').addEventListener('click', () => {
startTimer(); // タイマーを開始
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
mediaRecorder.start();
})
.catch(error => console.error('マイクアクセスエラー:', error));
});
// 録音停止
document.getElementById('stopRecording').addEventListener('click', () => {
mediaRecorder.stop();
stopTimer(); // タイマーを停止
});
function startTimer() {
const timerElement = document.getElementById('timer');
elapsedTime = 0;
timerInterval = setInterval(() => {
elapsedTime++;
const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0');
const seconds = (elapsedTime % 60).toString().padStart(2, '0');
timerElement.textContent = `${minutes}:${seconds}`;
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
}
OpenAI APIで文字起こし
録音が完了したら、音声データをBlobとしてOpenAI Whisper APIに送信します。APIを呼び出す部分のコードは以下のようになります。
YOUR_API_KEYにはOpenAIプラットフォームから取得できるAPIキーを指定してください。
なお、languageにenを指定すれば英語翻訳することもできます。
document.getElementById('startTranscription').addEventListener('click', () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const formData = new FormData();
formData.append('file', audioBlob, 'audio.wav');
formData.append('model', 'whisper-1');
formData.append('language', 'ja');
fetch('https://api.openai.com/v1/audio/transcriptions', {
method: 'POST',
headers: { 'Authorization': `Bearer YOUR_API_KEY` },
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById('transcriptionResult').textContent = data.text;
})
.catch(error => console.error('文字起こしエラー:', error));
});
GPT-4で要約
文字起こしされたテキストをGPT-4に送信し、要約を取得します。
document.getElementById('summarizeButton').addEventListener('click', () => {
const transcription = document.getElementById('transcriptionResult').value;
fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer YOUR_API_KEY`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'gpt-4',
messages: [
{ role: 'system', content: '要約してください。' },
{ role: 'user', content: transcription }
]
})
})
.then(response => response.json())
.then(data => {
document.getElementById('summary').textContent = `要約結果: ${data.choices[0].message.content}`;
})
.catch(error => console.error('要約エラー:', error));
});
実際に動かしてみた
最初の17秒で録音してそのあと文字起こしと要約をしています。
自分の滑舌のせいか多少怪しいところはあるものの、だいぶ正確に文字起こしすることができました！
まとめ
ブラウザだけで音声の録音から文字起こし、要約までを非常に簡単に実行することができました。
このアプリを応用すれば対面のやり取りで役立つツールとして活用できるでしょう。
もし興味がありましたらぜひ試してみてください。
Discussion