553 lines
16 KiB
HTML
553 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>局域网文字转语音工具</title>
|
||
<!-- 引入Element UI样式 -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||
padding: 30px;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.header h1 {
|
||
color: #333;
|
||
font-size: 28px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.header p {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.input-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.input-section label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.input-section textarea {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
padding: 12px;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
resize: vertical;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.input-section textarea:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.preset-buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.preset-btn {
|
||
padding: 8px 16px;
|
||
background: #f0f0f0;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.preset-btn:hover {
|
||
background: #667eea;
|
||
color: white;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.control-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.control-item {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.control-item label {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.control-item .slider-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.slider {
|
||
flex: 1;
|
||
height: 6px;
|
||
background: #e0e0e0;
|
||
border-radius: 3px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.slider-track {
|
||
height: 100%;
|
||
background: #667eea;
|
||
border-radius: 3px;
|
||
transition: width 0.2s;
|
||
}
|
||
|
||
.slider-thumb {
|
||
width: 18px;
|
||
height: 18px;
|
||
background: white;
|
||
border: 2px solid #667eea;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
cursor: grab;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.slider-thumb:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.value-display {
|
||
min-width: 60px;
|
||
text-align: right;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 30px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #667eea;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover:not(:disabled) {
|
||
background: #5568d3;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.btn-danger {
|
||
background: #f56565;
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger:hover:not(:disabled) {
|
||
background: #e53e3e;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.status {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.status.info {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.status.warning {
|
||
background: #fff3e0;
|
||
color: #f57c00;
|
||
}
|
||
|
||
.status.success {
|
||
background: #e8f5e9;
|
||
color: #388e3c;
|
||
}
|
||
|
||
.status.error {
|
||
background: #ffebee;
|
||
color: #d32f2f;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.control-section {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.button-group {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🎤 局域网文字转语音工具</h1>
|
||
<p>基于浏览器 Web Speech API，无需后端服务，纯前端实现</p>
|
||
</div>
|
||
|
||
<div class="input-section">
|
||
<label for="textInput">📝 输入要朗读的文字：</label>
|
||
<textarea id="textInput" placeholder="请输入要转换为语音的文字内容..."></textarea>
|
||
<div class="preset-buttons">
|
||
<button class="preset-btn" onclick="setPresetText('欢迎使用AI心理健康测评系统，请仔细阅读题目并选择您的答案。')">
|
||
欢迎语
|
||
</button>
|
||
<button class="preset-btn" onclick="setPresetText('请根据您的实际情况，选择最符合的选项。')">
|
||
答题提示
|
||
</button>
|
||
<button class="preset-btn" onclick="setPresetText('感谢您的参与，测评已完成，请查看您的测评报告。')">
|
||
完成提示
|
||
</button>
|
||
<button class="preset-btn" onclick="setPresetText('请注意，本次测评结果仅供参考，如有疑问请咨询专业心理医生。')">
|
||
免责声明
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-section">
|
||
<div class="control-item">
|
||
<label>🔊 音量：<span id="volumeValue">100%</span></label>
|
||
<div class="slider-container">
|
||
<div class="slider" id="volumeSlider">
|
||
<div class="slider-track" id="volumeTrack"></div>
|
||
<div class="slider-thumb" id="volumeThumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-item">
|
||
<label>⚡ 语速：<span id="rateValue">1.0x</span></label>
|
||
<div class="slider-container">
|
||
<div class="slider" id="rateSlider">
|
||
<div class="slider-track" id="rateTrack"></div>
|
||
<div class="slider-thumb" id="rateThumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-item">
|
||
<label>🎵 音调：<span id="pitchValue">1.0</span></label>
|
||
<div class="slider-container">
|
||
<div class="slider" id="pitchSlider">
|
||
<div class="slider-track" id="pitchTrack"></div>
|
||
<div class="slider-thumb" id="pitchThumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button class="btn btn-primary" id="speakBtn" onclick="speakText()">
|
||
▶️ 开始朗读
|
||
</button>
|
||
<button class="btn btn-danger" id="stopBtn" onclick="stopSpeaking()" disabled>
|
||
⏹️ 停止朗读
|
||
</button>
|
||
<button class="btn btn-primary" onclick="clearText()">
|
||
🗑️ 清空文本
|
||
</button>
|
||
</div>
|
||
|
||
<div class="status info" id="status">
|
||
💡 提示：请在 Chrome、Edge 或 Safari 浏览器中使用以获得最佳体验
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 全局变量
|
||
let synth = null;
|
||
let utterance = null;
|
||
let isSpeaking = false;
|
||
|
||
// 参数值
|
||
let volume = 1.0; // 0-1
|
||
let rate = 1.0; // 0.5-2
|
||
let pitch = 1.0; // 0.5-2
|
||
|
||
// 初始化
|
||
window.onload = function() {
|
||
initTts();
|
||
initSliders();
|
||
};
|
||
|
||
/**
|
||
* 初始化 TTS
|
||
*/
|
||
function initTts() {
|
||
if ('speechSynthesis' in window) {
|
||
synth = window.speechSynthesis;
|
||
updateStatus('success', '✅ 语音合成功能已就绪');
|
||
} else {
|
||
updateStatus('error', '❌ 您的浏览器不支持语音合成功能，请使用 Chrome、Edge 或 Safari 浏览器');
|
||
document.getElementById('speakBtn').disabled = true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 初始化滑块
|
||
*/
|
||
function initSliders() {
|
||
initSlider('volume', 0, 1, 1.0, updateVolume);
|
||
initSlider('rate', 0.5, 2, 1.0, updateRate);
|
||
initSlider('pitch', 0.5, 2, 1.0, updatePitch);
|
||
}
|
||
|
||
/**
|
||
* 初始化单个滑块
|
||
*/
|
||
function initSlider(name, min, max, value, callback) {
|
||
const slider = document.getElementById(name + 'Slider');
|
||
const thumb = document.getElementById(name + 'Thumb');
|
||
const track = document.getElementById(name + 'Track');
|
||
const valueDisplay = document.getElementById(name + 'Value');
|
||
|
||
let isDragging = false;
|
||
|
||
function updateSlider(clientX) {
|
||
const rect = slider.getBoundingClientRect();
|
||
let percent = (clientX - rect.left) / rect.width;
|
||
percent = Math.max(0, Math.min(1, percent));
|
||
|
||
const newValue = min + percent * (max - min);
|
||
const displayValue = name === 'volume'
|
||
? Math.round(newValue * 100) + '%'
|
||
: name === 'rate'
|
||
? newValue.toFixed(1) + 'x'
|
||
: newValue.toFixed(1);
|
||
|
||
valueDisplay.textContent = displayValue;
|
||
thumb.style.left = percent * 100 + '%';
|
||
track.style.width = percent * 100 + '%';
|
||
|
||
callback(newValue);
|
||
}
|
||
|
||
slider.addEventListener('mousedown', (e) => {
|
||
isDragging = true;
|
||
updateSlider(e.clientX);
|
||
});
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (isDragging) {
|
||
updateSlider(e.clientX);
|
||
}
|
||
});
|
||
|
||
document.addEventListener('mouseup', () => {
|
||
isDragging = false;
|
||
});
|
||
|
||
// 初始化位置
|
||
const percent = (value - min) / (max - min);
|
||
thumb.style.left = percent * 100 + '%';
|
||
track.style.width = percent * 100 + '%';
|
||
}
|
||
|
||
/**
|
||
* 更新音量
|
||
*/
|
||
function updateVolume(value) {
|
||
volume = value;
|
||
if (utterance) {
|
||
utterance.volume = value;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新语速
|
||
*/
|
||
function updateRate(value) {
|
||
rate = value;
|
||
if (utterance) {
|
||
utterance.rate = value;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新音调
|
||
*/
|
||
function updatePitch(value) {
|
||
pitch = value;
|
||
if (utterance) {
|
||
utterance.pitch = value;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 朗读文本
|
||
*/
|
||
function speakText() {
|
||
const text = document.getElementById('textInput').value.trim();
|
||
|
||
if (!text) {
|
||
updateStatus('warning', '⚠️ 请输入要朗读的文字');
|
||
return;
|
||
}
|
||
|
||
if (!synth) {
|
||
updateStatus('error', '❌ 语音合成功能不可用');
|
||
return;
|
||
}
|
||
|
||
// 停止之前的朗读
|
||
stopSpeaking();
|
||
|
||
// 创建语音合成对象
|
||
utterance = new SpeechSynthesisUtterance(text);
|
||
|
||
// 设置参数
|
||
utterance.lang = 'zh-CN';
|
||
utterance.volume = volume;
|
||
utterance.rate = rate;
|
||
utterance.pitch = pitch;
|
||
|
||
// 选择中文语音
|
||
const voices = synth.getVoices();
|
||
const chineseVoice = voices.find(voice =>
|
||
voice.lang.includes('zh') || voice.lang.includes('CN')
|
||
);
|
||
if (chineseVoice) {
|
||
utterance.voice = chineseVoice;
|
||
}
|
||
|
||
// 监听事件
|
||
utterance.onstart = () => {
|
||
isSpeaking = true;
|
||
document.getElementById('speakBtn').disabled = true;
|
||
document.getElementById('stopBtn').disabled = false;
|
||
updateStatus('success', '🔊 正在朗读...');
|
||
};
|
||
|
||
utterance.onend = () => {
|
||
isSpeaking = false;
|
||
document.getElementById('speakBtn').disabled = false;
|
||
document.getElementById('stopBtn').disabled = true;
|
||
updateStatus('info', '✅ 朗读完成');
|
||
};
|
||
|
||
utterance.onerror = (event) => {
|
||
isSpeaking = false;
|
||
document.getElementById('speakBtn').disabled = false;
|
||
document.getElementById('stopBtn').disabled = true;
|
||
updateStatus('error', '❌ 朗读失败: ' + event.error);
|
||
};
|
||
|
||
// 开始朗读
|
||
synth.speak(utterance);
|
||
}
|
||
|
||
/**
|
||
* 停止朗读
|
||
*/
|
||
function stopSpeaking() {
|
||
if (synth && synth.speaking) {
|
||
synth.cancel();
|
||
isSpeaking = false;
|
||
document.getElementById('speakBtn').disabled = false;
|
||
document.getElementById('stopBtn').disabled = true;
|
||
updateStatus('info', '⏹️ 已停止朗读');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清空文本
|
||
*/
|
||
function clearText() {
|
||
document.getElementById('textInput').value = '';
|
||
stopSpeaking();
|
||
}
|
||
|
||
/**
|
||
* 设置预设文本
|
||
*/
|
||
function setPresetText(text) {
|
||
document.getElementById('textInput').value = text;
|
||
}
|
||
|
||
/**
|
||
* 更新状态提示
|
||
*/
|
||
function updateStatus(type, message) {
|
||
const statusEl = document.getElementById('status');
|
||
statusEl.className = 'status ' + type;
|
||
statusEl.textContent = message;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|