React Native答题App离线语音旁白功能实现技术咨询

一、推荐库与技术选型 #

1. 离线Text-to-Speech（TTS）库 #

• react-native-tts：跨平台常用TTS库，封装了iOS的AVSpeechSynthesizer和Android系统TTS引擎，支持离线使用（需提前下载对应语言的离线语音包），上手成本低。
• 原生TTS API：直接调用iOS/Android原生接口，适合需要高度定制的场景，但开发复杂度略高。

2. 预录制音频方案 #

如果对语音音色、语调有严格要求，可提前将所有段落转换为MP3等格式的音频文件，通过react-native-sound或React Native内置Audio模块播放，完全脱离网络依赖。

二、离线环境下文本转音频的两种方式 #

1. TTS实时转换（无需提前生成音频） #

• Android：在设备系统设置的「文字转语音输出」中，下载对应语言的离线语音包（如Google文字转语音的离线包）。
• iOS：系统AVSpeechSynthesizer默认支持离线TTS，无需额外下载，会自动缓存常用语音资源。
• 代码层面直接调用TTS库的speak方法，即可实时将文本转为语音播放。

2. 预录制音频文件 #

• 用在线TTS工具（如Google TTS）将段落文本转为音频后下载，或使用本地工具（如Windows语音合成、Mac终端TTS命令）生成音频文件。
• 将音频放入项目assets/audio目录，在metro.config.js中配置资源打包规则，确保打包时包含这些文件。

三、组件集成与触发播放 #

方案1：使用react-native-tts实现实时TTS #

1. 安装依赖：

npm install react-native-tts
# 或
yarn add react-native-tts

2. 组件集成示例：

import React, { useEffect, useRef } from 'react';
import { View, Text } from 'react-native';
import TTS from 'react-native-tts';

const QuestionIntro = ({ introText }) => {
  const ttsReady = useRef(false);

  useEffect(() => {
    // 初始化TTS配置
    const initTTS = async () => {
      await TTS.setDefaultLanguage('zh-CN');
      // Android可指定第三方TTS引擎，如Google TTS
      // await TTS.setEngineByPackageName('com.google.android.tts');
      ttsReady.current = true;
    };

    initTTS();

    // 组件卸载时清理TTS资源
    return () => {
      TTS.stop();
      TTS.destroy();
    };
  }, []);

  useEffect(() => {
    // 段落加载完成后自动触发语音播放
    if (ttsReady.current && introText) {
      TTS.speak(introText);
    }
  }, [introText]);

  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16 }}>{introText}</Text>
    </View>
  );
};

export default QuestionIntro;

方案2：预录制音频播放 #

1. 安装依赖：

npm install react-native-sound
# 或
yarn add react-native-sound

2. 配置资源打包：在metro.config.js中添加：

module.exports = {
  assets: ['./assets/audio/'],
};

3. 组件集成示例：

import React, { useEffect, useRef } from 'react';
import { View, Text } from 'react-native';
import Sound from 'react-native-sound';

// 设置音频播放类别，避免被系统静音
Sound.setCategory('Playback');

const QuestionIntro = ({ audioFileName }) => {
  const soundInstance = useRef(null);

  useEffect(() => {
    // 加载打包在App内的音频文件
    soundInstance.current = new Sound(audioFileName, Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('音频加载失败:', error);
        return;
      }
      // 音频就绪后自动播放
      soundInstance.current.play();
    });

    // 组件卸载时释放音频资源
    return () => {
      if (soundInstance.current) {
        soundInstance.current.release();
      }
    };
  }, [audioFileName]);

  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16 }}>问题引导段落</Text>
    </View>
  );
};

// 使用示例：<QuestionIntro audioFileName="intro_question_01.mp3" />
export default QuestionIntro;

注意事项 #

• TTS方案需在Android设备上引导用户首次启动时下载离线语音包，iOS无需额外操作。
• 预录制音频需注意文件体积，可通过压缩工具降低比特率，避免App包过大。
• 播放时需处理音频焦点，避免与其他应用的音频播放冲突。

内容的提问来源于stack exchange，提问作者Neia