微信小程序语音播报

发布时间 2023-05-09 14:53:26作者: zaijinyang

需求:需要用户一开始进入小程序的某个页面就进行语音播报;

解决方案:使用微信小程序插件“微信同声传译”可以达到该功能;

具体实现:

1、微信公众平台=>设置=>第三方设置=>插件管理=>添加插件=>'微信同音传译'=>添加(目前暂不支持个人开发者使用):

2、引入小程序插件:

2.1 复制插件AppID

 2.2 打开项目中的manifest.json=>源码视图=>添加如下代码:

 3、具体代码实现:

<template>
  <view class="content">
    <button @click="openVoice">播放语音</button>
  </view>
</template>

<script>
const plugin = requirePlugin('WechatSI');
const innerAudioContext = wx.createInnerAudioContext();
export default {
  data() {
    return {
      title: 'Hello'
    };
  },
  onLoad() {
		this.openVoice();
	},
  onReady() {
    innerAudioContext.onError(function (res) {
      wx.showToast({
        title: '语音播放失败',
        icon: 'none'
      });
    });
  },
  methods: {
    openVoice() {
      let _this = this;
      console.log(plugin);
      plugin.textToSpeech({
        lang: 'zh_CN',
        tts: true,
        content: '支付宝成功收款200万元',
        success: function (res) {
          console.log('succ tts', res.filename);
					_this.yuyinPlay(res.filename)
        },
        fail: function (res) {
          console.log('fail tts', res);
        },
        complete: function (res) {
          console.log('complete tts', res);
        }
      });
    },
    yuyinPlay(src) {
      if (src == '') {
        return;
      }
      innerAudioContext.autoplay = true;
      innerAudioContext.src = src; //设置音频地址
      innerAudioContext.play(); //播放音频
    }
  }
};
</script>