<template>
<div id="app">
<div>我是div 我是 home 页面</div>
<textarea v-model="textToSpeak" placeholder="输入要朗读的文本"></textarea>
<div>
<label for="voice">选择一个语音:</label>
<el-select v-model="selectedVoice">
<el-option v-for="voice in translatedVoices" :key="voice.name" :label="voice.label" :value="voice.name">
</el-option>
</el-select>
</div>
<button @click="speakText">播放</button>
<div>
<label>语速:</label>
<input type="range" min="1" max="10" step="1" v-model="rate">
<span>{{ rate }}</span>
</div>
<div>
<label>音高:</label>
<input type="range" min="1" max="10" step="1" v-model="pitch">
<span>{{ pitch }}</span>
</div>
<div>
<button @click="pauseText">暂停</button>
<button @click="resumeText">继续</button>
<button @click="stopText">停止</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
textToSpeak: '',
voices: [],
selectedVoice: null,
translatedVoices: [],
rate: 1,
volume: 1,
pitch: 1,
utterance: null,
voiceTranslations: {
"Microsoft Huihui - Chinese (Simplified, PRC)": "慧慧-中文",
"Microsoft Kangkang - Chinese (Simplified, PRC)": "康康-中文",
"Microsoft Yaoyao - Chinese (Simplified, PRC)": "瑶瑶-中文",
"Google Deutsch": "德语",
"Google US English": "美国英语",
"Google UK English Female": "英国英语(女)",
"Google UK English Male": "英国英语(男)",
"Google español": "西班牙语(西班牙)",
"Google español de Estados Unidos": "西班牙语(美国)",
"Google français": "法语",
"Google हिन्दी": "印地语",
"Google Bahasa Indonesia": "印度尼西亚语",
"Google italiano": "意大利语",
"Google 日本語": "日语",
"Google 한국의": "韩语",
"Google Nederlands": "荷兰语",
"Google polski": "波兰语",
"Google português do Brasil": "葡萄牙语(巴西)",
"Google русский": "俄语",
"Google 普通话(中国大陆)": "普通话(中国大陆)",
"Google 粤語(香港)": "粤语(香港)",
"Google 國語(臺灣)": "国语(台湾)",
},
};
},
created() {
this.updateVoices();
window.speechSynthesis.onvoiceschanged = this.updateVoices;
},
methods: {
updateVoices() {
setTimeout(() => {
const availableVoices = window.speechSynthesis.getVoices();
this.voices = availableVoices;
this.translatedVoices = availableVoices.map(voice => ({
name: voice.name,
label: this.getVoiceLabel(voice)
}));
if (this.voices.length > 0 && !this.selectedVoice) {
this.selectedVoice = this.voices[0].name;
}
}, 500);
},
getVoiceLabel(voice) {
return this.voiceTranslations[voice.name] || voice.name;
},
speakText() {
if (!this.textToSpeak) {
alert('请输入要播放的文本');
return;
}
if (!this.selectedVoice) {
alert('请选择一个语音');
return;
}
this.utterance = new SpeechSynthesisUtterance(this.textToSpeak);
this.utterance.rate = this.rate;
this.utterance.volume = this.volume;
this.utterance.pitch = this.pitch;
const selectedVoice = this.voices.find(v => v.name === this.selectedVoice);
if (selectedVoice) {
this.utterance.voice = selectedVoice;
window.speechSynthesis.speak(this.utterance);
} else {
alert('选择的语音无效');
}
},
pauseText() {
if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
window.speechSynthesis.pause();
}
},
resumeText() {
if (window.speechSynthesis.paused) {
window.speechSynthesis.resume();
}
},
stopText() {
window.speechSynthesis.cancel();
this.utterance = null;
}
}
};
</script>
这里想要实现安卓浏览器也可以支持文本转语音的功能,但是安卓系统下载的chrome浏览器输出栏中显示
Voice support NOT ready
Voice not supported. Using fallback mode
Mapped UK English Female to en-GB fallback voice
Mapped UK English Male to en-GB fallback voice
Mapped US English Female to en-US fallback voice
Mapped Spanish Female to es fallback voice
Mapped French Female to fr fallback voice
Mapped Deutsch Female to de fallback voice
Mapped Italian Female to it fallback voice
Mapped Hungarian Female to hu fallback voice
Mapped Serbian Male to sr fallback voice
Mapped Croatian Male to hr fallback voice
Mapped Bosnian Male to bs fallback voice
Mapped Fallback UK Female to en-GB fallback voice
有什么第三方库可以支持文本转语音,要求完全免费,不是什么免费额度