<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php
session_start();
$tid = $_GET['tid'];
$fid= $_GET['fid'];
?>
<title>语音输入</title>
</head>
<body>
<iframe src ="post_disply2.php?tid=<?php echo $_GET['tid']; ?>&fid=<?php echo $_GET['fid']; ?>" style="width: 100%; height: 40vh;"> </iframe>
<div style="display: flex; justify-content: center;">
<button type="button" id="voice-button" style="font-size: 1.5rem; padding: 1rem 2rem;">开始录音</button>
</div>
<div id="chat-box" style="margin-top: 2rem;"></div>
<script>
// 在聊天窗口中添加一条消息
function addMessage(sender, message) {
var chatBox = document.getElementById('chat-box');
var messageDiv = document.createElement('div');
messageDiv.innerHTML = '<strong>' + sender + '：</strong> ' + message;
chatBox.appendChild(messageDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
var recognition = null;
var isRecording = false;
var audioChunks = [];
var startTime = null;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() {
console.log('开始录音');
isRecording = true;
startTime = Date.now();
// 清空聊天框的内容
var chatBox = document.getElementById('chat-box');
chatBox.innerHTML = '';
// 显示录音中的提示
addMessage('我', '录音中...');
};
recognition.onend = function() {
console.log('结束录音');
isRecording = false;
// 隐藏录音中的提示
var chatBox = document.getElementById('chat-box');
var lastMessageDiv = chatBox.lastChild;
if (lastMessageDiv && lastMessageDiv.innerText === '录音中...') {
chatBox.removeChild(lastMessageDiv);
}
// 显示录音完成的提示
if (audioChunks.length > 0) {
addMessage('我', '录音完成，用时 ' + Math.round((Date.now() - startTime) / 1000) + ' 秒');
}
};
recognition.onerror = function(err) {
console.error(err);
isRecording = false;
};
recognition.onresult = function(event) {
var result = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
result += event.results[i][0].transcript;
}
}
// 去除空格和回车符等特殊字符
result = result.replace(/[\s\r\n]+/g, ' ').trim();
if (result !== '') {
console.log('语音识别结果：' + result);
// 确定发送者的语言，使用 PHP 中的 $_SESSION 进行获取登录的用户名
var sender = '<?php echo $_SESSION['Mud_username'];?>';
var fid = '<?php echo $fid ;?>';
var tid = '<?php echo $tid ;?>';
// 将语音输入结果添加到聊天
addMessage(sender, result);
// 将语音文件上传到服务器
var formData = new FormData();
//formData.append('text', result);
formData.append('cont', result);
formData.append('author', sender);
formData.append('tid', tid);
formData.append('fid', fid);
formData.append('time', new Date().toISOString());
var xhr = new XMLHttpRequest();
xhr.open('POST', 'insert-disply_newstyle.php');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('请求失败');
}
};
xhr.send(formData);
// 重置录音缓冲区
audioChunks = [];
} else {
console.log('语音识别结果为空');
}
};
} else {
alert('浏览器不支持语音输入');
}
var voiceButton = document.getElementById('voice-button');
voiceButton.innerHTML = '粤语录音';
voiceButton.addEventListener('mousedown', function(event) {
event.preventDefault();
if (!isRecording) {
recognition.lang = 'zh-HK';
voiceButton.innerHTML = '粤语录音';
recognition.start();
} else {
recognition.stop();
}
});
recognition.ondataavailable = function(event) {
audioChunks.push(event.data);
};
</script>
</body>
</html>
