ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序实现文字语音播放

2022-05-06 09:33:27  阅读:192  来源: 互联网

标签:src console log 程序实现 微信 content res 播放


1:登录微信服务平台

https://fuwu.weixin.qq.com/search?tab=3&type=&serviceType=3&page=1#search-page

2:找到了微信同声传译,登录后选择给哪个小程序添加,添加成功后去小程序的微信公众平台看已经添加成功了,而且是已通过状态。

https://blog.csdn.net/Yang_XiaoYang/article/details/119776605

3:、在微信公众平台登录小程序,添加获取APPID(不可以用测试号,否则功能实现不了),

 

将获取到的APPID填写至微信小程序开发工具中

 

 

 4:app.json中进行注册微信同声翻译

"plugins": {
    "WechatSI": {
      "version": "0.3.4",
      "provider": "wx069ba97219f66d99"
    }
  }

5:js中进行引用

//获取应用实例
const app = getApp()
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI')

 

 data 中写内容

        // 语音识别的内容
        content: '我是王越666',//内容

 

 生命周期函数中

        //创建内部 audio 上下文 InnerAudioContext 对象。
        this.innerAudioContext = wx.createInnerAudioContext();

 

 函数外定义方法

 // 文字转语音
    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(); //播放音频
    },

html中:

<view>
   <button class="showCharacter" bindtap="wordYun">跟我读</button>
</view>

 效果图:这里可以换成图标

 

标签:src,console,log,程序实现,微信,content,res,播放
来源: https://www.cnblogs.com/xiaoyantongxue/p/16227377.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有