微信小程序 -- 语音合成:将文字转为语音(插件:微信同声传译)
直接上手吧。
1. 小程序后台添加插件:微信同声传译以及在app.json进行配置
具体可看另外一篇博客:https://blog.csdn.net/qq_41638795/article/details/98080498
2. 代码实现
页面如下:
21. wxml代码如下:
<view class="yuyinWrap"><textarea class='yuyinCon' placeholder='请输入内容' value='{{content}}' bindinput='conInput'></textarea><view class=''><button class="yuyinBtn start" bindtap='wordYun'>开始</button><button class="yuyinBtn" bindtap='end'>结束</button></view>
</view>
wcss代码如下:
.yuyinWrap {position: relative;margin-top:300rpx;
}.yuyinCon {border: 1px solid #ccc;margin: 0 auto;padding: 10rpx 10rpx 70rpx;
}
.yuyinBtn {width: 30%;height: 70rpx;position: absolute;right: 112rpx;bottom: 12rpx;border: 1px solid #eee;background: #fff;color: #606267;line-height: 62rpx;
}
.start{left: -112rpx;
}
22.js代码(重点):
思路:
1)将文字转为语音 (官方文档:https://developers.weixin.qq.com/miniprogram/dev/extended/service/translator.html)
2)播放语音 (官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html)
1)将文字转为语音
具体看如上,其中成功回调success中,返回的res有几个参数,如下:
所需要就是filename参数的值。如果需要保存到后台,就只需要filename,按照文件上传的方式。
2)播放语音
在onReady方法中实例化一个innerAudioContext。
onReady(e) {//创建内部 audio 上下文 InnerAudioContext 对象。this.innerAudioContext = wx.createInnerAudioContext();this.innerAudioContext.onError(function (res) {console.log(res);wx.showToast({title: '语音播放失败',icon: 'none',})})
},
语音播放代码如下:
//播放语音
yuyinPlay: function (e) {if (this.data.src == '') {console.log(暂无语音);return;}this.innerAudioContext.src = this.data.srcthis.innerAudioContext.play();
},
语音暂停如下:
// 结束语音
end: function (e) {this.innerAudioContext.pause();
},
全部js代码如下:
const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');Page({/*** 页面的初始数据*/data: {content: '',//内容src:'', //},onReady(e) {//创建内部 audio 上下文 InnerAudioContext 对象。this.innerAudioContext = wx.createInnerAudioContext();this.innerAudioContext.onError(function (res) {console.log(res);wx.showToast({title: '语音播放失败',icon: 'none',})}) },// 手动输入内容conInput: function (e) {this.setData({content: e.detail.value,})},// 文字转语音wordYun:function (e) {var that = this;var content = this.data.content;plugin.textToSpeech({lang: "zh_CN",tts: true,content: content,success: function (res) {console.log(res);console.log("succ tts", res.filename);that.setData({src: res.filename})that.yuyinPlay();},fail: function (res) {console.log("fail tts", res)}})},//播放语音yuyinPlay: function (e) {if (this.data.src == '') {console.log(暂无语音);return;}this.innerAudioContext.src = this.data.src //设置音频地址this.innerAudioContext.play(); //播放音频},// 结束语音end: function (e) {this.innerAudioContext.pause();//暂停音频},})
可在微信开发工具、手机测试。
此外,注意的是:文字转语音,每个小程序100次/分钟,2w次/天
微信小程序 -- 语音合成:将文字转为语音(插件:微信同声传译)相关推荐
- 微信小程序调用百度文字转语音API
文字转语音,这里接入的是百度的https://ai.baidu.com/docs#/TTS-API/top里面有详细的介绍怎么去申请.不多说什么 直接效果已解决ios播放没有语音的bug,已经亲测魅族 ...
- 微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行 在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生 ...
- 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码 网盘下载地址: http://www.zijiepan5.xyz/hNiChK2xwgy0 图片:
- 2022虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码
简介: 虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序源码 网盘下载地址:https://qumaw.lanzoul.com/ioRp700i1fgb
- 2022年虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序
2022年虎年姓氏头像微信小程序源码+文字变音+喝酒娱乐多功能小程序 下载地址:
- 微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮 针对这个功能,产品的需求如下 由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
- 微信 html 字体 自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 微信小程序图片与文字安全检测security.msgSecCheck和security.imgSecCheck
微信小程序线上版本涉及到内容发布评论等,就需要进行安全检测,否则官方会上传一些huang图等敏感信息,这样就对我们的小程序的运行非常的不友好. 微信小程序图片与文字安全检测security.msgSe ...
- 《微信小程序开发实战》学习笔记chapter1微信小程序人门
Chapter01 微信小程序入门 1. 微信小程序介绍 1.1 什么是微信小程序 微信小程序是腾讯于2017年1月19日推出的一种不需要安装即可在微信平台上使用的应用.微信小程序和微信的原生功能应用 ...
- 云开发校园微社区微信小程序源码/二手交易/兼职交友微信小程序开源功能介绍
简介: 云开发校园微社区微信小程序开源源码,这是一款云开发校园微社区-二手交易_兼职_交友_项目微信小程序开源源码,可以给你提供快捷方便的校园生活,有很多有趣实用的板块和功能,如:闲置交易.表白交友. ...
最新文章
- DataSet.Relations一例
- 改变UITableView选中行高亮的颜色
- 让zabbix图像中文不再是乱码
- C#LeetCode刷题之#205-同构字符串(Isomorphic Strings)
- Kanas.net Framework 入门介绍
- html论坛页面怎么做_用php怎么做一个简单的留言页面?
- C++语法_深度剖析C++中的inline函数
- 运营人员消消气,这个工具让数据分析轻松驾驭
- 数模电路基础知识 —— 3. 常见电路符号说明(电容、电阻、电感)
- python dlib caffe人脸相似度_人脸检测学习笔记(数据集-DLIB人脸检测原理-DLIBOpenCV人脸检测方法及对比)...
- 如何做杜邦线、XH线 制作方法
- 中山大学3D游戏设计读书笔记 unity3D Note2
- 基于Echarts实现可视化数据大屏大数据可视化
- (翻译)测试替身— Fakes, Mocks 和 Stubs
- python 函数报错TypeError: object of type 'int' has no len()
- 异地远程访问连接家里的群晖NAS【内网穿透】
- Kubernetes HPA管理
- java毕业设计搬家预约系统Mybatis+系统+数据库+调试部署
- 关于蜂产品保健的一些介绍
- 使用Sudo apt-get update更新是出现:错误:9 http://cz.archive.ubuntu.com/ubuntu lucid Release