react native 集成腾讯语音合成TTS(android)

1. 实现方式说明

本文采用两种方式集成,一是Activity集成,播放的时候需要跳转到新的Activity;二是直接在模块里面集成语音合成需要的相关代码,可以理解为用js代码请求,用adroid代码播放。
第二种是第一种方式的升级,也是在开发中发现可以不用Activity也可以实现。开发中学习了一些安卓的知识,也比较有意思,故把两种实现方式都放出来。

2. 需求场景

需求是将一个长文本切分成多份,实时的播报出来,腾讯云的流式语音合成可以很好的实现需求。如果直接生成长文本的语音,需要等待腾讯的回调,客户端无法即时的知道是否已经生成完毕;而使用流式语音合成,传入文本参数后,就可以实时播报。

腾讯云对于长文本语音合成的说明:

支持长文本语音合成、实时语音合成、基础语音合成三种合成方式。长文本语音合成与基础语音合成为非流式,整个文本合成语音后再下发,长文本语音合成可以一次性合成较长文本,适合阅读播报、新闻媒体等场景。流式语音合成(实时语音合成)为一边合成声音,一边下发声音,适合语音机器人等实时性要求较高的场景。

3. 安卓集成

3.1. 说明

腾讯云提供了一个官方的demo,官方demo可以直接运行,为了能够快速的集成tts实现需求, 决定将tt功能放到activity里,需要使用的时候,调起activity。官方demo里面的activity是LongTextTtsActivity,我们直接使用即可,下面的章节,我会逐渐对LongTextTtsActivity进行补充说明。

3.2. 添加安卓原生模块

想要调起一个新的acvitity,需要从安卓代码使用startActivity调起,添加一个原生模块,就可以使用js代码调起了。如果添加原生模块,可以参考react native的官方文档,这里直接贴上代码。
playLongText方法支持传入title 、content,在通过intent传到LongTextTtsActivity里

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
 * @author cauyyl
 * @date 2022-08-30
 */
public class TTSModule extends ReactContextBaseJavaModule {

    private static final String TAG = "tts";

    private static ReactApplicationContext context;
    public static Callback ttsCallBack;

    public TTSModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }


    @Override
    public String getName() {
        return "TTS";
    }
    @ReactMethod
    public void playLongText(String title, String content, Callback callback) {
        ttsCallBack=callback;
//        ReactApplicationContext context = getReactApplicationContext();
        Intent intent = new Intent(context, LongTextTtsActivity.class);
        intent.putExtra("title", title);
        intent.putExtra("content", content);
        context.startActivityForResult(intent, 123, new Bundle());
    }
}

3.3. Activity的实现

在腾讯云提供的demo中,已经实现了一个具有UI的Activity,直接把demo里面的相关文件都粘贴到项目中,

LongTextTtsActivity.java
MyCrashHandler.java
SpinnerItem.java

LongTextTtsActivity已经支持输入文本,然后播放文本的内容,本次需求是从原生模块传递内容进行播报,因此需要接收一下content,在开始播放的事件中,将文本内容改成从Intent传递过来的内容,附上代码示例。

        Intent intent = getIntent(); //定义接收数据的Intent
    	String titleText;
        titleText = intent.getStringExtra("title");
        String ttsText;
        ttsText = intent.getStringExtra("content");
         /**直接鉴权**/
        mTtsController.init(this,11111111L
                , "secretKey"
                , "token");

        /**使用临时密钥鉴权
         * * 1.通过sts 获取到临时证书 (secretId secretKey  token) ,此步骤应在您的服务器端实现,见https://cloud.tencent.com/document/product/598/33416
         *   2.通过临时密钥调用接口
         * **/
//        mTtsController.init(this, Long.valueOf(DemoConfig.apppId)
//                , "临时secretId"
//                , "临时secretKey"
//                ,"对应的token");

        requestAudioFocus(mTtsController);

        if (mTtsController == null){
            return;
        }

        //设置语速
        mTtsController.setVoiceSpeed(tts_speed);

        //设置音色
        mTtsController.setVoiceType(tts_voice);

        //设置语言
        mTtsController.setVoiceLanguage(tts_language);

        //设置ProjectId 不设置默认使用0,说明:项目功能用于按项目管理云资源,可以对云资源进行分项目管理,详情见 https://console.cloud.tencent.com/project
        mTtsController.setProjectId(0);

        start(ttsText);//如果入参文本比较长,建议放在子线程
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Native提供了一个称为Native Modules的机制,允许您在React Native应用程序中使用原生代码。因此,您可以使用Java或Kotlin编写原生Android代码,并将其与React Native应用程序集成。以下是一些步骤: 1.创建一个新的Android库项目。 2.在您的React Native项目中创建一个新的Native Module。 3.将您的原生代码添加到Android库项目中。 4.编写Java或Kotlin代码来公开原生方法。 5.在React Native Native Module中使用这些方法。 6.构建并运行您的React Native应用程序。 这里是一个简单的例子,说明如何在React Native应用程序中使用原生Android模块: 1.创建一个新的Android库项目 在Android Studio中,选择“File” > “New” > “New Module”。然后选择“Android Library”并按照向导中的说明创建一个新的Android库项目。 2.在您的React Native项目中创建一个新的Native Module 在React Native项目的根目录下,运行以下命令: ``` react-native create-library MyNativeModule ``` 此命令将创建一个名为MyNativeModule的新目录。在此目录中,您可以添加一个名为MyNativeModule.java的文件。 3.将您的原生代码添加到Android库项目中 将您的原生代码复制到Android库项目中的src/main/java目录中。 4.编写Java或Kotlin代码来公开原生方法 在您的Java或Kotlin类中,使用@ReactMethod注释来标记要公开给React Native的原生方法。例如: ``` @ReactMethod public void showToast(String message) { Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show(); } ``` 5.在React Native Native Module中使用这些方法 在您的React Native应用程序中,导入MyNativeModule并调用其方法。例如: ``` import { NativeModules } from 'react-native'; const { MyNativeModule } = NativeModules; MyNativeModule.showToast('Hello, world!'); ``` 6.构建并运行您的React Native应用程序 在React Native应用程序的根目录中,运行以下命令以构建并运行您的应用程序: ``` react-native run-android ``` 这样,您就可以在React Native应用程序中使用原生Android模块了!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值