• 语音合成软件
  • 语音合成助手免费版下载
  • 语音合成助手
  • 语音合成技术
  • 语音合成
  • 语音合成工具下载
  • 语音合成软件哪个好用
  • 语音合成软件免费版
  • 语音合成网易有道智云
  • 语音合成网站
<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>

在线语音合成工具代码相关推荐

  1. QQ,MSN,Skype在线客服代码

    QQ,MSN,Skype在线客服代码 在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...

  2. QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺在线客服代码

    1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) QQ在线简短代码:tencent://message/?uin=你的 ...

  3. 腾讯QQ,msn,百度Hi,淘宝的用户链接及网页在线客服代码

    腾讯QQ,msn 百度HI 等一些聊天工具的网页在线客服代码添加在个人还是商业网站尤为重要.如何添加属于自己的QQ网页链接?添加个人QQ 等链接是很简单的,但链接图片选择是否在线状态就麻烦了点.  先 ...

  4. 【安信可ESP32语音开发板专题②】ESP32-Audio-Kit 开发板适配百度dueros例程实现在线语音功能,与开发板对话聊天。

    文章目录 前言 一.准备工作 1.硬件准备 2.软件准备 二.验证ESP-ADF是否正常 1. 代码简单修改 2.播放MP3测试 三.dueros 例程适配 1.替换连接文件 2.内存卡准备 3. 代 ...

  5. Agora 在线语音聊天室开发上手和源码解读 | 掘金技术征文

    使用声网的在线语音聊天室 SDK 能够实现开黑聊天室.娱乐房间.K 歌房.FM 超高音质房等各种语音聊天室所需要的音频功能. 场景描述 语音聊天室 是一种纯音频的使用场景.用户作为主播或者听众加入房间 ...

  6. H5调用讯飞语音接口实现在线语音听写测评

    韩顺平老师是我的人生导师,所以,老规矩,先看效果,后讲解:下面是效果图(页面较大,分屏效果) 这是在线语音听写: 这是在线语音测评: 下面我们来看看具体的代码实现: 1.在讯飞语音平台注册,创建一个应 ...

  7. 网页上加在线客服代码QQ,MSN,skype,goolge TALK,雅虎通,贸易通,淘宝旺旺

    1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将8989215换成你的号码,site后面换成你的网站就可以了) ...

  8. 网页MSN,QQ,Skype,贸易通,雅虎通在线客服代码合集

    1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将123456换成你的号码,site后面换成你的网站就可以了) & ...

  9. QQ在线客服代码,飘浮在右侧的QQ客服js特效演示

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

最新文章

  1. VisualStudio 合并代码文件
  2. vue 封装dialog_element-ui 封装dialog组件
  3. python的认识_理解 Python 中的 *args 和 **kwargs
  4. Vmware提示:host usb device connections disabled-(vmware 主机已禁用 usb 设备连接)
  5. .NET新手系列(五)
  6. 勒索病毒GANDCRAB新变种GANDCRAB V5.2新变种来袭 你中招了吗?
  7. 1.Rabbitmq学习记录《本质介绍,协议AMQP分析》
  8. JSP EL表达式 param、paramValues的使用
  9. Mybatis SQL片段
  10. CUDA中并行规约(Parallel Reduction)的优化
  11. hdu2026.java字符
  12. 图算法之——dijkstra算法
  13. [洛谷P3613]睡觉困难综合征
  14. 2021五一杯数学建模B题 消防救援问题
  15. Excel打印针式打印机备货单
  16. iPhone/iPad用iTunes“同步”不等于“备份”
  17. eq, neq.gt,ge,lte,lt,not,mod的含义
  18. 1021. Couples
  19. 用python写一元二次方程_使用Python解一元二次方程!
  20. 诡异的The inferior stopped because it triggered an exception错误

热门文章

  1. 推荐个免费开源的截图软件Greenshot
  2. Symbian S60平台手机软件开发
  3. Apache Oozie(1):Apache Oozie简介
  4. 谈顺丰与菜鸟的数据断交事件
  5. Ylmf OS 4.0正式版已经发布
  6. Ylmf OS 3.0 正式版 发布
  7. Matlab实现热带气旋不同风期的风速转换
  8. 【linux】tar指令压缩解压缩文件夹、文件命令详解
  9. 使用ant驱动nutch crawl
  10. AntD Upload在React useState中使用问题