基于 Tailwind CSS + Font Awesome + Web Audio API 实现多语言医疗语音播报系统（中英西）
1、项目简介
本项目是一个基于 Web 技术栈开发的多语言医疗语音控制替代系统，旨在通过预录语音或合成语音替代测试人员在测试过程中的口语指令，便于再减轻测试人员在多语音测试情况下口语较弱的缺点。系统支持中文、英文、西班牙语三种语言，特别针对医疗内窥镜等设备的控制场景进行优化。
2、核心功能
1）三语言支持：中文、英文、西班牙语界面切换与语音播报
2）专业医疗术语：涵盖腹腔镜、胸腔镜、宫腔镜等各类内窥镜控制指令
3）图像调节控制：白平衡、色彩等级、放大缩小、图像冻结等参数调节
4）荧光模式切换：支持多种荧光模式的语音控制，满足不同手术需求
5）实时状态反馈：播放状态显示、时间显示、音量控制
3、技术特点
1）响应式设计：基于 Tailwind CSS v3 构建，适配桌面端、平板和移动设备，可以通过已部署的nodejs服务进行局域网访问，nodejs可参照我之前写物品借用登记表系统。
2）双语音方案：Web Audio API 预加载播放 + Web Speech API 降级合成（用于当前预知语音没有可采用Web Speech API进行播放）
3）性能优化：音频缓存机制、预加载策略、播放状态管理
4）用户体验：平滑动画过渡、悬停效果、实时状态更新、键盘快捷键支持
4、技术栈
1）前端框架：纯 HTML5 + CSS3 + JavaScript
2）样式框架：Tailwind CSS v3
3）图标库：Font Awesome 6.5.1
4）音频处理：Web Audio API + Web Speech API
5)兼容性：支持主流现代浏览器，响应式适配多种设备
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>戴维_C5_中英西_单点</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/v4-shims.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#7C3AED',
secondary: '#A855F7',
accent: '#C084FC',
success: '#10B981',
warning: '#F59E0B',
danger: '#EF4444',
dark: '#1F2937',
light: '#F8FAFC'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'bounce-slow': 'bounce 2s infinite',
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
'glow': 'glow 1.5s ease-in-out infinite alternate',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
},
glow: {
'0%': { boxShadow: '0 0 20px rgba(124, 58, 237, 0.5)' },
'100%': { boxShadow: '0 0 30px rgba(124, 58, 237, 0.8), 0 0 40px rgba(124, 58, 237, 0.3)' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(135deg, #7C3AED, #A855F7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.btn-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
}
.btn-active {
animation: glow 1.5s ease-in-out infinite alternate;
}
.section-transition {
transition: all 0.5s ease-in-out;
}
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-br from-purple-50 via-white to-purple-100 font-sans">
<!-- Header -->
<header class="bg-gradient-to-r from-primary to-secondary text-white shadow-2xl relative overflow-hidden">
<div class="absolute inset-0 bg-black opacity-10 pattern-dots"></div>
<div class="container mx-auto px-4 py-6 relative z-10">
<div class="flex flex-col md:flex-row items-center justify-center gap-4">
<div class="bg-white bg-opacity-20 p-3 rounded-full">
<i class="fa fa-heartbeat text-3xl text-white animate-pulse-slow"></i>
</div>
<div class="text-center">
<h1 class="text-3xl md:text-4xl font-bold gradient-text bg-white">
今海_C5_中英西_单点语音播报按钮
</h1>
<h2 class="text-lg md:text-xl font-light text-white mt-1">
Jinhai C5 Voice System (ZH/EN/ES)
</h2>
</div>
</div>
</div>
</header>
<!-- Control Panel -->
<div class="container mx-auto px-4 py-8">
<!-- Language Toggle -->
<div class="flex justify-center mb-8 flex-wrap gap-2">
<div class="bg-white rounded-full shadow-lg p-1 inline-flex">
<button onclick="showSection('chinese')" id="chineseBtn" class="px-5 py-2 rounded-full font-semibold transition-all duration-300 bg-primary text-white text-sm md:text-base">
<i class="fa fa-language mr-1"></i>中文
</button>
<button onclick="showSection('english')" id="englishBtn" class="px-5 py-2 rounded-full font-semibold transition-all duration-300 text-gray-600 hover:bg-gray-100 text-sm md:text-base">
<i class="fa fa-globe mr-1"></i>English
</button>
<button onclick="showSection('spanish')" id="spanishBtn" class="px-5 py-2 rounded-full font-semibold transition-all duration-300 text-gray-600 hover:bg-gray-100 text-sm md:text-base">
<i class="fa fa-flag mr-1"></i>Español
</button>
</div>
</div>
<!-- Status and Controls -->
<div class="bg-white rounded-2xl shadow-xl p-4 md:p-6 mb-8 glass-effect">
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<!-- Status Display -->
<div class="flex items-center space-x-2 w-full md:w-auto">
<div class="w-3 h-3 bg-success rounded-full animate-pulse"></div>
<div id="statusDisplay" class="text-base font-medium text-gray-700">
就绪 - 点击按钮播放语音
</div>
<div id="timeDisplay" class="text-xs text-gray-500 ml-auto md:ml-4">
00:00:00
</div>
</div>
<!-- Volume Control and Stop Button -->
<div class="flex items-center space-x-3 w-full md:w-auto flex-wrap gap-3">
<div class="flex items-center space-x-1 flex-1 md:flex-none">
<i class="fa fa-volume-up text-primary text-sm"></i>
<input type="range" id="volumeSlider" min="0" max="100" value="80"
class="w-24 md:w-32 h-2 bg-gradient-to-r from-primary to-secondary rounded-lg appearance-none cursor-pointer slider">
<span id="volumeDisplay" class="text-xs font-medium text-gray-700">80%</span>
</div>
<button onclick="stopAllAudio()"
class="bg-danger hover:bg-red-600 text-white px-4 py-2 rounded-full font-semibold transition-all duration-300 btn-hover shadow-lg text-sm md:text-base">
<i class="fa fa-stop mr-1"></i>停止所有
</button>
</div>
</div>
</div>
<!-- Chinese Section -->
<div id="chineseSection" class="section-transition">
<h3 class="text-xl md:text-2xl font-bold text-center mb-6 gradient-text">
<i class="fa fa-language mr-2"></i>中文语音控制
</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
<!-- 基础控制 -->
<button onclick="playVoice('zh_戴维医疗.wav', '戴维医疗')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-hospital-o text-xl mb-2 block"></i>
戴维医疗
</button>
<!-- 内窥镜控制 -->
<button onclick="playVoice('zh_打开腹腔镜.wav', '打开腹腔镜')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user-md text-xl mb-2 block"></i>
打开腹腔镜
</button>
<button onclick="playVoice('zh_打开胸腔镜.wav', '打开胸腔镜')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-heart text-xl mb-2 block"></i>
打开胸腔镜
</button>
<button onclick="playVoice('zh_打开宫腔镜.wav', '打开宫腔镜')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-female text-xl mb-2 block"></i>
打开宫腔镜
</button>
<button onclick="playVoice('zh_打开泌尿镜.wav', '打开泌尿镜')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-male text-xl mb-2 block"></i>
打开泌尿镜
</button>
<button onclick="playVoice('zh_打开关节镜.wav', '打开关节镜')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-wheelchair text-xl mb-2 block"></i>
打开关节镜
</button>
<button onclick="playVoice('zh_打开耳鼻喉.wav', '打开耳鼻喉')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-stethoscope text-xl mb-2 block"></i>
打开耳鼻喉
</button>
<!-- 图像控制 -->
<button onclick="playVoice('zh_打开白平衡.wav', '打开白平衡')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-sun-o text-xl mb-2 block"></i>
打开白平衡
</button>
<button onclick="playVoice('zh_打开色彩等级.wav', '打开色彩等级')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
打开色彩等级
</button>
<button onclick="playVoice('zh_增加一点.wav', '增加一点')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
增加一点
</button>
<button onclick="playVoice('zh_减少一点.wav', '减少一点')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
减少一点
</button>
<button onclick="playVoice('zh_打开放大缩小.wav', '打开放大缩小')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search text-xl mb-2 block"></i>
打开放大缩小
</button>
<button onclick="playVoice('zh_放大一点.wav', '放大一点')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search-plus text-xl mb-2 block"></i>
放大一点
</button>
<button onclick="playVoice('zh_缩小一点.wav', '缩小一点')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search-minus text-xl mb-2 block"></i>
缩小一点
</button>
<button onclick="playVoice('zh_打开图像冻结.wav', '打开图像冻结')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-pause text-xl mb-2 block"></i>
打开图像冻结
</button>
<button onclick="playVoice('zh_关闭图像冻结.wav', '关闭图像冻结')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-play text-xl mb-2 block"></i>
关闭图像冻结
</button>
<button onclick="playVoice('zh_打开图像翻转.wav', '打开图像翻转')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-exchange text-xl mb-2 block"></i>
打开图像翻转
</button>
<button onclick="playVoice('zh_翻转.wav', '翻转')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-refresh text-xl mb-2 block"></i>
翻转
</button>
<button onclick="playVoice('zh_打开去摩尔纹.wav', '打开去摩尔纹')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-ban text-xl mb-2 block"></i>
打开去摩尔纹
</button>
<button onclick="playVoice('zh_关闭去摩尔纹.wav', '关闭去摩尔纹')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-times text-xl mb-2 block"></i>
关闭去摩尔纹
</button>
<button onclick="playVoice('zh_打开宽动态.wav', '打开宽动态')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-expand text-xl mb-2 block"></i>
打开宽动态
</button>
<button onclick="playVoice('zh_关闭宽动态.wav', '关闭宽动态')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-compress text-xl mb-2 block"></i>
关闭宽动态
</button>
<button onclick="playVoice('zh_打开暗区增强.wav', '打开暗区增强')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
打开暗区增强
</button>
<button onclick="playVoice('zh_关闭暗区增强.wav', '关闭暗区增强')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
关闭暗区增强
</button>
<!-- 曝光控制 -->
<button onclick="playVoice('zh_打开曝光补偿.wav', '打开曝光补偿')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-sun-o text-xl mb-2 block"></i>
打开曝光补偿
</button>
<button onclick="playVoice('zh_关闭曝光补偿.wav', '关闭曝光补偿')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-moon-o text-xl mb-2 block"></i>
关闭曝光补偿
</button>
<button onclick="playVoice('zh_打开除烟功能.wav', '打开除烟功能')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-cloud text-xl mb-2 block"></i>
打开除烟功能
</button>
<button onclick="playVoice('zh_关闭除烟功能.wav', '关闭除烟功能')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-cloud text-xl mb-2 block"></i>
关闭除烟功能
</button>
<!-- 色彩调节 -->
<button onclick="playVoice('zh_打开色彩增强.wav', '打开色彩增强')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-paint-brush text-xl mb-2 block"></i>
打开色彩增强
</button>
<button onclick="playVoice('zh_关闭色彩增强.wav', '关闭色彩增强')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-eraser text-xl mb-2 block"></i>
关闭色彩增强
</button>
<button onclick="playVoice('zh_红色增加一点.wav', '红色增加一点')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
红色增加一点
</button>
<button onclick="playVoice('zh_红色减少一点.wav', '红色减少一点')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
红色减少一点
</button>
<button onclick="playVoice('zh_红黄增加一点.wav', '红黄增加一点')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
红黄增加一点
</button>
<button onclick="playVoice('zh_红黄减少一点.wav', '红黄减少一点')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
红黄减少一点
</button>
<button onclick="playVoice('zh_黄色增加一点.wav', '黄色增加一点')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
黄色增加一点
</button>
<button onclick="playVoice('zh_黄色减少一点.wav', '黄色减少一点')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
黄色减少一点
</button>
<!-- 荧光控制 -->
<button onclick="playVoice('zh_打开荧光调节.wav', '打开荧光调节')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-magic text-xl mb-2 block"></i>
打开荧光调节
</button>
<button onclick="playVoice('zh_灵敏度增加一点.wav', '灵敏度增加一点')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
灵敏度增加一点
</button>
<button onclick="playVoice('zh_灵敏度减少一点.wav', '灵敏度减少一点')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
灵敏度减少一点
</button>
<button onclick="playVoice('zh_增益增加一点.wav', '增益增加一点')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
增益增加一点
</button>
<button onclick="playVoice('zh_增益减少一点.wav', '增益减少一点')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
增益减少一点
</button>
<button onclick="playVoice('zh_打开热力荧光.wav', '打开热力荧光')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-fire text-xl mb-2 block"></i>
打开热力荧光
</button>
<button onclick="playVoice('zh_关闭热力荧光.wav', '关闭热力荧光')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-snowflake-o text-xl mb-2 block"></i>
关闭热力荧光
</button>
<button onclick="playVoice('zh_打开多彩荧光.wav', '打开多彩荧光')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-bullseye text-xl mb-2 block"></i>
打开多彩荧光
</button>
<button onclick="playVoice('zh_打开红色荧光.wav', '打开红色荧光')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
打开红色荧光
</button>
<button onclick="playVoice('zh_打开绿色荧光.wav', '打开绿色荧光')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
打开绿色荧光
</button>
<button onclick="playVoice('zh_打开蓝色荧光.wav', '打开蓝色荧光')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
打开蓝色荧光
</button>
<button onclick="playVoice('zh_打开黄色荧光.wav', '打开黄色荧光')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
打开黄色荧光
</button>
<button onclick="playVoice('zh_打开青色荧光.wav', '打开青色荧光')"
class="bg-gradient-to-br from-cyan-500 to-cyan-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
打开青色荧光
</button>
<button onclick="playVoice('zh_打开玫红色荧光.wav', '打开玫红色荧光')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
打开玫红色荧光
</button>
</div>
</div>
<!-- English Section -->
<div id="englishSection" class="section-transition hidden">
<h3 class="text-xl md:text-2xl font-bold text-center mb-6 gradient-text">
<i class="fa fa-globe mr-2"></i>English Voice Control
</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
<!-- Basic Control -->
<button onclick="playVoice('en_David_Medical.wav', 'David Medical')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-hospital-o text-xl mb-2 block"></i>
Jinhai Medical<br><span class="text-xs opacity-90">戴维医疗</span>
</button>
<!-- Endoscope Control -->
<button onclick="playVoice('en_Turn_on_laparoscope.wav', 'Turn on laparoscope')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user-md text-xl mb-2 block"></i>
Turn on laparoscope<br><span class="text-xs opacity-90">打开腹腔镜</span>
</button>
<button onclick="playVoice('en_Turn_on_thoracoscope.wav', 'Turn on thoracoscope')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-heart text-xl mb-2 block"></i>
Turn on thoracoscope<br><span class="text-xs opacity-90">打开胸腔镜</span>
</button>
<button onclick="playVoice('en_Turn_on_hysteroscope.wav', 'Turn on hysteroscope')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-female text-xl mb-2 block"></i>
Turn on hysteroscope<br><span class="text-xs opacity-90">打开宫腔镜</span>
</button>
<button onclick="playVoice('en_Turn_on_uroscope.wav', 'Turn on uroscope')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-male text-xl mb-2 block"></i>
Turn on uroscope<br><span class="text-xs opacity-90">打开泌尿镜</span>
</button>
<button onclick="playVoice('en_Turn_on_arthroscope.wav', 'Turn on arthroscope')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-wheelchair text-xl mb-2 block"></i>
Turn on arthroscope<br><span class="text-xs opacity-90">打开关节镜</span>
</button>
<button onclick="playVoice('en_Turn_on_ENT.wav', 'Turn on ENT')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-stethoscope text-xl mb-2 block"></i>
Turn on ENT<br><span class="text-xs opacity-90">打开耳鼻喉</span>
</button>
<!-- Image Control -->
<button onclick="playVoice('en_Open_White_Balance.wav', 'Open White Balance')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-sun-o text-xl mb-2 block"></i>
Open White Balance<br><span class="text-xs opacity-90">打开白平衡</span>
</button>
<button onclick="playVoice('en_Open_Color_Level.wav', 'Open Color Level')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
Open Color Level<br><span class="text-xs opacity-90">打开色彩等级</span>
</button>
<button onclick="playVoice('en_Increase_a_Bit.wav', 'Increase a Bit')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Increase a Bit<br><span class="text-xs opacity-90">增加一点</span>
</button>
<button onclick="playVoice('en_Decrease_a_Bit.wav', 'Decrease a Bit')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Decrease a Bit<br><span class="text-xs opacity-90">减少一点</span>
</button>
<button onclick="playVoice('en_Open_Zoom.wav', 'Open Zoom')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search text-xl mb-2 block"></i>
Open Zoom<br><span class="text-xs opacity-90">打开放大缩小</span>
</button>
<button onclick="playVoice('en_Zoom_In_a_Bit.wav', 'Zoom In a Bit')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search-plus text-xl mb-2 block"></i>
Zoom In a Bit<br><span class="text-xs opacity-90">放大一点</span>
</button>
<button onclick="playVoice('en_Zoom_Out_a_Bit.wav', 'Zoom Out a Bit')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search-minus text-xl mb-2 block"></i>
Zoom Out a Bit<br><span class="text-xs opacity-90">缩小一点</span>
</button>
<button onclick="playVoice('en_Open_Image_Freeze.wav', 'Open Image Freeze')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-pause text-xl mb-2 block"></i>
Open Image Freeze<br><span class="text-xs opacity-90">打开图像冻结</span>
</button>
<button onclick="playVoice('en_Close_Image_Freeze.wav', 'Close Image Freeze')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-play text-xl mb-2 block"></i>
Close Image Freeze<br><span class="text-xs opacity-90">关闭图像冻结</span>
</button>
<button onclick="playVoice('en_Open_Image_Flip.wav', 'Open Image Flip')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-exchange text-xl mb-2 block"></i>
Open Image Flip<br><span class="text-xs opacity-90">打开图像翻转</span>
</button>
<button onclick="playVoice('en_Flip.wav', 'Flip')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-refresh text-xl mb-2 block"></i>
Flip<br><span class="text-xs opacity-90">翻转</span>
</button>
<button onclick="playVoice('en_Open_Moire_pattern.wav', 'Open Moire pattern')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-ban text-xl mb-2 block"></i>
Open Moire pattern<br><span class="text-xs opacity-90">打开摩尔纹</span>
</button>
<button onclick="playVoice('en_Close_Moire_pattern.wav', 'Close Moire pattern')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-times text-xl mb-2 block"></i>
Close Moire pattern<br><span class="text-xs opacity-90">关闭摩尔纹</span>
</button>
<button onclick="playVoice('en_Open_Wide_Dynamic_Range.wav', 'Open Wide Dynamic Range')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-expand text-xl mb-2 block"></i>
Open Wide Dynamic Range<br><span class="text-xs opacity-90">打开宽动态</span>
</button>
<button onclick="playVoice('en_Close_Wide_Dynamic_Range.wav', 'Close Wide Dynamic Range')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-compress text-xl mb-2 block"></i>
Close Wide Dynamic Range<br><span class="text-xs opacity-90">关闭宽动态</span>
</button>
<button onclick="playVoice('en_Open_Dark_Area_Enhancement.wav', 'Open Dark Area Enhancement')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
Open Dark Area Enhancement<br><span class="text-xs opacity-90">打开暗区增强</span>
</button>
<button onclick="playVoice('en_Close_Dark_Area_Enhancement.wav', 'Close Dark Area Enhancement')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
Close Dark Area Enhancement<br><span class="text-xs opacity-90">关闭暗区增强</span>
</button>
<!-- Exposure Control -->
<button onclick="playVoice('en_Open_Exposure_Compensation.wav', 'Open Exposure Compensation')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-sun-o text-xl mb-2 block"></i>
Open Exposure Compensation<br><span class="text-xs opacity-90">打开曝光补偿</span>
</button>
<button onclick="playVoice('en_Close_Exposure_Compensation.wav', 'Close Exposure Compensation')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-moon-o text-xl mb-2 block"></i>
Close Exposure Compensation<br><span class="text-xs opacity-90">关闭曝光补偿</span>
</button>
<button onclick="playVoice('en_Open_Smoke_Removal.wav', 'Open Smoke Removal')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-cloud text-xl mb-2 block"></i>
Open Smoke Removal<br><span class="text-xs opacity-90">打开除烟功能</span>
</button>
<button onclick="playVoice('en_Close_Smoke_Removal.wav', 'Close Smoke Removal')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-cloud text-xl mb-2 block"></i>
Close Smoke Removal<br><span class="text-xs opacity-90">关闭除烟功能</span>
</button>
<!-- Color Adjustment -->
<button onclick="playVoice('en_Open_Color_Enhancement.wav', 'Open Color Enhancement')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-paint-brush text-xl mb-2 block"></i>
Open Color Enhancement<br><span class="text-xs opacity-90">打开色彩增强</span>
</button>
<button onclick="playVoice('en_Close_Color_Enhancement.wav', 'Close Color Enhancement')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-eraser text-xl mb-2 block"></i>
Close Color Enhancement<br><span class="text-xs opacity-90">关闭色彩增强</span>
</button>
<button onclick="playVoice('en_Increase_Red_a_Bit.wav', 'Increase Red a Bit')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Increase Red a Bit<br><span class="text-xs opacity-90">红色增加一点</span>
</button>
<button onclick="playVoice('en_Decrease_Red_a_Bit.wav', 'Decrease Red a Bit')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Decrease Red a Bit<br><span class="text-xs opacity-90">红色减少一点</span>
</button>
<button onclick="playVoice('en_Increase_Red-Yellow_a_Bit.wav', 'Increase Red-Yellow a Bit')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Increase Red-Yellow a Bit<br><span class="text-xs opacity-90">红黄增加一点</span>
</button>
<button onclick="playVoice('en_Decrease_Red-Yellow_a_Bit.wav', 'Decrease Red-Yellow a Bit')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Decrease Red-Yellow a Bit<br><span class="text-xs opacity-90">红黄减少一点</span>
</button>
<button onclick="playVoice('en_Increase_Yellow_a_Bit.wav', 'Increase Yellow a Bit')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Increase Yellow a Bit<br><span class="text-xs opacity-90">黄色增加一点</span>
</button>
<button onclick="playVoice('en_Decrease_Yellow_a_Bit.wav', 'Decrease Yellow a Bit')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Decrease Yellow a Bit<br><span class="text-xs opacity-90">黄色减少一点</span>
</button>
<!-- Fluorescence Control -->
<button onclick="playVoice('en_Open_Fluorescence_Adjustment.wav', 'Open Fluorescence Adjustment')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-magic text-xl mb-2 block"></i>
Open Fluorescence Adjustment<br><span class="text-xs opacity-90">打开荧光调节</span>
</button>
<button onclick="playVoice('en_Increase_Sensitivity_a_Bit.wav', 'Increase Sensitivity a Bit')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Increase Sensitivity a Bit<br><span class="text-xs opacity-90">灵敏度增加一点</span>
</button>
<button onclick="playVoice('en_Decrease_Sensitivity_a_Bit.wav', 'Decrease Sensitivity a Bit')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Decrease Sensitivity a Bit<br><span class="text-xs opacity-90">灵敏度减少一点</span>
</button>
<button onclick="playVoice('en_Increase_Gain_a_Bit.wav', 'Increase Gain a Bit')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Increase Gain a Bit<br><span class="text-xs opacity-90">增益增加一点</span>
</button>
<button onclick="playVoice('en_Decrease_Gain_a_Bit.wav', 'Decrease Gain a Bit')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Decrease Gain a Bit<br><span class="text-xs opacity-90">增益减少一点</span>
</button>
<button onclick="playVoice('en_Open_Thermal_Fluorescence.wav', 'Open Thermal Fluorescence')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-fire text-xl mb-2 block"></i>
Open Thermal Fluorescence<br><span class="text-xs opacity-90">打开热力荧光</span>
</button>
<button onclick="playVoice('en_Close_Thermal_Fluorescence.wav', 'Close Thermal Fluorescence')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-snowflake-o text-xl mb-2 block"></i>
Close Thermal Fluorescence<br><span class="text-xs opacity-90">关闭热力荧光</span>
</button>
<button onclick="playVoice('en_Open_Multi-Color_Fluorescence.wav', 'Open Multi-Color Fluorescence')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-bullseye text-xl mb-2 block"></i>
Open Multi-Color Fluorescence<br><span class="text-xs opacity-90">打开多彩荧光</span>
</button>
<button onclick="playVoice('en_Open_Red_Fluorescence.wav', 'Open Red Fluorescence')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Open Red Fluorescence<br><span class="text-xs opacity-90">打开红色荧光</span>
</button>
<button onclick="playVoice('en_Open_Green_Fluorescence.wav', 'Open Green Fluorescence')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Open Green Fluorescence<br><span class="text-xs opacity-90">打开绿色荧光</span>
</button>
<button onclick="playVoice('en_Open_Blue_Fluorescence.wav', 'Open Blue Fluorescence')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Open Blue Fluorescence<br><span class="text-xs opacity-90">打开蓝色荧光</span>
</button>
<button onclick="playVoice('en_Open_Yellow_Fluorescence.wav', 'Open Yellow Fluorescence')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Open Yellow Fluorescence<br><span class="text-xs opacity-90">打开黄色荧光</span>
</button>
<button onclick="playVoice('en_Open_Cyan_Fluorescence.wav', 'Open Cyan Fluorescence')"
class="bg-gradient-to-br from-cyan-500 to-cyan-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Open Cyan Fluorescence<br><span class="text-xs opacity-90">打开青色荧光</span>
</button>
<button onclick="playVoice('en_Open_Magenta_Fluorescence.wav', 'Open Magenta Fluorescence')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Open Magenta Fluorescence<br><span class="text-xs opacity-90">打开玫红色荧光</span>
</button>
</div>
</div>
<!-- Spanish Section -->
<div id="spanishSection" class="section-transition hidden">
<h3 class="text-xl md:text-2xl font-bold text-center mb-6 gradient-text">
<i class="fa fa-flag mr-2"></i>Control de Voz en Español
</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
<!-- Control Básico -->
<button onclick="playVoice('es_David_Medical.WAV', 'David Medical')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-hospital-o text-xl mb-2 block"></i>
Jinhai Medical<br><span class="text-xs opacity-90">戴维医疗</span>
</button>
<!-- Control de Usuario -->
<button onclick="playVoice('es_Abrir_Usuario_1.wav', 'Abrir Usuario 1')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user text-xl mb-2 block"></i>
Abrir Usuario 1<br><span class="text-xs opacity-90">打开用户1</span>
</button>
<button onclick="playVoice('es_Abrir_Usuario_2.wav', 'Abrir Usuario 2')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user text-xl mb-2 block"></i>
Abrir Usuario 2<br><span class="text-xs opacity-90">打开用户2</span>
</button>
<button onclick="playVoice('es_Abrir_Usuario_3.wav', 'Abrir Usuario 3')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user text-xl mb-2 block"></i>
Abrir Usuario 3<br><span class="text-xs opacity-90">打开用户3</span>
</button>
<button onclick="playVoice('es_Abrir_Usuario_4.wav', 'Abrir Usuario 4')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user text-xl mb-2 block"></i>
Abrir Usuario 4<br><span class="text-xs opacity-90">打开用户4</span>
</button>
<button onclick="playVoice('es_Abrir_Usuario_5.wav', 'Abrir Usuario 5')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user text-xl mb-2 block"></i>
Abrir Usuario 5<br><span class="text-xs opacity-90">打开用户5</span>
</button>
<button onclick="playVoice('es_Abrir_Usuario_6.wav', 'Abrir Usuario 6')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-user text-xl mb-2 block"></i>
Abrir Usuario 6<br><span class="text-xs opacity-90">打开用户6</span>
</button>
<!-- Control de Imagen -->
<button onclick="playVoice('es_Abrir_Balance_de_Blancos.wav', 'Abrir Balance de Blancos')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-sun-o text-xl mb-2 block"></i>
Abrir Balance de Blancos<br><span class="text-xs opacity-90">打开白平衡</span>
</button>
<button onclick="playVoice('es_Abrir_Nivel_de_Color.wav', 'Abrir Nivel de Color')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
Abrir Nivel de Color<br><span class="text-xs opacity-90">打开色彩等级</span>
</button>
<button onclick="playVoice('es_Aumentar_un_poco.wav', 'Aumentar un poco')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Aumentar un poco<br><span class="text-xs opacity-90">增加一点</span>
</button>
<button onclick="playVoice('es_Reducir_un_poco.wav', 'Reducir un poco')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Reducir un poco<br><span class="text-xs opacity-90">减少一点</span>
</button>
<button onclick="playVoice('es_Abrir_Zoom.wav', 'Abrir Zoom')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search text-xl mb-2 block"></i>
Abrir Zoom<br><span class="text-xs opacity-90">打开放大缩小</span>
</button>
<button onclick="playVoice('es_Ampliar_un_poco.wav', 'Ampliar un poco')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search-plus text-xl mb-2 block"></i>
Ampliar un poco<br><span class="text-xs opacity-90">放大一点</span>
</button>
<button onclick="playVoice('es_Reducir_un_poco.wav', 'Reducir un poco')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-search-minus text-xl mb-2 block"></i>
Reducir un poco<br><span class="text-xs opacity-90">缩小一点</span>
</button>
<button onclick="playVoice('es_Abrir_Congelacion_de_Imagen.wav', 'Abrir Congelacion de Imagen')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-pause text-xl mb-2 block"></i>
Abrir Congelacion de Imagen<br><span class="text-xs opacity-90">打开图像冻结</span>
</button>
<button onclick="playVoice('es_Cerrar_Congelacion_de_Imagen.wav', 'Cerrar Congelacion de Imagen')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-play text-xl mb-2 block"></i>
Cerrar Congelacion de Imagen<br><span class="text-xs opacity-90">关闭图像冻结</span>
</button>
<button onclick="playVoice('es_Abrir_Volteo_de_Imagen.wav', 'Abrir Volteo de Imagen')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-exchange text-xl mb-2 block"></i>
Abrir Volteo de Imagen<br><span class="text-xs opacity-90">打开图像翻转</span>
</button>
<button onclick="playVoice('es_Voltear.wav', 'Voltear')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-refresh text-xl mb-2 block"></i>
Voltear<br><span class="text-xs opacity-90">翻转</span>
</button>
<button onclick="playVoice('es_Abrir_Patron_de_Moire.wav', 'Abrir Patron de Moire')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-ban text-xl mb-2 block"></i>
Abrir Patron de Moire<br><span class="text-xs opacity-90">打开摩尔纹</span>
</button>
<button onclick="playVoice('es_Cerrar_Patron_de_Moire.wav', 'Cerrar Patron de Moire')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-times text-xl mb-2 block"></i>
Cerrar Patron de Moire<br><span class="text-xs opacity-90">关闭摩尔纹</span>
</button>
<button onclick="playVoice('es_Abrir_Rango_Dinamico_Amplio.wav', 'Abrir Rango Dinamico Amplio')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-expand text-xl mb-2 block"></i>
Abrir Rango Dinamico Amplio<br><span class="text-xs opacity-90">打开宽动态</span>
</button>
<button onclick="playVoice('es_Cerrar_Rango_Dinamico_Amplio.wav', 'Cerrar Rango Dinamico Amplio')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-compress text-xl mb-2 block"></i>
Cerrar Rango Dinamico Amplio<br><span class="text-xs opacity-90">关闭宽动态</span>
</button>
<button onclick="playVoice('es_Abrir_Mejora_de_Zonas_Oscuras.wav', 'Abrir Mejora de Zonas Oscuras')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
Abrir Mejora de Zonas Oscuras<br><span class="text-xs opacity-90">打开暗区增强</span>
</button>
<button onclick="playVoice('es_Cerrar_Mejora_de_Zonas_Oscuras.wav', 'Cerrar Mejora de Zonas Oscuras')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-adjust text-xl mb-2 block"></i>
Cerrar Mejora de Zonas Oscuras<br><span class="text-xs opacity-90">关闭暗区增强</span>
</button>
<!-- Control de Exposicion -->
<button onclick="playVoice('es_Abrir_Compensacion_de_Exposicion.wav', 'Abrir Compensacion de Exposicion')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-sun-o text-xl mb-2 block"></i>
Abrir Compensacion de Exposicion<br><span class="text-xs opacity-90">打开曝光补偿</span>
</button>
<button onclick="playVoice('es_Cerrar_Compensacion_de_Exposicion.wav', 'Cerrar Compensacion de Exposicion')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-moon-o text-xl mb-2 block"></i>
Cerrar Compensacion de Exposicion<br><span class="text-xs opacity-90">关闭曝光补偿</span>
</button>
<button onclick="playVoice('es_Abrir_Funcion_de_Eliminacion_de_Humo.wav', 'Abrir Funcion de Eliminacion de Humo')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-cloud text-xl mb-2 block"></i>
Abrir Funcion de Eliminacion de Humo<br><span class="text-xs opacity-90">打开除烟功能</span>
</button>
<button onclick="playVoice('es_Cerrar_Funcion_de_Eliminacion_de_Humo.wav', 'Cerrar Funcion de Eliminacion de Humo')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-cloud text-xl mb-2 block"></i>
Cerrar Funcion de Eliminacion de Humo<br><span class="text-xs opacity-90">关闭除烟功能</span>
</button>
<!-- Ajuste de Color -->
<button onclick="playVoice('es_Abrir_Mejora_de_Color.wav', 'Abrir Mejora de Color')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-paint-brush text-xl mb-2 block"></i>
Abrir Mejora de Color<br><span class="text-xs opacity-90">打开色彩增强</span>
</button>
<button onclick="playVoice('es_Cerrar_Mejora_de_Color.wav', 'Cerrar Mejora de Color')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-eraser text-xl mb-2 block"></i>
Cerrar Mejora de Color<br><span class="text-xs opacity-90">关闭色彩增强</span>
</button>
<button onclick="playVoice('es_Rojo_aumentar_un_poco.wav', 'Rojo aumentar un poco')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Rojo aumentar un poco<br><span class="text-xs opacity-90">红色增加一点</span>
</button>
<button onclick="playVoice('es_Rojo_reducir_un_poco.wav', 'Rojo reducir un poco')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Rojo reducir un poco<br><span class="text-xs opacity-90">红色减少一点</span>
</button>
<button onclick="playVoice('es_Rojo-Amarillo_aumentar_un_poco.wav', 'Rojo-Amarillo aumentar un poco')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Rojo-Amarillo aumentar un poco<br><span class="text-xs opacity-90">红黄增加一点</span>
</button>
<button onclick="playVoice('es_Rojo-Amarillo_reducir_un_poco.wav', 'Rojo-Amarillo reducir un poco')"
class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Rojo-Amarillo reducir un poco<br><span class="text-xs opacity-90">红黄减少一点</span>
</button>
<button onclick="playVoice('es_Amarillo_aumentar_un_poco.wav', 'Amarillo aumentar un poco')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Amarillo aumentar un poco<br><span class="text-xs opacity-90">黄色增加一点</span>
</button>
<button onclick="playVoice('es_Amarillo_reducir_un_poco.wav', 'Amarillo reducir un poco')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Amarillo reducir un poco<br><span class="text-xs opacity-90">黄色减少一点</span>
</button>
<!-- Control de Fluorescencia -->
<button onclick="playVoice('es_Abrir_Ajuste_de_Fluorescencia.wav', 'Abrir Ajuste de Fluorescencia')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-magic text-xl mb-2 block"></i>
Abrir Ajuste de Fluorescencia<br><span class="text-xs opacity-90">打开荧光调节</span>
</button>
<button onclick="playVoice('es_Sensibilidad_aumentar_un_poco.wav', 'Sensibilidad aumentar un poco')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Sensibilidad aumentar un poco<br><span class="text-xs opacity-90">灵敏度增加一点</span>
</button>
<button onclick="playVoice('es_Sensibilidad_reducir_un_poco.wav', 'Sensibilidad reducir un poco')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Sensibilidad reducir un poco<br><span class="text-xs opacity-90">灵敏度减少一点</span>
</button>
<button onclick="playVoice('es_Ganancia_aumentar_un_poco.wav', 'Ganancia aumentar un poco')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-plus text-xl mb-2 block"></i>
Ganancia aumentar un poco<br><span class="text-xs opacity-90">增益增加一点</span>
</button>
<button onclick="playVoice('es_Ganancia_reducir_un_poco.wav', 'Ganancia reducir un poco')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-minus text-xl mb-2 block"></i>
Ganancia reducir un poco<br><span class="text-xs opacity-90">增益减少一点</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Termica.wav', 'Abrir Fluorescencia Termica')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-fire text-xl mb-2 block"></i>
Abrir Fluorescencia Termica<br><span class="text-xs opacity-90">打开热力荧光</span>
</button>
<button onclick="playVoice('es_Cerrar_Fluorescencia_Termica.wav', 'Cerrar Fluorescencia Termica')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-snowflake-o text-xl mb-2 block"></i>
Cerrar Fluorescencia Termica<br><span class="text-xs opacity-90">关闭热力荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Multicolor.wav', 'Abrir Fluorescencia Multicolor')"
class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-bullseye text-xl mb-2 block"></i>
Abrir Fluorescencia Multicolor<br><span class="text-xs opacity-90">打开多彩荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Roja.wav', 'Abrir Fluorescencia Roja')"
class="bg-gradient-to-br from-red-500 to-red-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Abrir Fluorescencia Roja<br><span class="text-xs opacity-90">打开红色荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Verde.wav', 'Abrir Fluorescencia Verde')"
class="bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Abrir Fluorescencia Verde<br><span class="text-xs opacity-90">打开绿色荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Azul.wav', 'Abrir Fluorescencia Azul')"
class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Abrir Fluorescencia Azul<br><span class="text-xs opacity-90">打开蓝色荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Amarilla.wav', 'Abrir Fluorescencia Amarilla')"
class="bg-gradient-to-br from-yellow-500 to-yellow-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Abrir Fluorescencia Amarilla<br><span class="text-xs opacity-90">打开黄色荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Cian.wav', 'Abrir Fluorescencia Cian')"
class="bg-gradient-to-br from-cyan-500 to-cyan-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Abrir Fluorescencia Cian<br><span class="text-xs opacity-90">打开青色荧光</span>
</button>
<button onclick="playVoice('es_Abrir_Fluorescencia_Magenta.wav', 'Abrir Fluorescencia Magenta')"
class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-3 rounded-xl font-semibold text-center btn-hover shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-sm">
<i class="fa fa-circle text-xl mb-2 block"></i>
Abrir Fluorescencia Magenta<br><span class="text-xs opacity-90">打开玫红色荧光</span>
</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gradient-to-r from-primary to-secondary text-white py-8 mt-12">
<div class="container mx-auto px-4 text-center">
<div class="flex items-center justify-center space-x-4 mb-4">
<div class="bg-white bg-opacity-20 p-3 rounded-full">
<i class="fa fa-heartbeat text-2xl text-white"></i>
</div>
<h3 class="text-2xl font-bold">戴维_C5_中英西_单点</h3>
</div>
<p class="text-sm opacity-75 mt-2">戴维_C5_中英西_单点语音播报按钮 | Jinhai C5 Voice System (ZH/EN/ES)</p>
</div>
</footer>
<script>
// 全局变量
let currentAudio = null;
let currentButton = null;
let volume = 0.8;
let audioCache = new Map();
// 初始化
document.addEventListener('DOMContentLoaded', function() {
updateTime();
setInterval(updateTime, 1000);
// 音量滑块事件
const volumeSlider = document.getElementById('volumeSlider');
const volumeDisplay = document.getElementById('volumeDisplay');
volumeSlider.addEventListener('input', function() {
volume = this.value / 100;
volumeDisplay.textContent = this.value + '%';
if (currentAudio) {
currentAudio.volume = volume;
}
});
// 键盘事件
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
event.preventDefault();
stopAllAudio();
}
});
// 预加载常用音频
preloadAudio([
'zh_戴维医疗.wav',
'en_David_Medical.wav',
'es_David_Medical.WAV'
]);
});
// 显示指定语言部分
function showSection(language) {
const chineseSection = document.getElementById('chineseSection');
const englishSection = document.getElementById('englishSection');
const spanishSection = document.getElementById('spanishSection');
const chineseBtn = document.getElementById('chineseBtn');
const englishBtn = document.getElementById('englishBtn');
const spanishBtn = document.getElementById('spanishBtn');
// 隐藏所有区域
chineseSection.classList.add('hidden');
englishSection.classList.add('hidden');
spanishSection.classList.add('hidden');
// 重置所有按钮样式
chineseBtn.classList.remove('bg-primary', 'text-white');
chineseBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
englishBtn.classList.remove('bg-primary', 'text-white');
englishBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
spanishBtn.classList.remove('bg-primary', 'text-white');
spanishBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
// 显示选中的语言区域
if (language === 'chinese') {
chineseSection.classList.remove('hidden');
chineseBtn.classList.add('bg-primary', 'text-white');
chineseBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
updateStatus('就绪 - 点击按钮播放语音');
} else if (language === 'english') {
englishSection.classList.remove('hidden');
englishBtn.classList.add('bg-primary', 'text-white');
englishBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
updateStatus('Ready - Click buttons to play voice');
} else if (language === 'spanish') {
spanishSection.classList.remove('hidden');
spanishBtn.classList.add('bg-primary', 'text-white');
spanishBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
updateStatus('Listo - Haga clic en los botones para reproducir voz');
}
}
// 播放语音
async function playVoice(audioSrc, displayText) {
// 停止当前播放
stopCurrentAudio();
try {
// 获取按钮元素
const buttons = document.querySelectorAll('button[onclick*="' + audioSrc + '"]');
if (buttons.length > 0) {
currentButton = buttons[0];
setButtonPlaying(currentButton, true);
}
updateStatus('正在播放: ' + displayText);
// 从缓存获取或创建音频
if (!audioCache.has(audioSrc)) {
const audio = new Audio(audioSrc);
audio.volume = volume;
//播放语音文件速度控制
// if (audioSrc.startsWith('es_')) {
// audio.playbackRate = 0.75; // 西班牙语音频文件播放速度
// } else {
// audio.playbackRate = 1.0; // 默认播放速度
// }
audioCache.set(audioSrc, audio);
}
currentAudio = audioCache.get(audioSrc);
// 重新加载音频（解决重复播放问题）
currentAudio.currentTime = 0;
// 在播放前强制设置播放速度
if (audioSrc.startsWith('es_')) {
currentAudio.playbackRate = 0.8;
// console.log('Playing with rate 0.8:', audioSrc);
}
// 播放音频
await currentAudio.play();
updateStatus('播放完成: ' + displayText);
} catch (error) {
console.error('音频播放失败:', error);
updateStatus('播放失败: ' + displayText);
// 降级到Web Speech API
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(displayText);
// 根据音频文件前缀设置语言
if (audioSrc.startsWith('zh_')) {
utterance.lang = 'zh-CN';
} else if (audioSrc.startsWith('en_')) {
utterance.lang = 'en-US';
} else if (audioSrc.startsWith('es_')) {
utterance.lang = 'es-ES';
}
utterance.volume = volume;
utterance.rate = 0.9;
utterance.pitch = 1;
utterance.onstart = () => {
updateStatus('正在播放(备选): ' + displayText);
};
utterance.onend = () => {
updateStatus('播放完成(备选): ' + displayText);
if (currentButton) {
setButtonPlaying(currentButton, false);
}
};
speechSynthesis.speak(utterance);
}
} finally {
if (currentButton) {
setButtonPlaying(currentButton, false);
}
}
}
// 停止当前音频
function stopCurrentAudio() {
if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
currentAudio = null;
}
if (currentButton) {
setButtonPlaying(currentButton, false);
currentButton = null;
}
// 停止Web Speech API
speechSynthesis.cancel();
}
// 停止所有音频
function stopAllAudio() {
stopCurrentAudio();
updateStatus('已停止所有播放');
}
// 设置按钮播放状态
function setButtonPlaying(button, isPlaying) {
if (isPlaying) {
button.classList.add('btn-active');
button.style.transform = 'scale(0.95)';
} else {
button.classList.remove('btn-active');
button.style.transform = '';
}
}
// 更新状态显示
function updateStatus(message) {
const statusDisplay = document.getElementById('statusDisplay');
statusDisplay.textContent = message;
// 添加状态变化动画
statusDisplay.classList.add('animate-fade-in');
setTimeout(() => {
statusDisplay.classList.remove('animate-fade-in');
}, 500);
}
// 更新时间显示
function updateTime() {
const now = new Date();
const timeString = now.toTimeString().slice(0, 8);
const timeDisplay = document.getElementById('timeDisplay');
timeDisplay.textContent = timeString;
}
// 预加载音频
function preloadAudio(audioUrls) {
audioUrls.forEach(url => {
if (!audioCache.has(url)) {
const audio = new Audio(url);
audio.preload = 'metadata';
audioCache.set(url, audio);
}
});
}
// 添加CSS样式
const style = document.createElement('style');
style.textContent = `
.slider::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #7C3AED, #A855F7);
cursor: pointer;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
transition: all 0.3s ease;
}
.slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}
.pattern-dots {
background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
@keyframes pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes glow {
0% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); }
100% { box-shadow: 0 0 30px rgba(124, 58, 237, 0.8), 0 0 40px rgba(124, 58, 237, 0.3); }
}
.btn-active {
animation: glow 1.5s ease-in-out infinite alternate;
}
/* 响应式字体大小调整 */
@media (max-width: 768px) {
.btn-hover {
font-size: 0.75rem;
padding: 0.5rem;
}
.btn-hover i {
font-size: 1rem;
margin-bottom: 0.25rem;
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
浙公网安备 33010602011771号