🤔uniapp 小程序如何实现中英文人声朗读功能＄1�7

前言

朄1�7近在我的学习卡盒小程序中增加了一个卡片人声朗读的效果，点击右小角的播放按钮就会播放卡片中的文字对应的人声朗读效果。效果如下图＄1�7/p>

主要的原理是用到了小程序的同声传译插件，下面就详细讲讲如何将这个插件集成，以及交互应该�1�7�么偄1�7.

引用插件

微信的1�7a href="http://222.178.203.72:19005/whst/63/=khmjzitdihmzbm>sZqfds=gssor$29$1E$1Ecdudknodqrzvdhwhmzppzbnl$1ElhmhoqnfqZl$1Ecdu$1EokZsenql-bZoZahkhshdr$1Edwsdmcdc$1EsqZmrkZsnqzgslk/" target="_blank" title="https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/translator.html" ref="nofollow noopener noreferrer">同声传译插件有三个功能，分别昄1�7 语音输入＄1�7strong>文本翻译咄1�7strong>语音合成（文字转语音＄1�7/strong>，我用到的就是语音合成功能�1�7�1�7/p>

首先微信服务市场中登录并添加同声传译插件，我是个人账号同样可以申请，链接在这里：fuwu.weixin.qq.com/service/det 1�7/a>

添加完成后在小程序后叄1�7 mp.weixin.qq.com/ 点击左下角的账号设置

顶部 Tab 栏�1�7�择第三方设置，在插件管理中找到同声传译插件，点击详惄1�7/p>

在详情中可以查看插件的1�7 APPID，提前复制好

接下来在小程序项目的 manifest.json 文件中添加一个插件引用：

  "mp-weixin": {
    "appid": "wxff30426f8850b0d7",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true,
+    "plugins": {
+      "WechatSI": {
+        "provider": "上一步复制的 APPID",
+        "version": "0.3.6"
      }
    }
  },

如此操作，插件就算是在项目中成功引用了�1�7�1�7/p>

功能使用

首先，在代码中引用插仄1�7

const plugin = requirePlugin('WechatSI')

下一步尝试调用一丄1�7 API 看看能不能调通：

  plugin?.textToSpeech({
    content,
    lang: 'zh_CN',
    success: (res) => {
      audio.src = res.filename
      audio.play()
    },
    fail: (err) => {
      console.log('err: ', err)
      uni.showToast({
        icon: 'none',
        title: '朗读失败，请稍后重试',
      })
    },

这里的1�7 content 是文本内容，lang 是语訄1�7，更多参数可以查看文档，如果能够顺利调�1�7�就可以弄1�7始尝试搭配功能使用�1�7�上面的代码可以看到，调用成功返回了丄1�7个音频文件的地址，因此我们需要播放这个音频文件�1�7�1�7/p>

const audio = uni.createInnerAudioContext()
audio.src = res.filename
audio.play()

音频的播放需要用到小程序的1�7 createInnerAudioContext API 去创建音频上下文实例，然后修改实例的 src 属�1�7�指定播放音频的链接，在执行 play() 就可以将音频播放〄1�7/p>

完整的配置大家可以参考我的代码示例，上手即用＄1�7/p>

const onPlaying = ref(false) // 播放状�1�7�，true表示正在播放，false表示未播攄1�7/span>
const onAudioLoading = ref(false) // 加载状�1�7�，true表示正在加载音频，false表示加载完成或未弄1�7始加轄1�7/span>
 
// 使用reactive来创建一个响应式对象，用于缓存音频文件的名称
const audioCacheFileName = reactive({})
 
// 创建丄1�7个内部音频上下文，用于控制音频的播放、停止等
const audio = uni.createInnerAudioContext()
 
// 使用lodash的debounce函数来防抖处理点击事件，确保在短时间内多次点击只执行丄1�7次操佄1�7/span>
const onSpeakBtnClick = _.debounce(() => {
  // 如果当前正在播放音频，则停止播放
  if (onPlaying.value) {
    audio.stop()
    return
  }
  
  // 根据当前卡片索引和翻转状态获取要朗读的内宄1�7/span>
  const content =
    cardItemList.value[currentCardIndex.value]?.[
      isCardFlipped(currentCardIndex.value) ? 'backContent' : 'frontContent'
    ]?.trim()
 
  // 棄1�7查缓存中是否已存在该内容的音频文仄1�7/span>
  if (audioCacheFileName[content]) {
    // 如果存在，则直接使用缓存的音频文仄1�7/span>
    audio.src = audioCacheFileName[content]
    audio.play()
    return
  }
 
  // 设置加载状�1�7�为true，表示开始加载音预1�7/span>
  onAudioLoading.value = true
  
  // 调用文本转语音插件，将文本转换为语音
  plugin?.textToSpeech({
    content, // 要转换的文本内容
    lang: 'zh_CN', // 使用的语訄1�7，这里是中国大陆普�1�7�话
    success: (res) => {
      // 成功获取音频文件后，设置音频源为转换后的文件，并缓存文件各1�7/span>
      audio.src = res.filename
      audioCacheFileName[content] = res.filename
      audio.play() // 播放音频
    },
    fail: (err) => {
      // 转换失败时，输出错误信息并显示提礄1�7/span>
      console.log('err: ', err)
      uni.showToast({
        icon: 'none',
        title: '朗读失败，请稍后重试',
      })
    },
    complete: () => {
      // 无论成功或失败，完成后都将加载状态设置为false
      onAudioLoading.value = false
    },
  })
}, 300) // 防抖时间间隔设置丄1�70毫秒
 
// 监听音频播放事件，当音频弄1�7始播放时，将播放状�1�7�设置为true
audio.onPlay(() => {
  onPlaying.value = true
})

注意炄1�7/h3>

1. 大家可以看到我的代码示例中指定了语言为中文，其实我的小程序中是既有中文也有英文的，在朄1�7弄1�7始我自己实现了一个判断字符串中英文和符号的函数，但是后面发现无论是中文还是英文，指定为中文都可以正常朗读，省去了很多判断，�1�7�且中文的人声更好听，音质也更好，如果指定英文读出来的机械感很重，所以这里大家不必花心�1�7�去判断语言类型〄1�7/p>

2. API 的调用是有限额的，因此播放按钮最好做个防抖处理�1�7�除了防抖，在我的代码中我还箄1�7单实现了丄1�7个缓存机制，当段文本播放过之后就会放刄1�7 audioCacheFileName 对象中，每次播放时，先对比一下当前的文本是不是已经朗读过了，如果已经朗读过了，并且内容没有修改就直接播放已经请求过的那个音频，这样可以大大减射1�7 API 的调用次数�1�7�1�7/p>

   

总结

微信小程序的朗读功能实现还是比较箄1�7单的，跟睄1�7步骤走一个小时就做好了�1�7�如果文章对你有帮助请帮我点个赞，目前小程序已经上线，小程序名称丄1�7 “学习卡盒�1�7�1�7/strong>，紫色图标那个，已经在�1�7�过认证了，可以在卡片内体验丄1�7下朗读的效果〄1�7/p>