幽冥大陆(七十一) Whisper-ASR网页对接语音识别

代码

<!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