【微信小程序】语音播报，文字转语音，《微信同声传译插件》

sinnoo

发布于 2022-01-04 16:28:41

6.1K0

发布于 2022-01-04 16:28:41

文章被收录于专栏：技术人生技术人生

一、demo界面

1.点击语音阅读，可以阅读界面中文字信息【欢迎使用青悦文阅读平台，希望你开心阅读】

2.点击暂停阅读，可以暂停正在进行的阅读

3.按住说话，可以录入语音，并将转化为文字显示在【这里显示您的语音录入内容】

4.后附小程序源码

二、流程

1.首先引入微信小程序的插件【微信同声传译】

在app.json中进行以下配置

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

位置在小程序开发文档=》扩展能力=》插件服务

2.在index.js中引入插件

var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()

3.在页面onLoad时，初始化语音监听，在onReady时，初始化语音播放变量

三、源码

1.index.js

// pages/tools/voice/index.js
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()
const app = getApp()
Page({
  data: {
    content: '欢迎使用青悦文阅读平台，希望你开心阅读',
    text: '这里显示您的语音录入内容',
    auidoSrc: ''
  },
  onReady: function () {
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      wx.showToast({
        title: '语音播放初始化失败',
      })
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //识别内容返回时间
    var that = this;
    manager.onRecognize = function (res) {
      console.log("current result", res.result)
    };
    // 识别结束事件
    manager.onStop = (res) => {
      let text = res.result;
      if (text == "") {
        wx.showToast({
          title: '识别内容为空,请说清楚',
        })
        this.setData({
          text: '这里显示您的语音录入内容',
        })
      } else {
        if (text.indexOf('小青') != -1) {
          text = '小青在呢，主人有什么吩咐';
        }
        this.setData({
          text: text,
        });
      }
    };
    //识别错误时间
    manager.onError = function (res) {
      var text = '其他错误';
      if (res.retcode == -30001 || res.retcode == -30012) {
        text = '右上角进行设置';
        that.setData({
          text: '这里显示您的语音录入内容',
        })
      }
      wx.showToast({
        title: text,
        icon: 'none',
        duration: 3000,
      })

    }
  },
  //开始录音
  postData: function () {
    manager.start({ duration: 30000, lang: "zh_CN" })
    this.setData({
      text: '正在聆听...',
    });
    manager.onStart = function (res) {
      //console.log("成功开始录音识别", res)
    }
  },
  stopData: function () {
    manager.stop();
  },
  //阅读文字
  readText: function () {
    var content = this.data.content;
    var that = this;
    plugin.textToSpeech({
      lang: "zh_CN",
      tts: true,
      content: content,
      success: function (res) {
        that.setData({
          auidoSrc: res.filename
        })
        that.readStart();
      },
      fail: function (res) {
        wx.showToast({
          title: '语音转换失败',
        })
      }
    })

  },
  //开始阅读文字
  readStart: function () {
    if (this.data.auidoSrc == '') {
      return;
    }
    this.innerAudioContext.src = this.data.auidoSrc //设置音频地址
    this.innerAudioContext.play(); //播放音频

  },
  //暂停阅读
  readPause: function () {
    this.innerAudioContext.pause();
  }
})

2.index.json

{
  "usingComponents": {}
}

3.index.wxml

<!--pages/tools/voice/index.wxml-->
<view style="text-align:right"> <button class="mini-btn" type="default" size="mini" open-type="openSetting"
    bindopensetting="callback">
    打开设置页</button></view>
<view style="margin-top:20px" data-text="{{content}}">{{content}}</view>
<view style="margin-top:40px"><text>{{text}}</text></view>

<view style="margin-top:200px;text-align:center;">
  <button type="warn" bindtap="readText" size="mini">语音阅读</button>
  <button type="primary" bindtap="readPause" size="mini" style="margin-left:50px;">暂停阅读</button>
  <view style="width:100%;margin-top:40rpx;">
    <button type="primary" bindlongpress="postData" bindtouchend="stopData" style="background-color:#CC812B">
      按住 说话 </button>
  </view>
</view>

4.index.wxss