Spaces:
Sleeping
Sleeping
File size: 2,585 Bytes
7f608f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音声録音</title>
</head>
<body>
<h1>音声録音</h1>
<button id="start-recording">録音開始</button>
<button id="stop-recording" disabled>録音停止</button>
<p>録音した音声を送信する準備ができました。</p>
<button id="send-to-server" disabled>音声を送信</button>
<script>
let mediaRecorder;
let audioChunks = [];
const startRecordingBtn = document.getElementById('start-recording');
const stopRecordingBtn = document.getElementById('stop-recording');
const sendToServerBtn = document.getElementById('send-to-server');
// 音声録音の開始
startRecordingBtn.addEventListener('click', async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const reader = new FileReader();
reader.onloadend = () => {
const base64String = reader.result.split(',')[1]; // Base64エンコードされた音声データを取得
sendToServerBtn.disabled = false;
sendToServerBtn.addEventListener('click', () => {
// 音声をバックエンドに送信
fetch('/upload_audio', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
audio_data: base64String,
}),
})
.then(response => response.json())
.then(data => {
alert('音声がバックエンドに送信されました。');
})
.catch(error => {
console.error('エラー:', error);
});
});
};
reader.readAsDataURL(audioBlob);
};
mediaRecorder.start();
startRecordingBtn.disabled = true;
stopRecordingBtn.disabled = false;
});
// 音声録音の停止
stopRecordingBtn.addEventListener('click', () => {
mediaRecorder.stop();
startRecordingBtn.disabled = false;
stopRecordingBtn.disabled = true;
});
</script>
</body>
</html>
|