首页 > 编程语言 >微信小程序语音播报

微信小程序语音播报

时间:2023-05-09 14:55:23浏览次数:43  
标签:播报 插件 console 语音 tts 微信 innerAudioContext res

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

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

具体实现:

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'
    };
  },
  onl oad() {
		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>

  

 

 

标签:播报,插件,console,语音,tts,微信,innerAudioContext,res
From: https://www.cnblogs.com/zaijin-yang/p/17384506.html

相关文章

  • 笔记本通过HDMI接口扩展显示器,微信/Outlook等界面模糊变清晰的解决办法
    1、笔记本扩展显示器,微信界面显示字体模糊如何解决?解决方案:第一步:鼠标右键打开微信快捷方式,选择‘属性’,找到‘兼容性’,选择‘更改高DPI设置’第二步:高DPI缩放替代:勾选✔‘替代高DPI缩放行为’第三步:点击“确定”。第四步:重新启动微信,微信界面的字体显示清晰了 2、问题......
  • HBuilderX启动微信开发者工具报错[error] Error: Fail to open IDE
    报错提示如下: 解决方法:1.使用自己的账号登录。2.在微信开发者平台上申请appid并更改项目中的appid。3.删除项目中微信小程序的appid,这样就能在HBuilderX中启动游客身份的微信开发者工具。  检查其他步骤是否正确:1.打开微信开发者工具,在安全选项里开启服务端口......
  • 微信公众号认证
    官网文档https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.htmlphp示例代码 publicfunctionindex(){$signature=$_GET["signature"]; $timestamp=$_GET["timestamp"]; $nonce=$_GET[&qu......
  • 新浪微博如何保存语音聊天到本地?
    网上查到的攻略:在网络上搜索微博网页版。打开它,输入个人账号和密码。单击消息标签可以看到关于自己的消息。提到自己的,评论,点赞,留言等。找到想保存的语音界面,会看见语音下载按钮,点击下载,就可以保存录音。但是我使用发现以上攻略不可用,或许是微博更新了。   以下......
  • 微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本
    <viewclass="box"><viewwx:for="{{list}}"wx:key="index"class="one"><viewclass="onedot"></view><viewwx:if="{{index!=list.length-1}}"class="oneline......
  • 【uni.app/微信小程序】 添加与胶囊平齐的盒子
    添加与胶囊平齐的盒子<template><viewclass="search_box":style="'margin-top:'+searchBarTop+'px;height:'+searchBarHeight+'px'">您好</view></template><script> export......
  • 浙江中控2.5SP6使用语音报警
    这一篇博客本来是写在新浪的,不过高深莫测的敏感词系统折腾的我没了脾气。我不知道一个学习笔记会有怎么样的不合时宜,没有任何明示和提示,反正就是有敏感词。     最近需要在现场的计算机上使用浙江中控2.5SP6制作语音报警的功能,于是先在家里计算机的虚拟机上模拟测试一下......
  • 微信支付基于PHP
    //微信JSAPI支付前端页面wx.html<html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1"/><titl......
  • 微信小程序在wxml里不支持includes,indexOf,findIndex等方法
    小程序的wxml文件内不支持数组的includes,indexOf,findIndex等方法。不是垃圾是什么?玩什么标新立异?不会搞就别TM搞。 开发者:我想上二楼。WX:这里有一坨屎,吃子它,就让你上二楼。开发者:@#$%&@^$*^&*&^$%$^ 咋做?在任意目录创建一个.wxs文件,里面写上如下代码:文件-/utils/wuti......
  • 微信公众号对接ChatGPT-实现基于自己知识库的机器人功能-并且可以人工接入进行回复的
    现在很多教程有介绍如何把chatGPT对接到自己的公众号上,利用公众号的自动回复接口功能,实现用户在公众号与chatGPT进行交互。而我实现的功能比上面的要高级很多 首先,用户在公众号端发送咨询消息,可以得到自动回复,并且这个回复是基于我自己的知识库回答的  然后,客服在后台可......