- 语音合成软件
- 语音合成助手免费版下载
- 语音合成助手
- 语音合成技术
- 语音合成器
- 语音合成工具下载
- 语音合成软件哪个好用
- 语音合成软件免费版
- 语音合成网易有道智云
- 语音合成网站
<div class="container mx-auto" id="app"><div class="card lg:card-side bordered shadow-lg"><div class="card-body overflow-auto"><div class="main"><div class="alert shadow-lg"><div class="flex-1"><svgxmlns="http://www.w3.org/2000/svg"fill="none"viewBox="0 0 24 24"stroke="#2196f3"class="w-6 h-6 mx-2"><pathstroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><label>本地生成，由于浏览器的不同，音色会有不同</label></div></div><div class="form-control"><label class="label"><span class="label-text">字符串</span></label><textareav-model="set.input"class="textarea textarea-bordered h-64"></textarea></div><div class="form-control"><label class="label"><span class="label-text">音色</span></label><select class="select select-primary" v-model="set.voice"><option v-for="item in set.voices">{{item.name}}</option></select></div><div class="form-control"><label class="label"><span class="label-text">语速</span><span class="label-text-alt">{{set.rate}}</span></label><inputtype="range"min="0"max="3"step="0.1"v-model="set.rate"class="range"/></div><div class="form-control"><label class="label"><span class="label-text">音高</span><span class="label-text-alt">{{set.pitch}}</span></label><inputtype="range"min="0"max="3"step="0.1"v-model="set.pitch"class="range"/></div><div class="card-actions mt-4"><button class="btn btn-primary flex-1" @click="play">播放</button><button class="btn btn-primary flex-1" @click="reset"><svgxmlns="http://www.w3.org/2000/svg"class="h-5 w-5"viewBox="0 0 20 20"fill="currentColor"><pathfill-rule="evenodd"d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"clip-rule="evenodd"/></svg>清空</button></div></div></div></div></div><script>new Vue({el: "#app",data: {set: {input: "山有木兮木有枝，心悦君兮君不知。",rate: 1,pitch: 1,voice: 1,voices: []},synth: null},created() {if (window.speechSynthesis === undefined) {$message.error("该浏览器不支持语音生成，请更换Chrome浏览器后重试");return;}this.synth = window.speechSynthesis;window.speechSynthesis.onvoiceschanged = e => {this.set.voices = window.speechSynthesis.getVoices();this.set.voice = this.set.voices[0].name;};},methods: {play() {try {const utterThis = new SpeechSynthesisUtterance(this.set.input);this.set.voices.forEach(value => {if (this.set.voice === value.name) {utterThis.voice = value;}});utterThis.pitch = this.set.pitch;utterThis.rate = this.set.rate;this.synth.cancel();this.synth.speak(utterThis);} catch (e) {$message.error(e);}},reset() {this.set.input = "";}}});</script>
