代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>东方仙盟Whisper 语音翻译工具</title>
<style>
/* 修仙风格基础样式 */
body {
font-family: "SimSun", "Microsoft YaHei", serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #0a0a0a;
color: #e0d8c0;
line-height: 1.8;
}
/* 修仙风格标题 */
h1 {
color: #d4af37;
text-align: center;
font-size: 30px;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
border-bottom: 2px solid #8b4513;
padding-bottom: 20px;
margin-bottom: 30px;
letter-spacing: 3px;
}
h3 {
color: #c2b280;
font-size: 18px;
margin-bottom: 15px;
}
/* 按钮样式 - 古风按钮 */
button {
padding: 10px 25px;
cursor: pointer;
background-color: #8b4513;
color: #fff8e1;
border: 1px solid #d4af37;
border-radius: 4px;
font-size: 16px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
#recordBtn {
background-color: #cd5c5c; /* 暗红色（朱砂色） */
color: #fff8e1; /* 米白色文字 */
}
#recordBtn:hover {
background-color: #b34949;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
#stopBtn {
background-color: #5d875d; /* 暗绿色（墨绿） */
color: #fff8e1;
border-color: #556b2f;
display: none;
}
#stopBtn:hover {
background-color: #4e754e;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* 结果区域 - 卷轴风格 */
#result {
margin-top: 20px;
padding: 20px;
border: 1px solid #8b6e46; /* 棕褐色边框 */
border-radius: 6px;
min-height: 80px;
white-space: pre-wrap;
background-color: rgba(255, 253, 245, 0.85); /* 米黄色背景 */
box-shadow: inset 0 0 10px rgba(139, 111, 70, 0.1);
font-size: 16px;
}
/* 状态文字 */
#status {
color: #6d4c41;
margin-top: 10px;
font-size: 14px;
font-style: italic;
}
/* 底部标语 */
.footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #332b18;
text-align: center;
color: #d4af37;
font-size: 18px;
letter-spacing: 4px;
text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}
</style>
</head>
<body>
<h1>东方仙盟Whisper 语音翻译工具</h1>
<h3>关键字加强</h3>
<textarea type="text" style="width: 100%;height: 100px;" id="未来之窗prompt" placeholder="" value="39.225.207.45">酒店行业全量指令精准识别：包含办理入住、退房、清扫房间、写房卡、送物品、领物品、叫醒服务、洗衣服务、结账、会员续费、打开会员界面、会员+11位手机号、提起慧眼+11位手机号；严格兼容简繁中文，过滤所有语气词、闲聊内容，忽略无关冗余信息，仅输出与上述指令强相关的文本内容</textarea>
<br><br>
<button id="recordBtn">开启灵识录音</button>
<button id="stopBtn">关闭灵识录音</button>
<div id="status">状态：未开启灵识</div>
<h3>仙盟译解结果：</h3>
<div id="result"></div>
<!-- 底部标语 -->
<div class="footer">东方仙盟万众一心，共创星河</div>
<script>
// 配置 - 替换为你的 whisper.cpp 服务地址
const WHISPER_API_URL = 'http://localhost:20251/inference';
let mediaRecorder;
let audioChunks = [];
const recordBtn = document.getElementById('recordBtn');
const stopBtn = document.getElementById('stopBtn');
const status = document.getElementById('status');
const result = document.getElementById('result');
// 录音开始
recordBtn.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
audioChunks = [];
mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
mediaRecorder.onstop = handleAudioProcess;
mediaRecorder.start();
recordBtn.style.display = 'none';
stopBtn.style.display = 'inline-block';
status.textContent = '状态：灵识已开启，正在收录声纹...';
result.textContent = '';
} catch (err) {
alert('灵识权限申请失败：' + err.message);
status.textContent = '状态：灵识权限被拒绝';
}
});
// 录音停止
stopBtn.addEventListener('click', () => {
mediaRecorder.stop();
recordBtn.style.display = 'inline-block';
stopBtn.style.display = 'none';
status.textContent = '状态：正在解析声纹，运转仙术...';
// 停止所有音轨
mediaRecorder.stream.getTracks().forEach(track => track.stop());
});
// 音频处理与接口调用
async function handleAudioProcess() {
try {
// 将录音 blob 转为 16kHz 单声道 PCM WAV（Whisper 要求的格式）
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const wavBlob = await convertToWhisperCompatibleWav(audioBlob);
//const DRAGON_PROMPT = "酒店行业全量指令精准识别：包含办理入住、退房、清扫房间、写房卡、送物品、领物品、叫醒服务、洗衣服务、结账、会员续费、打开会员界面、会员+11位手机号、提起慧眼+11位手机号；严格兼容简繁中文，过滤所有语气词、闲聊内容，忽略无关冗余信息，仅输出与上述指令强相关的文本内容";
const DRAGON_PROMPT = $cq("#未来之窗prompt").val();
// 构造 FormData 发送请求
const formData = new FormData();
formData.append('file', wavBlob, 'recording.wav');
formData.append('temperature', '0.0');
formData.append('response_format', 'json');
formData.append("prompt", DRAGON_PROMPT); // 随音频提交
// 调用 Whisper.cpp HTTP 接口
const response = await fetch(WHISPER_API_URL, {
method: 'POST',
body: formData
});
if (!response.ok) throw new Error(`仙术调用失败：${response.status}`);
const data = await response.json();
// 解析翻译结果
const translation = data.text || '未识别到仙音';
result.textContent = translation;
status.textContent = '状态：声纹解析完成';
} catch (err) {
status.textContent = `状态：解析失败 - ${err.message}`;
result.textContent = '译解失败，请检查仙盟服务器是否启动';
}
}
// 核心：将浏览器录音转为 Whisper 兼容的 16kHz 单声道 16位 PCM WAV
async function convertToWhisperCompatibleWav(inputBlob) {
const audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
const arrayBuffer = await inputBlob.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
// 转为单声道
const monoBuffer = audioContext.createBuffer(1, audioBuffer.length, 16000);
const sourceData = audioBuffer.getChannelData(0);
const targetData = monoBuffer.getChannelData(0);
targetData.set(sourceData);
// 转为 16位 PCM 数据
const pcmData = new Int16Array(monoBuffer.length);
for (let i = 0; i < monoBuffer.length; i++) {
const sample = Math.max(-1, Math.min(1, targetData[i]));
pcmData[i] = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
}
// 构建 WAV 文件头 + 数据
const wavBuffer = new ArrayBuffer(44 + pcmData.byteLength);
const view = new DataView(wavBuffer);
writeWavHeader(view, 1, 16000, 16, pcmData.length);
new Int16Array(wavBuffer, 44).set(pcmData);
return new Blob([wavBuffer], { type: 'audio/wav' });
}
// 写入 WAV 文件头
function writeWavHeader(view, channels, sampleRate, bitsPerSample, dataLength) {
const byteRate = sampleRate * channels * bitsPerSample / 8;
const blockAlign = channels * bitsPerSample / 8;
view.setUint32(0, 0x52494646, false); // RIFF
view.setUint32(4, 36 + dataLength * 2, true); // 文件长度
view.setUint32(8, 0x57415645, false); // WAVE
view.setUint32(12, 0x666d7420, false); // fmt
view.setUint32(16, 16, true); // 子块长度
view.setUint16(20, 1, true); // 编码格式 1=PCM
view.setUint16(22, channels, true); // 声道数
view.setUint32(24, sampleRate, true); // 采样率
view.setUint32(28, byteRate, true); // 字节率
view.setUint16(32, blockAlign, true); // 块对齐
view.setUint16(34, bitsPerSample, true); // 位深度
view.setUint32(36, 0x64617461, false); // data
view.setUint32(40, dataLength * 2, true); // 数据长度
}
</script>
</body>
</html>在东方仙盟广袤无垠的世界里，ASR（Automatic Speech Recognition，自动语音识别）技术宛如一种神奇的 "灵识传音" 仙术，正悄然改变着商业与娱乐领域的格局，为其带来前所未有的便捷与奇妙体验。其中，基于 Whisper 的语音识别应用，更是如同仙盟中的神秘法器，发挥着关键作用。
ASR 语音识别在商业应用中的奇妙之处
- **酒店行业：宾客服务的 "仙盟灵侍"**在酒店行业，ASR 语音识别就像贴心的 "仙盟灵侍"，时刻准备为宾客提供服务。通过语音指令，宾客能轻松实现办理入住、退房、清扫房间等一系列操作，无需再手动填写繁琐的表格或寻找工作人员。例如，当宾客踏入酒店，只需说出 "办理入住"，如同向灵侍传达旨意，系统就能迅速响应，为其高效办理入住手续。这不仅提升了宾客的满意度，还极大地提高了酒店的运营效率，让酒店服务如同仙法施展般流畅快捷。
- **零售行业：购物体验的 "仙盟指引"**在零售领域，ASR 语音识别扮演着 "仙盟指引" 的角色。消费者在购物过程中，可通过语音询问商品信息、查询库存，甚至完成支付。想象一下，在琳琅满目的仙盟集市中，消费者说出 "我想找一款适合修仙的灵衣，有没有库存？"，系统便能如同仙盟智者般迅速给出准确答复，引导消费者完成购物。这种智能化的购物体验，不仅增加了消费者的购物乐趣，还能帮助商家更好地了解消费者需求，提升销售业绩。
- **金融行业：财富管理的 "仙盟护财使者"**在金融行业，ASR 语音识别如同守护财富的 "仙盟护财使者"。客户可以通过语音指令进行账户查询、转账汇款等操作，无需手动输入复杂的账号和密码，既提高了操作的便捷性，又增强了安全性。比如客户说 "查询我的账户余额"，系统如同忠诚的护财使者，迅速准确地为客户提供账户信息，让财富管理变得轻松安心，如同仙盟法宝守护着客户的财富。
Whisper 在 ASR 语音识别中的实现原理
Whisper 就像是东方仙盟中一本神秘而强大的 "仙法秘籍"，蕴含着语音识别的核心奥秘。它通过对大量语音数据的深度学习，构建起复杂而精准的模型，如同仙盟高手修炼高深功法，掌握语音信号与文本之间的微妙联系。
当用户发出语音指令时，Whisper 首先将语音信号转化为数字信号，这就好比把凡间的声音转化为仙盟能够理解的灵语。接着，它对这些信号进行特征提取，寻找其中的关键特征，如同从灵语中提炼出关键信息。然后，通过训练好的模型对这些特征进行分析和匹配，最终将语音准确地转换为文本，恰似仙法将灵语解读为凡人可懂的文字。
初学者如何踏上 ASR 语音识别的 "修仙之路"
- 领悟 "灵识传音" 奥秘：初学者要像初入仙盟的小仙童，先深入理解 ASR 语音识别的基本原理，研读相关资料，如同翻阅仙盟的秘籍，了解语音信号处理、声学模型、语言模型等概念，明白语音是如何一步步转化为文本的，为后续学习打下坚实的基础。
- 掌握 "仙法" 工具：学习使用相关的开发工具和平台，如与 Whisper 相关的库和框架，这就如同获取仙盟中的法宝。掌握如何调用这些工具，以及它们的基本功能和使用方法，通过实践一些简单的示例代码，熟悉工具的操作，逐渐学会运用这些 "法宝" 施展 "灵识传音" 之术。
- 修炼 "灵语" 技能：积累语音数据处理的经验，就像在仙盟中修炼独特的灵语技能。学习如何采集、标注和预处理语音数据，提高数据质量，让模型能够更好地学习和理解语音信息。这一步如同对灵语进行精炼和优化，使其更准确地传达意图。
- 模拟 "仙盟试炼"：通过实际项目进行练习，模拟各种商业和娱乐场景，如构建一个简单的酒店语音服务系统或语音交互游戏，如同在仙盟的试炼场中接受考验。在实践中不断调试和优化代码，解决遇到的问题，积累经验，提升自己的 "灵识传音" 功力。
- 借鉴 "仙盟智慧"：关注行业动态和最新技术成果，借鉴其他开发者的经验和优秀案例，如同汲取仙盟前辈的智慧。参加技术论坛、学习开源项目，不断拓宽自己的视野，学习新的算法和技巧，进一步提升自己在 ASR 语音识别领域的能力，在 "修仙之路" 上不断进阶。
在娱乐领域，ASR 语音识别也大放异彩。例如在沉浸式的修仙主题游戏中，玩家可以通过语音与游戏角色进行自然交互，发出指令 "施展烈焰焚天法术"，让游戏体验更加身临其境，仿佛置身于真实的仙盟战斗场景中。这不仅增加了游戏的趣味性和互动性，还为娱乐产业带来了新的发展方向。
总之，ASR 语音识别在商业与娱乐领域的应用，借助 Whisper 这样强大的工具，如同东方仙盟的 "灵识传音" 仙术，为各个行业带来了无限可能。对于初学者来说，这是一条充满挑战与惊喜的 "修仙之路"，只要怀揣探索的热情和坚定的信念，定能在这个领域取得非凡成就，为商业与娱乐世界增添奇幻色彩。
阿雪技术观
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology