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

互联网 2022/5/6 11:12:49

1:登录微信服务平台 https://fuwu.weixin.qq.com/search?tab=3&type=&serviceType=3&page=1#search-page 2:找到了微信同声传译,登录后选择给哪个小程序添加,添加成功后去小程序的微信公众平台看已经添加成功了,而且是已通过状态。 https://blog.csdn.n…

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>

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

 

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[微信小程序实现文字语音播放]http://www.zyiz.net/tech/detail-319707.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>