File size: 4,471 Bytes
90a29dd 138d976 90a29dd | 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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>试试翻译</title>
<style>
body {
background-color: #f9f9fc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
margin: 0;
padding: 2rem;
}
.translation-box {
background: #f2f2f8;
border-radius: 12px;
padding: 1.5rem;
max-width: 800px;
margin: 0 auto;
min-height: 200px;
}
.entry {
margin-bottom: 1.5rem;
}
.timestamp {
font-size: 0.75rem;
color: #999;
}
.original {
font-size: 1rem;
color: #333;
}
.translation {
font-size: 1rem;
font-weight: bold;
color: #000;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
}
.lang-select {
background: white;
border-radius: 9999px;
padding: 0.4rem 1rem;
border: none;
font-size: 1rem;
box-shadow: 0 0 0 1px #ddd;
}
.record-button {
background-color: #1e40af;
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 9999px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<div class="translation-box" id="translationBox">
<!-- 实时内容将插入这里 -->
</div>
<div class="footer">
<select class="lang-select">
<option>中文 » 英语</option>
</select>
<button class="record-button" onclick="startRecording()">🎤 录音</button>
</div>
<script>
let ws;
let mediaRecorder;
function formatTimestamp(ms) {
const sec = ms / 1000;
const min = Math.floor(sec / 60);
const s = (sec % 60).toFixed(1);
return `${String(min).padStart(2, '0')}:${s.padStart(4, '0')}`;
}
let lastSegId = null; // 用于存储上一个 seg_id
function addTranslation(result) {
const box = document.getElementById('translationBox');
// 创建一个新的 div 来显示翻译
const entry = document.createElement('div');
entry.className = 'entry';
console.log(result);
const start = formatTimestamp(result.bg);
const end = formatTimestamp(result.ed);
// 判断是否是新的一行
if (result.seg_id === lastSegId) {
// 如果 seg_id 相同，更新该行内容
const existingEntry = box.querySelector(`.entry[data-seg-id="${result.seg_id}"]`);
if (existingEntry) {
const translationDiv = existingEntry.querySelector('.translation');
translationDiv.innerHTML = result.tranContent;
}
} else {
// 如果 seg_id 不同，表示是新的行，添加新行
entry.setAttribute('data-seg-id', result.seg_id); // 设置 seg_id
entry.innerHTML = `
<div class="original">${result.context}</div>
<div class="translation">${result.tranContent}</div>
`;
box.appendChild(entry);
}
// 更新 lastSegId 以便下一次判断
lastSegId = result.seg_id;
}
async function startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const audioContext = new AudioContext({ sampleRate: 16000 });
const source = audioContext.createMediaStreamSource(stream);
const processor = audioContext.createScriptProcessor(4096, 1, 1);
const wsUrl = "ws://localhost:9191/ws?from=zh&to=en";
ws = new WebSocket(wsUrl);
ws.binaryType = "arraybuffer";
ws.onopen = () => {
console.log("WebSocket opened");
source.connect(processor);
processor.connect(audioContext.destination);
processor.onaudioprocess = (e) => {
const input = e.inputBuffer.getChannelData(0);
const buffer = new Int16Array(input.length);
for (let i = 0; i < input.length; i++) {
buffer[i] = Math.max(-1, Math.min(1, input[i])) * 0x7FFF;
}
ws.send(buffer);
};
};
ws.onmessage = (event) => {
try {
const msg = JSON.parse(event.data);
if (msg.result) {
addTranslation(msg.result);
}
} catch (e) {
console.error("Parse error:", e);
}
};
ws.onerror = (e) => console.error("WebSocket error:", e);
ws.onclose = () => {
console.log("WebSocket closed");
processor.disconnect();
source.disconnect();
};
}
</script>
</body>
</html>
|