You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.2 KiB
70 lines
2.2 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Speech Synthesis Example</title>
|
|
</head>
|
|
<body>
|
|
<h1>Speech Synthesis Example</h1>
|
|
<input type="text" id="text" value="请0的家属到手术室门口接病人" />
|
|
<br />
|
|
<label for="rate">Rate:</label>
|
|
<input type="number" id="rate" value="1" step="0.1" min="0.1" max="10" />
|
|
<br />
|
|
<label for="voice">Voice:</label>
|
|
<select id="voiceSelect"></select>
|
|
<br />
|
|
<button onclick="speakText()">Speak</button>
|
|
|
|
<script>
|
|
const synth = window.speechSynthesis;
|
|
const voiceSelect = document.getElementById('voiceSelect');
|
|
|
|
function populateVoiceList() {
|
|
const voices = synth.getVoices();
|
|
console.log(voices);
|
|
if (voices.length === 0) {
|
|
synth.onvoiceschanged = populateVoiceList;
|
|
} else {
|
|
voiceSelect.innerHTML = ''; // 清空之前的选项
|
|
voices.forEach((voice, index) => {
|
|
const option = document.createElement('option');
|
|
option.textContent = `${voice.name} (${voice.lang})`;
|
|
console.log(`${voice.name} (${voice.lang})`);
|
|
option.value = index;
|
|
voiceSelect.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
populateVoiceList();
|
|
if (typeof synth.onvoiceschanged !== 'undefined') {
|
|
synth.onvoiceschanged = populateVoiceList;
|
|
}
|
|
|
|
function speakText() {
|
|
window.speechSynthesis.cancel(); // 清除之前的语音合成
|
|
|
|
setTimeout(() => {
|
|
const textInput = document.getElementById('text').value;
|
|
const rate = parseFloat(document.getElementById('rate').value);
|
|
|
|
|
|
const utterance = new SpeechSynthesisUtterance([textInput, textInput, textInput].join(''));
|
|
|
|
const selectedVoiceIndex = voiceSelect.selectedOptions[0].value;
|
|
const voices = synth.getVoices();
|
|
utterance.voice = voices[selectedVoiceIndex];
|
|
utterance.rate = rate;
|
|
|
|
utterance.onend = function (event) {
|
|
console.log('Speech has finished.');
|
|
alert('Speech has finished.');
|
|
};
|
|
|
|
window.speechSynthesis.speak(utterance);
|
|
}, 100); // 延迟 100 毫秒
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|