你說：
I run the following HTML code to do text to speech offline. Can you help me improve synthesized speech quality by using the modern TTS engine?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Phrase-by-Phrase TTS with Language Picker</title>
<style>
body { font-family: sans-serif; padding: 1em; }
ul { list-style: none; padding: 0; }
li { padding: 0.5em; cursor: pointer; }
li:hover { background: #eef; }
.active { background: #cce; }
select, input { margin-bottom: 1em; }
</style>
</head>
<body>
<h1>Upload text & pick phrase to speak</h1>
<input type="file" id="fileInput" accept=".txt"><br>
<label for="langSelect">Choose language:</label>
<select id="langSelect">
<option value="en-US">English (US)</option>
<option value="ja-JP">Japanese</option>
<option value="zh-TW">Chinese (Traditional, Taiwan)</option>
<!-- Add more as needed -->
</select>
<ul id="sentenceList"></ul>
<script>
const fileInput = document.getElementById('fileInput');
const listEl = document.getElementById('sentenceList');
const langSelect = document.getElementById('langSelect');
const synth = window.speechSynthesis;
fileInput.addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
const sentences = reader.result
.split(/\r?\n/)
.filter(line => line.trim());
listEl.innerHTML = '';
sentences.forEach(sent => {
const li = document.createElement('li');
li.textContent = sent;
li.addEventListener('click', () => speakSentence(sent, li));
listEl.appendChild(li);
});
};
reader.onerror = () => alert('Failed to read file.');
});
function speakSentence(text, li) {
if (!synth) {
alert('Speech synthesis not supported.');
return;
}
document.querySelectorAll('li').forEach(el => el.classList.remove('active'));
li.classList.add('active');
synth.cancel();
const utter = new SpeechSynthesisUtterance(text);
utter.lang = langSelect.value;
synth.speak(utter);
}
</script>
</body>
</html>