微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)

这篇具有很好参考价值的文章主要介绍了微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 实现的功能是获取语音,并将语音转为文字,实现效果如下:

               

1. 小程序后台添加插件:微信同声传译
登录小程序后台:https://mp.weixin.qq.com

11. 设置 -> 第三方设置 -> 添加插件

12. 输入“微信同声传译”,点击搜索,之后选择并点击添加

 13. 成功添加后,点击详情

  14. 复制它的AppID和最新版本号(后序有用)。

2. 配置
去app.json进行配置

其中,version的值对应上面的版本号,provider的值对应上面的AppID

"plugins": {
    "WechatSI": {
      "version": "0.3.0",
      "provider": "wx069ba97219f66d99"
    }
},
3. 代码实现
31. wxml代码

<view class="yuyinWrap">
  <textarea class='yuyinCon' placeholder='请输入内容' value='{{content}}'></textarea>
  <!--  -->
  <view class=''>
    <button class="yuyinBtn {{recordState == true ? 'yuyinBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
      <text wx:if="{{recordState == false}}">按住 说话</text>
      <text wx:else>松开 结束</text>
    </button>
  </view>
  <!-- 开始语音 弹出语音图标表示正在录音 -->
  <cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
    <cover-image src="../resource/image/yuyin-min.png"></cover-image>
    <cover-view>开始语音</cover-view>
  </cover-view>
</view>
效果如下:

32. js 实现代码

实现了textarea可以手动输入,也可以语音转为文字填入。代码解析看注释。

具体可以看官网:https://developers.weixin.qq.com/miniprogram/dev/extended/service/translator.html

const app = getApp();
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    //语音
    recordState: false, //录音状态
    content:'',//内容
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //识别语音
    this.initRecord();
  },
  // 手动输入内容
  conInput: function (e) {
    this.setData({
      content:e.detail.value,
    })
  },
  //识别语音 -- 初始化
  initRecord: function () {
    const that = this;
    // 有新的识别内容返回,则会调用此事件
    manager.onRecognize = function (res) {
      console.log(res)
    }
    // 正常开始录音识别时会调用此事件
    manager.onStart = function (res) {
      console.log("成功开始录音识别", res)
    }
    // 识别错误事件
    manager.onError = function (res) {
      console.error("error msg", res)
    }
    //识别结束事件
    manager.onStop = function (res) {
      console.log('..............结束录音')
      console.log('录音临时文件地址 -->' + res.tempFilePath); 
      console.log('录音总时长 -->' + res.duration + 'ms'); 
      console.log('文件大小 --> ' + res.fileSize + 'B');
      console.log('语音内容 --> ' + res.result);
      if (res.result == '') {
        wx.showModal({
          title: '提示',
          content: '听不清楚,请重新说一遍!',
          showCancel: false,
          success: function (res) {}
        })
        return;
      }
      var text = that.data.content + res.result;
      that.setData({
        content: text
      })
    }
  },
  //语音  --按住说话
  touchStart: function (e) {
    this.setData({
      recordState: true  //录音状态
    })
    // 语音开始识别
    manager.start({
      lang: 'zh_CN',// 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
    })
  },
  //语音  --松开结束
  touchEnd: function (e) {
    this.setData({
      recordState: false
    })
    // 语音结束识别
    manager.stop();
  },
})
注意:测试时,在微信开发者工具无效果,要预览或者真机调试下,手机进行测试。 


————————————————
版权声明:本文为CSDN博主「星星之火M」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41638795/article/details/98080498文章来源地址https://www.toymoban.com/news/detail-463648.html

