携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
前言
突发奇想的，我觉得看小说太累了，所有我就想听小说，那怎么听到自己喜欢的小说呢，当然我们可以选择下载一些专门听小说的APP，但是有些喜欢的小说可能更新太慢，或者需要VIP，这就很尴尬了。
退而求其次，我想着要不网上找点文字转语音的工具，自己将喜欢的小说转成语音也是一样的，然而这些工具要么需要VIP，要么就是对字数有限制，太难了吧。
所以我就想，干脆要不自己简单实现一个吧，于是就有了下面的代码，基本功能是有了，但是也有很大缺陷，毕竟咱也不是专业的，我自己写的这个吧，不好的地方就是声音太机械了，要是能来一些网红主播的语音包就好了，还有就是转成语音后没法下载下来，不然我还能每天听一遍。
另外我在想啊，这算不算是一个小的商机呢，开发一个这样的小工具既可以上班划水摸鱼又可以赚零花钱，何乐而不为，当然啊前提是我得会好多东西，完全没有头绪呀，太难了，有没有大神可以指导一下呀。说不定就行了是吧。。。
完整代码
<template>
<div class="app-container">
<textarea v-model="word" type="textarea" class="textContent" />
<div class="settings">
音量：<el-input-number v-model="volume" :min="0" :max="10" style="margin-right: 10px;" />
音调：<el-input-number v-model="pitch" :min="0" :max="10" style="margin-right: 10px;" />
语速：<el-input-number v-model="rate" :min="0" :max="10" style="margin-right: 10px;" />
<el-button
type="primary"
style="margin-top: 10px"
@click="createAndPlay(word,volume,pitch,rate)"
>
生成语音并播放
</el-button>
</div>
</div>
</template>
<script>
**export** **default** {
name: 'App',
**data**() {
**return** {
text: '',
volume: 1,
pitch: 1,
rate: 2
}
},
methods: {
**createAndPlay**(word, volume, pitch, rate) {
**const** synth = window.speechSynthesis
**const** msg = **new** **SpeechSynthesisUtterance**()
msg.text = word *// 文字内容*
msg.lang = 'zh-CN' *// 文字格式*
msg.volume = volume *// 播放音量*
msg.pitch = pitch *// 音调高低，值越大越尖锐,越低越低沉*
msg.rate = rate *// 播放语速，值越大语速越快,越小语速越慢*
synth.**speak**(msg)
}
}
}
</script>
<style scoped lang="scss">
.textContent{
height: 600px;
width: 100%;
padding: 10px;
}
</style>
页面展示
