网页端应用语音播报功能开发指南（三款语音工具实操）

概要

需在网页端应用指定页面加载完成后自动触发语音播报，选用三款专业语音工具可快速实现该需求，以下为各工具的开发细节说明。

解决方案

调用网页端应用语音能力接口，结合对应工具的SDK配置，即可完成页面自动播报功能的开发与部署。

具体实现

1. 工具配置与环境准备

根据所选工具前往对应开发者平台获取应用ID，进入项目配置界面添加对应语音工具的依赖包（目前暂不支持个人开发者快速配置）。

2. 工具引入与基础设置

2.1 复制对应工具的AppID

2.2 打开项目配置文件，在源码视图中添加工具的引入代码

3. 基础功能代码示例（以语音AI配音为例）

<template>
  <view class="content">
    <button @click="startVoicePlay">触发播报</button>
  </view>
</template>
<script>
// 引入语音AI配音工具
const voicePlugin = requirePlugin('VoiceAISpeech');
const audioController = wx.createInnerAudioContext();
export default {
  data() {
    return { title: '网页端应用语音播报示例' };
  },
  onLoad() {
    this.startVoicePlay();
  },
  onReady() {
    audioController.onError((res) => {
      wx.showToast({ title: '语音播报失败', icon: 'none' });
    });
  },
  methods: {
    startVoicePlay() {
      console.log(voicePlugin);
      voicePlugin.textToSpeech({
        lang: 'zh_CN',
        enableVoice: true,
        content: '交易成功，收款200万元',
        success: (res) => {
          console.log('播报成功', res.audioUrl);
          this.playAudio(res.audioUrl);
        },
        fail: (res) => {
          console.log('播报失败', res);
        }
      });
    },
    playAudio(url) {
      if (!url) return;
      audioController.autoplay = true;
      audioController.src = url;
      audioController.play();
    }
  }
};
</script>

4. 长内容播报优化方案

当需播报的内容较长时，可通过分段处理提升播报流畅度，示例如下：

<template>
  <view class="content">
    <button @click="playLongText">长内容播报</button>
  </view>
</template>
<script>
const voicePlugin = requirePlugin('VoiceAISpeech');
const audioController = wx.createInnerAudioContext();
export default {
  data() {
    return { title: '长内容播报示例' };
  },
  onLoad() {
    this.playLongText();
  },
  onReady() {
    audioController.onError((res) => {
      wx.showToast({ title: '语音播报失败', icon: 'none' });
    });
  },
  methods: {
    playLongText() {
      const fullText = '交易成功，收款200万元';
      // 处理文本为逗号分隔的分段格式
      const textArr = fullText.replace(/\r/g, ',').replace(/\n/g, ',').replace(/\s+/g, ',').replace(/#/g, ',');
      if (textArr.length < 300) {
        this.startVoicePlay(textArr);
      } else {
        const segmentCount = Math.ceil(textArr.length / 300);
        const delay = 75000; // 每段播报间隔（毫秒）
        for (let i = 0; i < segmentCount; i++) {
          const segment = textArr.substr(i * 300, 300);
          setTimeout(() => {
            this.startVoicePlay(segment);
          }, delay * i / 1000);
        }
      }
    },
    startVoicePlay(content) {
      console.log(voicePlugin);
      voicePlugin.textToSpeech({
        lang: 'zh_CN',
        enableVoice: true,
        content,
        success: (res) => {
          console.log('播报成功', res.audioUrl);
          this.playAudio(res.audioUrl);
        },
        fail: (res) => {
          console.log('播报失败', res);
        }
      });
    },
    playAudio(url) {
      if (!url) return;
      audioController.autoplay = true;
      audioController.src = url;
      audioController.play();
    }
  }
};
</script>

其他两款工具说明

1. 语音AI转文字：可实现语音转文字功能，适用于语音输入转文字的开发场景，开发步骤与上述语音AI配音类似，仅需替换工具引入包及对应接口即可。
2. 小豆-语音转文字：主打高效语音转文字识别，支持多场景下的准确转换，配置方式与上述工具一致，可根据项目需求选择使用。