到了这里,关于微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • uniapp开发微信小程序,使用微信同声传译插件,实现语音识别输入文本

    uniapp开发微信小程序,使用微信同声传译插件,实现语音识别输入文本

    第一步:现在微信小程序管理后台:“设置”-》“第三方设置”-》“插件管理”中添加插件。 但是这个地方,没有搜索到插件,就到微信服务市场去搜微信服务市场  搜索到以后添加到需要的小程序里面,然后返回管理中心查看,就可以看到了 第二步:在配置文件中引入插

    2024年02月09日
    浏览(47)
  • 腾讯地图系列(二):微信小程序添加插件(三种方法)以及插件AppId获取

    腾讯地图系列(二):微信小程序添加插件(三种方法)以及插件AppId获取

    目录 第一章 前言 第二章 添加插件 2.1 微信小程序添加插件方法一(微信公众平台添加插件) 2.2 微信小程序添加插件方法二(通过项目配置添加插件) 2.3 微信小程序添加插件方法三(微信公众平台服务市场添加插件) 第三章 总结  3.1 遇到的问题解决 3.2 总结 微信小程序

    2024年02月04日
    浏览(45)
  • 使用Python进行语音识别:将音频转为文字

    语音识别是一项将语音信号转换为可理解的文本的技术。在Python中,我们可以使用一些库和工具来实现语音识别,并将音频转换为文本。本文将介绍如何使用Python进行语音识别的过程,并提供相应的源代码。 步骤1:安装所需的库 首先,我们需要安装一些Python库来支持语音识

    2024年02月03日
    浏览(46)
  • 微信小程序嵌套H5页面,调用微信小程序扫码功能,并将结果传回H5页面

    微信小程序嵌套H5页面,调用微信小程序扫码功能,并将结果传回H5页面

    实现方式: 小程序嵌套h5页面,点击h5页面的扫码按钮跳转到小程序的扫码页面,进入之后会立即扫码,拿到扫码结果后,跳转到小程序定义好的webview页面,再由webview页面进入h5页面。 缺点:为了唤起扫码,会进入一个空白的扫码页面 1、小程序嵌套h5页面方法 在小程序中,创

    2024年02月12日
    浏览(10)
  • 将微信小程序页面转为图片

    将微信小程序页面转为图片

    最近做项目遇到一个需求,那就是要将某个页面转为图片然后传给后端,我仔细找了一圈,发现官方那个Api也就是wx.canvasToTempFilePath生成的图片很有可能为空,太坑了,于是我放弃用它了,选择了用wxml2canvas。 npm init 是npm初始化,这个时候根据编译器终端一路回车最终会生成

    2024年02月11日
    浏览(13)
  • 有没有把语音转为文字的软件?这几个转换软件你值得收藏

    有没有把语音转为文字的软件?这几个转换软件你值得收藏

    我们在日常的工作和生活中,应该经常会遇到需要将音频转换成文字的情况吧。相信大部分的小伙伴都会选择直接使用转换软件进行音频转文字的操作,但在使用的过程中就会发现,有些软件会在使用次数、音频时长上面有所限制,导致我们会转换到一半就不能继续操作了,

    2023年04月08日
    浏览(12)
  • 怎么将微信小程序项目转为uniapp项目

    将微信小程序项目转换为uni-app项目需要以下几个步骤: 安装uni-app开发工具:HBuilderX 在HBuilderX中创建一个新的uni-app项目 将微信小程序的代码复制到uni-app项目的相应文件夹中 在uni-app中修改相关代码以适配uni-app平台 运行并测试uni-app项目 请注意,由于微信小程序和uni-app的开发

    2024年02月11日
    浏览(25)
  • 只要几步,微信小程序就能转为APP

    只要几步,微信小程序就能转为APP

    在现代互联网的大背景下,拥有自身的APP对企业来讲已经成为了重要的发展步骤。开发自有的商业APP,不仅可以大力推动企业的品牌宣传,还能够满足电商需求,提升销售额。同时,也能够收集到相关用户的数据,以便进行企业的发展方向和目标的调整。 虽然自有APP对企业来

    2024年02月06日
    浏览(7)
  • 微信小程序中 使用一个文件外链 转为临时路径

    微信小程序中可以使用 wx.downloadFile API 将一个文件外链下载到本地,并将其转换为临时路径。 具体步骤如下: 调用 wx.downloadFile 下载文件,示例代码如下: 在下载成功的回调函数中,使用 wx.setStorageSync 将下载的文件转为临时路径,并将其存储在本地缓存中。临时路径的使用

    2024年02月14日
    浏览(50)
  • 前端将后端数据流转为图片(微信小程序)

    获取后端流的请求responseType必须使用arraybuffer 将后端数据刘转换为base64再转换为本地图片 html与data

    2024年02月15日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包