HarmonyOS开发：AI字幕控件使用介绍

目录

• 前言
• AI字幕控件技术概述
• 关于AI字幕控件
• 使用场景
• 实现AI字幕控件
• 自定义AI字幕控件
• 结束语

前言

随着多媒体内容的爆炸性增长，为用户提供便捷的字幕服务变得尤为重要，再加上现在人工智能技术的快速发展，借助AI助力于字幕领域，解放了之前传统的人力的字幕模式。随着HarmonyOS提供了AI字幕控件，该控件能够实现自动语音识别并生成字幕，极大地提升了视频和音频内容的可访问性，也让鸿蒙原生应用有了更加高效的方式去处理字幕相关的功能。那么本文就来详细介绍如何在HarmonyOS应用中集成和使用AI字幕控件，方便了解和使用。

AI字幕控件技术概述

先来介绍关于AI字幕控件技术的概念，其实AI字幕控件利用语音识别技术（Automatic Speech Recognition, ASR）将语音转换成文本，并实时显示为字幕。这项技术对于听障人士、非母语观众以及需要静音环境下理解内容的用户来说非常有用。

关于AI字幕控件

在HarmonyOS中，关于AI字幕控件的使用，通常涉及下面的操作步骤：
1.权限申请：在应用的配置文件中添加必要的权限。
2.集成ASR服务：使用系统提供的API集成语音识别服务。
3.配置字幕参数：设置字幕的语言、样式和显示位置。
4.显示字幕：将识别的文本以字幕的形式显示在界面上。

使用场景

再来介绍一下AI字幕的是使用场景，AI字幕控件应用广泛，例如在用户不熟悉音频源语言或者静音的时候，为用户提供字幕服务。然后再来介绍一下HarmonyOS中关于AI字幕的接口都有哪些？AI字幕功能主要由AICaptionComponent提供，具体如下所示：

接口	描述
AICaptionComponent	AI字幕组件
AICaptionOptions	AI字幕初始化参数。
AICaptionController	AI字幕组件的控制器，是AI字幕组件的主要功能入口类，用来操作AI字幕。它所承载的工作包括：写音频数据、获取音频流信息等。

实现AI字幕控件

接下来就来详细分享关于如何实现AI字幕控件，具体的操作步骤如下所示。

步骤1：引入类

从项目根目录进入/src/main/ets/pages/Index.ets文件，在使用AI字幕控件前，将实现AI字幕控件和其他相关的类添加至工程。具体操作如下所示：

import { AICaptionComponent, AICaptionController, AICaptionOptions } from '@kit.SpeechKit';

步骤2：配置页面布局

然后简单配置页面的布局，加入AI字幕组件，并在aboutToAppear中设置AI字幕组件的传入参数，具体操作步骤如下所示：

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'AI_CAPTION_DEMO'

class Logger {
  static info(...msg: string[]) {
    hilog.info(0x0000, TAG, msg.join())
  }

  static error(...msg: string[]) {
    hilog.error(0x0000, TAG, msg.join())
  }
}

@Entry
@Component
struct Index {
  private captionOption ?: AICaptionOptions;
  private controller = new AICaptionController();
  @State isShown: boolean = false;

  aboutToAppear(): void {
    // AI字幕初始化参数，设置字幕的不透明度和回调函数
    this.captionOption = {
      initialOpacity: 1,
      onPrepared: () => {

      },
      onError: (error) => {

      }
    }
  }

  build() {
    Column({ space: 20 }) {
      // 调用AICaptionComponent组件初始化字幕
      AICaptionComponent({
        isShown: this.isShown,
        controller: this.controller,
        options: this.captionOption
      })
        .width('80%')
        .height(100)
      Divider()
      if (this.isShown) {
        Text('上面是字幕区域')
          .fontColor(Color.White)
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .backgroundColor('#7A7D6A')
  }
}

步骤3：回调函数

然后在布局中加入两个按钮以及点击事件的回调函数，具体设置如下所示：

• 第一个按钮的回调函数负责控制AI字幕组件的显示状态。
• 第二个按钮的回调函数负责读取资源目录中的音频文件，将音频数据传给AI字幕组件。
  具体的示例代码如下所示：

import { AudioData } from '@kit.SpeechKit';

@Entry
@Component
struct Index {

  isReading: boolean = false;

  async readPcmAudio() {
    this.isReading = true;
    const fileDate: Uint8Array = await getContext(this).resourceManager.getMediaContent($r("app.media.chineseAudio"));
    const bufferSize = 640;
    const byteLength = fileDate.byteLength;
    let offset = 0;

    let starTime = new Date().getTime();
    while (offset < byteLength) {
      //模拟实际情况，读文件比录音机返回流快，所以要等待一段时间
      let nextOffset = offset + bufferSize
      if (offset > byteLength) {
        this.isReading = false;
        return
      }
      const arrayBuffer = fileDate.buffer.slice(offset, nextOffset);
      let data = new Uint8Array(arrayBuffer);

      const audioData: AudioData = {
        data: data
      }

      if (this.controller) {
        Logger.info(`writeAudio： ${audioData.data.byteLength}`)
        this.controller.writeAudio(audioData)
      }
      offset = offset + bufferSize;
      const waitTime = bufferSize / 32
      await this.sleep(waitTime)
    }
    let endTime = new Date().getTime()
    this.isReading = false;

  }

  sleep(time: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, time))
  }

  build() {
    Column({ space: 20 }) {
     // ...
      Button('切换字幕显示状态:' + (this.isShown ? '显示' : '隐藏'))
        .backgroundColor('#B8BDA0')
        .width(200)
        .onClick(() => {
          this.isShown = !this.isShown;
        })
      Button('读取PCM音频')
        .backgroundColor('#B8BDA0')
        .width(200)
        .onClick(() => {
          if (!this.isReading) {
            this.readPcmAudio()
          }
        })
     // ...
    }
  }
}

自定义AI字幕控件

除了基本的字幕显示功能，开发者还可以根据应用的需求自定义AI字幕控件行为，比如：

• 字幕同步：根据视频播放进度同步字幕显示。

• 用户自定义设置：允许用户自定义字幕的样式和位置。

  结束语

  众所周知AI字幕控件是HarmonyOS开发中的一项创新功能，它为应用提供了强大的语音识别和字幕显示能力，尤其是在移动应用开发中的重要性不言而喻。通过本文的介绍，可以很好的了解如何在HarmonyOS应用中实现AI字幕控件功能，以及实际开发中的具体使用操作。随着技术的不断发展，AI字幕控件将在HarmonyOS生态中扮演越来越重要的角色，结合现在人工智能技术的成熟，给鸿蒙原生应用加持很大，也为用户带来更加丰富和便捷的体验。