基于 Tailwind CSS + Font Awesome + Web Audio API 實(shí)現(xiàn)多語(yǔ)言醫(yī)療語(yǔ)音播報(bào)系統(tǒng)（中英西）
1、項(xiàng)目簡(jiǎn)介
本項(xiàng)目是一個(gè)基于 Web 技術(shù)棧開(kāi)發(fā)的多語(yǔ)言醫(yī)療語(yǔ)音控制替代系統(tǒng)，旨在通過(guò)預(yù)錄語(yǔ)音或合成語(yǔ)音替代測(cè)試人員在測(cè)試過(guò)程中的口語(yǔ)指令，便于再減輕測(cè)試人員在多語(yǔ)音測(cè)試情況下口語(yǔ)較弱的缺點(diǎn)。系統(tǒng)支持中文、英文、西班牙語(yǔ)三種語(yǔ)言，特別針對(duì)醫(yī)療內(nèi)窺鏡等設(shè)備的控制場(chǎng)景進(jìn)行優(yōu)化。
2、核心功能
1）三語(yǔ)言支持：中文、英文、西班牙語(yǔ)界面切換與語(yǔ)音播報(bào)
2）專(zhuān)業(yè)醫(yī)療術(shù)語(yǔ)：涵蓋腹腔鏡、胸腔鏡、宮腔鏡等各類(lèi)內(nèi)窺鏡控制指令
3）圖像調(diào)節(jié)控制：白平衡、色彩等級(jí)、放大縮小、圖像凍結(jié)等參數(shù)調(diào)節(jié)
4）熒光模式切換：支持多種熒光模式的語(yǔ)音控制，滿(mǎn)足不同手術(shù)需求
5）實(shí)時(shí)狀態(tài)反饋：播放狀態(tài)顯示、時(shí)間顯示、音量控制
3、技術(shù)特點(diǎn)
1）響應(yīng)式設(shè)計(jì)：基于 Tailwind CSS v3 構(gòu)建，適配桌面端、平板和移動(dòng)設(shè)備，可以通過(guò)已部署的nodejs服務(wù)進(jìn)行局域網(wǎng)訪問(wèn)，nodejs可參照我之前寫(xiě)物品借用登記表系統(tǒng)。
2）雙語(yǔ)音方案：Web Audio API 預(yù)加載播放 + Web Speech API 降級(jí)合成（用于當(dāng)前預(yù)知語(yǔ)音沒(méi)有可采用Web Speech API進(jìn)行播放）
3）性能優(yōu)化：音頻緩存機(jī)制、預(yù)加載策略、播放狀態(tài)管理
4）用戶(hù)體驗(yàn)：平滑動(dòng)畫(huà)過(guò)渡、懸停效果、實(shí)時(shí)狀態(tài)更新、鍵盤(pán)快捷鍵支持
4、技術(shù)棧
1）前端框架：純 HTML5 + CSS3 + JavaScript
2）樣式框架：Tailwind CSS v3
3）圖標(biāo)庫(kù)：Font Awesome 6.5.1
4）音頻處理：Web Audio API + Web Speech API
5)兼容性：支持主流現(xiàn)代瀏覽器，響應(yīng)式適配多種設(shè)備
代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>戴維_C5_中英西_單點(diǎn)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" >
<link rel="stylesheet" >
<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_中英西_單點(diǎn)語(yǔ)音播報(bào)按鈕
</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">
就緒 - 點(diǎn)擊按鈕播放語(yǔ)音
</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>中文語(yǔ)音控制
</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">
<!-- 基礎(chǔ)控制 -->
<button onclick="playVoice('zh_戴維醫(yī)療.wav', '戴維醫(yī)療')"
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>
戴維醫(yī)療
</button>
<!-- 內(nèi)窺鏡控制 -->
<button onclick="playVoice('zh_打開(kāi)腹腔鏡.wav', '打開(kāi)腹腔鏡')"
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>
打開(kāi)腹腔鏡
</button>
<button onclick="playVoice('zh_打開(kāi)胸腔鏡.wav', '打開(kāi)胸腔鏡')"
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>
打開(kāi)胸腔鏡
</button>
<button onclick="playVoice('zh_打開(kāi)宮腔鏡.wav', '打開(kāi)宮腔鏡')"
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>
打開(kāi)宮腔鏡
</button>
<button onclick="playVoice('zh_打開(kāi)泌尿鏡.wav', '打開(kāi)泌尿鏡')"
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>
打開(kāi)泌尿鏡
</button>
<button onclick="playVoice('zh_打開(kāi)關(guān)節(jié)鏡.wav', '打開(kāi)關(guān)節(jié)鏡')"
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>
打開(kāi)關(guān)節(jié)鏡
</button>
<button onclick="playVoice('zh_打開(kāi)耳鼻喉.wav', '打開(kāi)耳鼻喉')"
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>
打開(kāi)耳鼻喉
</button>
<!-- 圖像控制 -->
<button onclick="playVoice('zh_打開(kāi)白平衡.wav', '打開(kāi)白平衡')"
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>
打開(kāi)白平衡
</button>
<button onclick="playVoice('zh_打開(kāi)色彩等級(jí).wav', '打開(kāi)色彩等級(jí)')"
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>
打開(kāi)色彩等級(jí)
</button>
<button onclick="playVoice('zh_增加一點(diǎn).wav', '增加一點(diǎn)')"
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>
增加一點(diǎn)
</button>
<button onclick="playVoice('zh_減少一點(diǎn).wav', '減少一點(diǎn)')"
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>
減少一點(diǎn)
</button>
<button onclick="playVoice('zh_打開(kāi)放大縮小.wav', '打開(kāi)放大縮小')"
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>
打開(kāi)放大縮小
</button>
<button onclick="playVoice('zh_放大一點(diǎn).wav', '放大一點(diǎn)')"
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>
放大一點(diǎn)
</button>
<button onclick="playVoice('zh_縮小一點(diǎn).wav', '縮小一點(diǎn)')"
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>
縮小一點(diǎn)
</button>
<button onclick="playVoice('zh_打開(kāi)圖像凍結(jié).wav', '打開(kāi)圖像凍結(jié)')"
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>
打開(kāi)圖像凍結(jié)
</button>
<button onclick="playVoice('zh_關(guān)閉圖像凍結(jié).wav', '關(guān)閉圖像凍結(jié)')"
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>
關(guān)閉圖像凍結(jié)
</button>
<button onclick="playVoice('zh_打開(kāi)圖像翻轉(zhuǎn).wav', '打開(kāi)圖像翻轉(zhuǎn)')"
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>
打開(kāi)圖像翻轉(zhuǎn)
</button>
<button onclick="playVoice('zh_翻轉(zhuǎn).wav', '翻轉(zhuǎn)')"
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>
翻轉(zhuǎn)
</button>
<button onclick="playVoice('zh_打開(kāi)去摩爾紋.wav', '打開(kāi)去摩爾紋')"
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>
打開(kāi)去摩爾紋
</button>
<button onclick="playVoice('zh_關(guān)閉去摩爾紋.wav', '關(guān)閉去摩爾紋')"
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>
關(guān)閉去摩爾紋
</button>
<button onclick="playVoice('zh_打開(kāi)寬動(dòng)態(tài).wav', '打開(kāi)寬動(dòng)態(tài)')"
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>
打開(kāi)寬動(dòng)態(tài)
</button>
<button onclick="playVoice('zh_關(guān)閉寬動(dòng)態(tài).wav', '關(guān)閉寬動(dòng)態(tài)')"
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>
關(guān)閉寬動(dòng)態(tài)
</button>
<button onclick="playVoice('zh_打開(kāi)暗區(qū)增強(qiáng).wav', '打開(kāi)暗區(qū)增強(qiáng)')"
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>
打開(kāi)暗區(qū)增強(qiáng)
</button>
<button onclick="playVoice('zh_關(guān)閉暗區(qū)增強(qiáng).wav', '關(guān)閉暗區(qū)增強(qiáng)')"
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>
關(guān)閉暗區(qū)增強(qiáng)
</button>
<!-- 曝光控制 -->
<button onclick="playVoice('zh_打開(kāi)曝光補(bǔ)償.wav', '打開(kāi)曝光補(bǔ)償')"
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>
打開(kāi)曝光補(bǔ)償
</button>
<button onclick="playVoice('zh_關(guān)閉曝光補(bǔ)償.wav', '關(guān)閉曝光補(bǔ)償')"
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>
關(guān)閉曝光補(bǔ)償
</button>
<button onclick="playVoice('zh_打開(kāi)除煙功能.wav', '打開(kāi)除煙功能')"
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>
打開(kāi)除煙功能
</button>
<button onclick="playVoice('zh_關(guān)閉除煙功能.wav', '關(guān)閉除煙功能')"
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>
關(guān)閉除煙功能
</button>
<!-- 色彩調(diào)節(jié) -->
<button onclick="playVoice('zh_打開(kāi)色彩增強(qiáng).wav', '打開(kāi)色彩增強(qiáng)')"
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>
打開(kāi)色彩增強(qiáng)
</button>
<button onclick="playVoice('zh_關(guān)閉色彩增強(qiáng).wav', '關(guān)閉色彩增強(qiáng)')"
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>
關(guān)閉色彩增強(qiáng)
</button>
<button onclick="playVoice('zh_紅色增加一點(diǎn).wav', '紅色增加一點(diǎn)')"
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>
紅色增加一點(diǎn)
</button>
<button onclick="playVoice('zh_紅色減少一點(diǎn).wav', '紅色減少一點(diǎn)')"
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>
紅色減少一點(diǎn)
</button>
<button onclick="playVoice('zh_紅黃增加一點(diǎn).wav', '紅黃增加一點(diǎn)')"
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>
紅黃增加一點(diǎn)
</button>
<button onclick="playVoice('zh_紅黃減少一點(diǎn).wav', '紅黃減少一點(diǎn)')"
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>
紅黃減少一點(diǎn)
</button>
<button onclick="playVoice('zh_黃色增加一點(diǎn).wav', '黃色增加一點(diǎn)')"
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>
黃色增加一點(diǎn)
</button>
<button onclick="playVoice('zh_黃色減少一點(diǎn).wav', '黃色減少一點(diǎn)')"
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>
黃色減少一點(diǎn)
</button>
<!-- 熒光控制 -->
<button onclick="playVoice('zh_打開(kāi)熒光調(diào)節(jié).wav', '打開(kāi)熒光調(diào)節(jié)')"
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>
打開(kāi)熒光調(diào)節(jié)
</button>
<button onclick="playVoice('zh_靈敏度增加一點(diǎn).wav', '靈敏度增加一點(diǎn)')"
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>
靈敏度增加一點(diǎn)
</button>
<button onclick="playVoice('zh_靈敏度減少一點(diǎn).wav', '靈敏度減少一點(diǎn)')"
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>
靈敏度減少一點(diǎn)
</button>
<button onclick="playVoice('zh_增益增加一點(diǎn).wav', '增益增加一點(diǎn)')"
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>
增益增加一點(diǎn)
</button>
<button onclick="playVoice('zh_增益減少一點(diǎn).wav', '增益減少一點(diǎn)')"
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>
增益減少一點(diǎn)
</button>
<button onclick="playVoice('zh_打開(kāi)熱力熒光.wav', '打開(kāi)熱力熒光')"
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>
打開(kāi)熱力熒光
</button>
<button onclick="playVoice('zh_關(guān)閉熱力熒光.wav', '關(guān)閉熱力熒光')"
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>
關(guān)閉熱力熒光
</button>
<button onclick="playVoice('zh_打開(kāi)多彩熒光.wav', '打開(kāi)多彩熒光')"
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>
打開(kāi)多彩熒光
</button>
<button onclick="playVoice('zh_打開(kāi)紅色熒光.wav', '打開(kāi)紅色熒光')"
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>
打開(kāi)紅色熒光
</button>
<button onclick="playVoice('zh_打開(kāi)綠色熒光.wav', '打開(kāi)綠色熒光')"
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>
打開(kāi)綠色熒光
</button>
<button onclick="playVoice('zh_打開(kāi)藍(lán)色熒光.wav', '打開(kāi)藍(lán)色熒光')"
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>
打開(kāi)藍(lán)色熒光
</button>
<button onclick="playVoice('zh_打開(kāi)黃色熒光.wav', '打開(kāi)黃色熒光')"
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>
打開(kāi)黃色熒光
</button>
<button onclick="playVoice('zh_打開(kāi)青色熒光.wav', '打開(kāi)青色熒光')"
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>
打開(kāi)青色熒光
</button>
<button onclick="playVoice('zh_打開(kāi)玫紅色熒光.wav', '打開(kāi)玫紅色熒光')"
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>
打開(kā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">戴維醫(yī)療</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">打開(kāi)腹腔鏡</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">打開(kāi)胸腔鏡</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">打開(kāi)宮腔鏡</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">打開(kāi)泌尿鏡</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">打開(kāi)關(guān)節(jié)鏡</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">打開(kāi)耳鼻喉</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">打開(kāi)白平衡</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">打開(kāi)色彩等級(jí)</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">增加一點(diǎn)</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">減少一點(diǎn)</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">打開(kāi)放大縮小</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">放大一點(diǎn)</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">縮小一點(diǎn)</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">打開(kāi)圖像凍結(jié)</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">關(guān)閉圖像凍結(jié)</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">打開(kāi)圖像翻轉(zhuǎn)</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">翻轉(zhuǎn)</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">打開(kāi)摩爾紋</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">關(guān)閉摩爾紋</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">打開(kāi)寬動(dòng)態(tài)</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">關(guān)閉寬動(dòng)態(tài)</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">打開(kāi)暗區(qū)增強(qiáng)</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">關(guān)閉暗區(qū)增強(qiáng)</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">打開(kāi)曝光補(bǔ)償</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">關(guān)閉曝光補(bǔ)償</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">打開(kāi)除煙功能</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">關(guān)閉除煙功能</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">打開(kāi)色彩增強(qiáng)</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">關(guān)閉色彩增強(qiáng)</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">紅色增加一點(diǎn)</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">紅色減少一點(diǎn)</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">紅黃增加一點(diǎn)</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">紅黃減少一點(diǎn)</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">黃色增加一點(diǎn)</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">黃色減少一點(diǎn)</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">打開(kāi)熒光調(diào)節(jié)</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">靈敏度增加一點(diǎn)</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">靈敏度減少一點(diǎn)</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">增益增加一點(diǎn)</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">增益減少一點(diǎn)</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">打開(kāi)熱力熒光</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">關(guān)閉熱力熒光</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">打開(kāi)多彩熒光</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">打開(kāi)紅色熒光</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">打開(kāi)綠色熒光</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">打開(kāi)藍(lán)色熒光</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">打開(kāi)黃色熒光</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">打開(kāi)青色熒光</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">打開(kāi)玫紅色熒光</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">戴維醫(yī)療</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">打開(kāi)用戶(hù)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">打開(kāi)用戶(hù)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">打開(kāi)用戶(hù)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">打開(kāi)用戶(hù)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">打開(kāi)用戶(hù)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">打開(kāi)用戶(hù)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">打開(kāi)白平衡</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">打開(kāi)色彩等級(jí)</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">增加一點(diǎn)</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">減少一點(diǎn)</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">打開(kāi)放大縮小</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">放大一點(diǎn)</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">縮小一點(diǎn)</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">打開(kāi)圖像凍結(jié)</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">關(guān)閉圖像凍結(jié)</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">打開(kāi)圖像翻轉(zhuǎn)</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">翻轉(zhuǎn)</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">打開(kāi)摩爾紋</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">關(guān)閉摩爾紋</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">打開(kāi)寬動(dòng)態(tài)</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">關(guān)閉寬動(dòng)態(tài)</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">打開(kāi)暗區(qū)增強(qiáng)</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">關(guān)閉暗區(qū)增強(qiáng)</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">打開(kāi)曝光補(bǔ)償</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">關(guān)閉曝光補(bǔ)償</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">打開(kāi)除煙功能</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">關(guān)閉除煙功能</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">打開(kāi)色彩增強(qiáng)</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">關(guān)閉色彩增強(qiáng)</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">紅色增加一點(diǎn)</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">紅色減少一點(diǎn)</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">紅黃增加一點(diǎn)</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">紅黃減少一點(diǎn)</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">黃色增加一點(diǎn)</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">黃色減少一點(diǎn)</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">打開(kāi)熒光調(diào)節(jié)</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">靈敏度增加一點(diǎn)</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">靈敏度減少一點(diǎn)</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">增益增加一點(diǎn)</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">增益減少一點(diǎn)</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">打開(kāi)熱力熒光</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">關(guān)閉熱力熒光</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">打開(kāi)多彩熒光</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">打開(kāi)紅色熒光</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">打開(kāi)綠色熒光</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">打開(kāi)藍(lán)色熒光</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">打開(kāi)黃色熒光</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">打開(kāi)青色熒光</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">打開(kāi)玫紅色熒光</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_中英西_單點(diǎn)</h3>
</div>
<p class="text-sm opacity-75 mt-2">戴維_C5_中英西_單點(diǎn)語(yǔ)音播報(bào)按鈕 | 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;
}
});
// 鍵盤(pán)事件
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
event.preventDefault();
stopAllAudio();
}
});
// 預(yù)加載常用音頻
preloadAudio([
'zh_戴維醫(yī)療.wav',
'en_David_Medical.wav',
'es_David_Medical.WAV'
]);
});
// 顯示指定語(yǔ)言部分
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');
// 隱藏所有區(qū)域
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');
// 顯示選中的語(yǔ)言區(qū)域
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('就緒 - 點(diǎn)擊按鈕播放語(yǔ)音');
} 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');
}
}
// 播放語(yǔ)音
async function playVoice(audioSrc, displayText) {
// 停止當(dāng)前播放
stopCurrentAudio();
try {
// 獲取按鈕元素
const buttons = document.querySelectorAll('button[onclick*="' + audioSrc + '"]');
if (buttons.length > 0) {
currentButton = buttons[0];
setButtonPlaying(currentButton, true);
}
updateStatus('正在播放: ' + displayText);
// 從緩存獲取或創(chuàng)建音頻
if (!audioCache.has(audioSrc)) {
const audio = new Audio(audioSrc);
audio.volume = volume;
//播放語(yǔ)音文件速度控制
// if (audioSrc.startsWith('es_')) {
// audio.playbackRate = 0.75; // 西班牙語(yǔ)音頻文件播放速度
// } else {
// audio.playbackRate = 1.0; // 默認(rèn)播放速度
// }
audioCache.set(audioSrc, audio);
}
currentAudio = audioCache.get(audioSrc);
// 重新加載音頻（解決重復(fù)播放問(wèn)題）
currentAudio.currentTime = 0;
// 在播放前強(qiáng)制設(shè)置播放速度
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);
// 降級(jí)到Web Speech API
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(displayText);
// 根據(jù)音頻文件前綴設(shè)置語(yǔ)言
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);
}
}
}
// 停止當(dāng)前音頻
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('已停止所有播放');
}
// 設(shè)置按鈕播放狀態(tài)
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 = '';
}
}
// 更新?tīng)顟B(tài)顯示
function updateStatus(message) {
const statusDisplay = document.getElementById('statusDisplay');
statusDisplay.textContent = message;
// 添加狀態(tài)變化動(dòng)畫(huà)
statusDisplay.classList.add('animate-fade-in');
setTimeout(() => {
statusDisplay.classList.remove('animate-fade-in');
}, 500);
}
// 更新時(shí)間顯示
function updateTime() {
const now = new Date();
const timeString = now.toTimeString().slice(0, 8);
const timeDisplay = document.getElementById('timeDisplay');
timeDisplay.textContent = timeString;
}
// 預(yù)加載音頻
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;
}
/* 響應(yīng)式字體大小調(diào)整 */
@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>
浙公網(wǎng)安備 33010602011771號(hào)