微信小程序语音转文字demo

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

最近做了个微信小程序语音输入转文字的需求,记录一下

微信小程序支持通过语音识别 API 实现语音转文字的功能,可以按照以下步骤进行设置:

  1. 在小程序的 json 配置文件中,添加 record 权限:
"permission": {
  "record": {
    "desc": "用于语音输入"
  }
}
  1. 在小程序的 wxml 文件中,添加录音组件:
<recorder id="recorder" duration="60000" 
  event-bindend="onRecordEnd" 
  event-binderror="onRecordError"></recorder>

其中,duration 表示录音时长,单位为毫秒。

  1. 在小程序的 js 文件中,使用语音识别 API 将录音转换为文字:
const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()
const options = {
  duration: 60000,
  lang: 'zh_CN'
}

// 语音转文字
const recognize = (tempFilePath) => {
  wx.uploadFile({
    url: 'https://api.weixin.qq.com/cgi-bin/media/voice/addvoicetorecofortext?access_token=' + access_token,
    filePath: tempFilePath,
    name: 'voice',
    success(res) {
      console.log(res.data);
    }
  })
}

// 录音开始
onRecordStart() {
  recorderManager.start(options)
}
// 录音结束
onRecordEnd() {
  recorderManager.stop()
}
// 录音出错
onRecordError(error) {
  console.log('record error:', error);
}
// 录音结束,监听录音结束事件
recorderManager.onStop((res) => {
  console.log('record path:', res.tempFilePath);
  // 播放录音
  innerAudioContext.autoplay = true
  innerAudioContext.src = res.tempFilePath
  // 语音转文字
  recognize(res.tempFilePath)
})

以上代码会通过 wx.uploadFile 方法将录音上传到微信的服务器,并使用 API 将录音转换为文字,最终返回转换后的文本结果。在实际开发中,还需要根据实际需求进行代码修改。

注意,使用语音识别 API 需要先获取 access_token,具体参考微信开发者文档。文章来源地址https://www.toymoban.com/news/detail-679021.html

到了这里,关于微信小程序语音转文字demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uni-app语音转文字功能demo(同声传译)

    目录 首先去微信开发者官网申请一下同声传译的插件  微信公众平台 在文件中开始引用: 首先去微信开发者官网申请一下 同声传译 的插件   微信公众平台 后续使用的时候可以看详情里面的信息进行使用 在文件中开始引用: 注意!!在这个源码视图中开始引入插件!!

    2024年02月09日
    浏览(36)
  • 微信小程序常见的demo

    方法一: html部分 js部分 wxss部分 要点总结: 先在data中声明变量,在html的标签中写入方法,代入到js中,一个是打开窗口的状态,一个是关闭窗口的状态 效果图 html部分 js部分 hidden 属性 在 Vue 中我们可以通过 v-show 来控制组件是否显示 在小程序中所有组件都支持hidden属性,

    2024年01月18日
    浏览(26)
  • 微信小程序实现路线规划demo

    本文旨在以mpvue框架为基础,探讨地图类小程序的开发思路。 原作者利用mpvue + 腾讯地图的能力做了一个地铁路线规划的小程序,主要提供全球主要城市的地铁线网图及旅游介绍,其中国内城市支持查看地图和路线规划。 目前腾讯位置服务也推出了路线规划插件、地铁图插件

    2024年02月08日
    浏览(33)
  • 微信小程序tab加列表demo

    一、效果 代码复制即可使用,记得把图标替换成个人工程项目图片。 微信小程序开发经常会遇到各种各样的页面组合,本demo为list列表与tab组合,代码如下: 二、json代码 三、xml 四、css 五、ts代码

    2024年02月14日
    浏览(27)
  • 微信小程序拍照页面自定义demo

    api文档

    2024年02月07日
    浏览(31)
  • 微信小程序实现的一个登录页面Demo

    微信小程序登录页面示例代码,包括了获取验证码按钮等30秒点一次功能和勾选同意用户条款的功能,仅供参考,效果图如下 *.wxml文件: *.wxss文件: *.js文件: 这个示例代码实现了一个登录页面,并且包括了输入手机号和验证码,获取验证码按钮,勾选同意用户条款,登录按

    2024年02月03日
    浏览(32)
  • 微信小程序引入高德地图Demo 快速上手

    本文参照官方文档进行编写 最后引入官方实例 最终效果 ` 注册账号 https://lbs.amap.com/?ref=http%3A%2F%2Flbs.amap.com%2Fdev%2F#/ 获取Key教程 https://lbs.amap.com/api/wx/guide/create-project/get-key/ 访问网址 https://github.com/amap-demo/wx-regeo-poiaround-weather 下载微信小程序实例 用微信开发者工具打开 打开

    2024年02月11日
    浏览(42)
  • uniapp 微信小程序:RecorderManager 录音DEMO

    使用 RecorderManager 实现录音。及相关的基本操作。(获取文件信息,上传文件) 此图包含Demo中用于上传测试的服务端程序 upload.exe ,下载后用解压工具打开即可。 上传接口如代码中所示: http://127.0.0.1:8999/upload 上传成功的文件,保存在 upload.exe 所在目录。 单文件demo,创建个

    2024年02月11日
    浏览(29)
  • 微信小程序 + Java + Mysql(登录 Demo)

    目录 一、开发前准备 二、设计登录页面(小程序) 三、创建 Maven 项目 四、创建数据库与数据表 五、后台代码(Java Servlet) 六、运行 七、总结 建议  1、注册一个微信开发者账号:https://open.weixin.qq.com (略)  2、开发工具:idea、Mysql、微信开发者工具  3、应用技术:Ja

    2024年02月03日
    浏览(28)
  • 微信小程序图片文字居中显示

    在微信小程序中,可以通过以下方法将图片和文字居中显示: 1. 使用flex布局:在父容器中设置display为flex,并使用justify-content和align-items属性来实现居中。示例代码如下: ```css .container {   display: flex;   justify-content: center;   align-items: center; } ``` ```xml view class=\\\"container\\\"   image

    2024年02月16日
    浏览(78)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包